一、浏览器插件基础步骤：

1、文件最基础的配置 ：

一个manifest文件、一个或多个html文件、可选的一个或多个javascript文件、可选的任何需要的其他文件，例如图片；在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用（扩展），可以自动生成.crx文件。

2、创建应用：

创建配置文件：manifest.json（关于版本信息等基础配置） 图标文件；

3、加载扩展： 在菜单栏选择更多工具，打开扩展程序，选择开发者模式，点击“加载已解压的扩展程序（载入正在开发的扩展程序）”按钮，选择扩展文件所在的目录文件，如果扩展应用正确，图标就会显示在地址栏右侧；

二、详细解释manifest.json文件配置：

每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，叫manifest.json，里面提供了重要的信息 。最基础的文件，也是最重要的文件。配置关于项目的相关信息：版本、名称、描述、图标等；

字段说明

   以下是三个必填的字段：

manifest_version：manifest文件内容格式的版本，目前版本为2，本次介绍的格式都是基于该版本的.

version：该浏览器插件的版本。

name：该浏览器插件的名称。

可选择的字段：

description：该浏览器插件的描述信息；

icons：一个或者多个图标来表示扩展；

browser_action：用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。

浏览器插件的工具栏图标。和名称

eg：

"browser_action" : {

        "default_icon": "icons/browser_action_24.png",

        "default_title": "__MSG_extensionName__"

    }

permissions：浏览器插件需要的权限，支持正则匹配；

background：浏览器插件后端程序，大部分浏览器插件api，以及https网站都需要后端程序来完成。如：获取浏览器插件的版本号。
背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。

"background" : {

        "persistent" : false,

        "page": "background.html"   //自定义背景文件

    },

   "background": {

    "scripts": ["background.js"]  // 由定义的js文件自动生成背景文件，

  }

content_scripts：页面注入配置。例如：向域名为xx的注入一串输出hello world的脚本，就需要该配置，同时也需要配置拥有该域名xx的权限。
是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。

详情可以查看文档字段解释：

http://open.chrome.360.cn/extension_dev/manifest.html

三、举个栗子：

manifest.json文件配置：

{

    "name": "第一个扩展",//该插件的名称

    "version": "1.0", //该插件的版本

    "manifest_version": 2, //文件内容格式的版本，目前版本为2，本次介绍的格式都是基于该版本

    "description": "扩展", //该插件的描述信息

    "background": { //运行在扩展进程中的HTML页面,一般背景页不需要任何HTML，仅仅需要js文件,浏览器插件后端程序，大部分浏览器插件api，以及https网站都需要后端程序来完成。如：获取浏览器插件的版本号。

        "scripts": ["background.js"]

    },

    "permissions": [//内容脚本可以作用到模式匹配定义好的URL集合上

        "http://*/",

        "http://*/*",

        "https://*/",

        "https://*/*",

        "bookmarks",

        "contextMenus",

        "activeTab",

        "storage",

        "tabs",

        "cookies"

    ],

    "icons": {//一个或者多个图标来表示扩展。提供一个128x128的图标将在webstore安装时候使用。48x48的图标扩展管理页面需要。提供16x16的图标作为扩页面的fa网页图标，还将显示在实验性的扩展infobar特性上。

        "16": "img/icon-16.png",

        "24": "img/icon-32.png",

        "48": "img/icon-48.png",

        "64": "img/icon-64.png",

        "128": "img/icon-128.png"

    },

    "browser_action": {//工具栏展示的图标相关信息

        "default_icon": "img/icon.png",

        "default_title": "测试标题",//hover时出现的标题

        "default_popup": "popup.html"

    }

}

popul.html:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Getting Started Extension's Popup</title>

		<style type="text/css">

			body{

			    width: 110px;

			    overflow-x: hidden;

			}

			p,h2{

				text-align: center;

			}

		</style>

	</head>

	<body>

		<div id="demo">

		</div>

		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="popup.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>

popup.js文件：

$(document).ready(function(){

    var details = chrome.app.getDetails();

    var html = "<p><img src='"+details.browser_action.default_icon+"'></p>"+

            "<h2>"+details.name+"</h2>"+

            "<p>版本:v"+details.version+"</p>"+

            "<p>作者:simbaLS</p>"+

            "<p>@copyright 2018</p>";

    $("#demo").html(html);

});

效果如图：

四、打包扩展应用：

Chrome扩展插件流程的更多相关文章

  1. BlazeMeter发布chrome扩展插件，支持JMeter脚本创建

    BlazeMeter发布chrome扩展插件,支持JMeter脚本创建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...

  2. 自制Chrome扩展插件：用于重定向js

    前言 作为一个前端开发, 在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有sourcemap? 有没有想过将生产环境的js直接重定向为本地开发环境的js? 玩微前端时,有没有想过用本地的子应用 ...

  3. 认识Chrome扩展插件

    1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...

  4. 那些离不开的 Chrome 扩展插件

    虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...

  5. 17 款程序员必备 Chrome扩展插件，爱了爱了！

    整理:小哈学Java 目录 美化 Just Black 午夜黑官方主题 Dark Reader 暗黑主题 为什么你们就是不能加个空格呢? 标签管理 Momentum [新标签页] Tab Manage ...

  6. Do Chrome extensions access iframes? chrome扩展插件访问所有iframes

    32down voteaccepted Yes, a Chrome Extension "content script" can run in all iframes (that ...

  7. chrome 扩展插件提示

    --force-fieldtrials=ExtensionDeveloperModeWarning/None/ ogfahjpoemnbbnlignjbfinfnahmfdlk ahjaciijnoi ...

  8. 有哪些可以节省chrome内存的扩展插件？

    不知道从什么时候开始,chrome浏览器就这样不知不觉的超过IE浏览器成为全球第一大浏览器.我们在赞赏chrome浏览器流畅的速度时,更多的是对其chrome插件功能的赞赏.但是我们也发现了一个致命的 ...

  9. 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件

    Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...

随机推荐

  1. html页面通过http访问mysql数据库中的内容，实现用户登录的功能

    需求: 通过html编写用户登录页面,页面内容包括用户名.密码和登录按钮,点击登录后访问login.php文件,使用按钮默认的submit提交用户名和密码,在login.php中访问mysql数据库, ...

  2. spring项目启动时执行任务

    https://www.jianshu.com/p/745868a34379

  3. eclipse-jee-kepler 如何设置编译compiler为1.8

    最新下载了jdk1.8,想在eclipse里面用一下 jdk1.8的新特性 但是,貌似eclipse(eclipse-jee-kepler-SR2-win32-x86_64.zip)最高的编译级别为: ...

  4. windows内核驱动内存管理之Lookaside使用

    Windows内存管理中使用了类似于容器的东西,叫做Lookaside对象,每次程序员申请内存都会从Lookaside里面申请,只有不足的时候,Lookaside才会向内存又一次申请内存空间,这样减少 ...

  5. JDBC 心得

    还记得jdbc的及个步骤, 一是class出对象 2  链接数据库 3 SQL  pre开头的 4 允许SQL,result,exeupdate, 在这里想写的通过反射得到对象, Hibernate有 ...

  6. vim 常用指令总结

    vim的好处(四大好处) vim具有大量的操作技巧,编辑能力强大且速度比其他工具快的多! (这里举个简单的小例子:将每行的前四个字母复制到每行的末尾; 将文本中的所有word替换为words; 等等很 ...

  7. java中比较特殊的三个浮点数Infinity、-Infinity、NaN

    学过javaScript的应该都知道,在js中的数值型number类型中有几个特殊的数,一个正无穷大.一个负无穷大.一个不是一个数NaN. 后来无意中发现java中也有这三个数,不过这三个数是浮点数, ...

  8. docker-2 tomcat

    启动容器命令 docker run -d -p 8080:8080 -v /root/tomcat/webapps:/usr/local/tomcat/webapps -v /root/tomcat/ ...

  9. ASP.NET Core 添加NLog日志支持(VS2015update3&VS2017)

    1.创建一个新的ASP.NET Core项目 2.添加项目依赖 NLog.Web.AspNetCore 3.在项目目录下添加nlog.config文件: <?xml version=" ...

  10. Spring Cloud的概述（二）

    1.什么是spring cloud? spring cloud,基于spring boot提供了一套微服务的解决方案,包括服务的注册与发现,配置中心,全链路监控,服务网管,负载均衡,熔断等组件,除了基 ...