Chrome插件开发的示例分析

这篇文章给大家分享的是有关Chrome插件开发的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

本文目录：

demo部分截图：

前言

什么是Chrome插件

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

个人猜测crx可能是Chrome Extension如下3个字母的简写：

另外，其实不只是前端技术，Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI)，比如全屏幕截图。

由于安全原因，Chrome浏览器42以上版本已经陆续不再支持NPAPI插件，取而代之的是更安全的PPAPI。

学习Chrome插件开发有什么意义

增强浏览器功能，轻松实现属于自己的“定制版”浏览器，等等。

Chrome插件提供了很多实用API供我们使用，包括但不限于：

• 书签控制；

• 下载控制；

• 窗口控制；

• 标签控制；

• 网络请求控制，各类事件监听；

• 自定义原生菜单；

• 完善的通信机制；

• 等等；

为什么是Chrome插件而不是Firefox插件

• Chrome占有率更高，更多人用；

• 开发更简单；

• 应用场景更广泛，Firefox插件只能运行在Firefox上，而Chrome除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等；

• 除此之外，Firefox浏览器也对Chrome插件的运行提供了一定的支持；

开发与调试

Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即可，也不需要专门的IDE，普通的web开发工具即可。

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问。

勾选开发者模式即可以文件夹的形式直接加载插件，否则只能安装.crx格式的文件。Chrome要求插件必须从它的Chrome应用商店安装，其它任何网站下载的都无法直接安装，所以，其实我们可以把crx文件解压，然后通过开发者模式直接加载。

开发中，代码有任何改动都必须重新加载插件，只需要在插件管理页按下Ctrl+R即可，以防万一最好还把页面刷新一下。

核心介绍

manifest.json

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。

下面给出的是一些常见的配置项，均有中文注释，完整的配置文档请戳这里。

{// 清单文件的版本，这个必须写，而且必须是2"manifest_version": 2,// 插件的名称"name": "demo",// 插件的版本"version": "1.0.0",// 插件描述"description": "简单的Chrome扩展demo",// 图标，一般偷懒全部用一个尺寸的也没问题"icons":{"16": "img/icon.png","48": "img/icon.png","128": "img/icon.png"},// 会一直常驻的后台JS或后台页面"background":{// 2种指定方式，如果指定JS，那么会自动生成一个背景页"page": "background.html"//"scripts": ["js/background.js"]},// 浏览器右上角图标设置，browser_action、page_action、app必须三选一"browser_action": {"default_icon": "img/icon.png",// 图标悬停时的标题，可选"default_title": "这是一个示例Chrome插件","default_popup": "popup.html"},// 当某些特定页面打开才显示的图标// 需要直接注入页面的JS"content_scripts": [{//"matches": ["http:/*"],// "<all_urls>" 表示匹配所有地址"matches": ["<all_urls>"],// 多个JS按顺序注入"js": ["js/jquery-1.8.3.js", "js/content-script.js"],// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式"css": ["css/custom.css"],// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle"run_at": "document_start"},// 这里仅仅是为了演示content-script可以配置多个规则{"matches": ["*:/*.jpg", "*:/*.bmp"],"js": ["js/show-image-content-size.js"]}],// 权限申请"permissions":["contextMenus", // 右键菜单"tabs", // 标签"notifications", // 通知"webRequest", // web请求"webRequestBlocking","storage", // 插件本地存储"http:/*" // 可以通过executeScript或者insertCSS访问的网站],// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的"web_accessible_resources": ["js/inject.js"],// 插件主页，这个很重要，不要浪费了这个免费广告位"homepage_url": "https://www.baidu.com",// 覆盖浏览器默认页面"chrome_url_overrides":{// 覆盖浏览器默认的新标签页"newtab": "newtab.html"},// Chrome40以前的插件配置页写法"options_page": "options.html",// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个"options_ui":{"page": "options.html",// 添加一些默认的样式，推荐使用"chrome_style": true},// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字"omnibox": { "keyword" : "go" },// 默认语言"default_locale": "zh_CN",// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件"devtools_page": "devtools.html"}

content-scripts

所谓content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面CSS定制，等等。

示例配置：

{// 需要直接注入页面的JS"content_scripts": [{//"matches": ["http:/*"],// "<all_urls>" 表示匹配所有地址"matches": ["<all_urls>"],// 多个JS按顺序注入"js": ["js/jquery-1.8.3.js", "js/content-script.js"],// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式"css": ["css/custom.css"],// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle"run_at": "document_start"}],}

特别注意，如果没有主动指定run_at为document_start（默认为document_idle），下面这种代码是不会生效的：

document.addEventListener('DOMContentLoaded', function(){console.log('我被执行了！');});

content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现。content-scripts不能访问绝大部分chrome.xxx.api，除了下面这4种：

• chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)

• chrome.i18n

• chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)

• chrome.storage

其实看到这里不要悲观，这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用（关于通信，后文有详细介绍）。

好了，Chrome插件给我们提供了这么强大的JS注入功能，剩下的就是发挥你的想象力去玩弄浏览器了。

background

后台（姑且这么翻译吧），是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。

经过测试，其实不止是background，所有的直接通过chrome-extension://id/xx.html这种方式打开的网页都可以无限制跨域。

配置中，background可以通过page指定一张网页，也可以通过scripts直接指定一个JS，Chrome会自动为这个JS生成一个默认的网页：

{// 会一直常驻的后台JS或后台页面"background":{// 2种指定方式，如果指定JS，那么会自动生成一个背景页"page": "background.html"//"scripts": ["js/background.js"]},}

需要特别说明的是，虽然你可以通过chrome-extension://xxx/background.html直接打开后台页，但是你打开的后台页和真正一直在后台运行的那个页面不是同一个，换句话说，你可以打开无数个background.html，但是真正在后台常驻的只有一个，而且这个你永远看不到它的界面，只能调试它的代码。

event-pages

这里顺带介绍一下event-pages，它是一个什么东西呢？鉴于background生命周期太长，长时间挂载后台可能会影响性能，所以Google又弄一个event-pages，在配置文件上，它与background的唯一区别就是多了一个persistent参数：

{"background":{"scripts": ["event-page.js"],"persistent": false},}

它的生命周期是：在被需要时加载，在空闲时被关闭，什么叫被需要时呢？比如第一次安装、插件更新、有content-script向它发送消息，等等。

除了配置文件的变化，代码上也有一些细微变化，个人这个简单了解一下就行了，一般情况下background也不会很消耗性能的。

popup

popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。

popup可以包含任意你想要的HTML内容，并且会自适应大小。可以通过default_popup字段来指定popup页面，也可以调用setPopup()方法。

配置方式：

{"browser_action":{"default_icon": "img/icon.png",// 图标悬停时的标题，可选"default_title": "这是一个示例Chrome插件","default_popup": "popup.html"}}

需要特别注意的是，由于单击图标打开popup，焦点离开又立即关闭，所以popup页面的生命周期一般很短，需要长时间运行的代码千万不要写在popup里面。

在权限上，它和background非常类似，它们之间最大的不同是生命周期的不同，popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。

injected-script

这里的injected-script是我给它取的，指的是通过DOM操作的方式向页面注入的一种JS。为什么要把这种JS单独拿出来讨论呢？又或者说为什么需要通过这种方式注入JS呢？

这是因为content-script有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用content-script中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？其实这就是本小节要讲的。

在content-script中通过DOM方式向页面注入inject-script代码示例：

// 向页面注入JSfunction injectCustomJs(jsPath){jsPath = jsPath || 'js/inject.js';var temp = document.createElement('script');temp.setAttribute('type', 'text/javascript');// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.jstemp.class="lazy" data-src = chrome.extension.getURL(jsPath);temp.onload = function(){// 放在页面不好看，执行完后移除掉this.parentNode.removeChild(this);};document.head.appendChild(temp);}

你以为这样就行了？执行一下你会看到如下报错：

Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

意思就是你想要在web中直接访问插件中的资源的话必须显示声明才行，配置文件中增加如下：

{// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的"web_accessible_resources": ["js/inject.js"],}

至于inject-script如何调用content-script中的代码，后面我会在专门的一个消息通信章节详细介绍。

homepage_url

开发者或者插件主页设置，一般会在如下2个地方显示：

Chrome插件的8种展示形式

browserAction(浏览器右上角)

通过配置browser_action可以在浏览器的右上角增加一个图标，一个browser_action可以拥有一个图标，一个tooltip，一个badge和一个popup。

示例配置如下：

"browser_action":{"default_icon": "img/icon.png","default_title": "这是一个示例Chrome插件","default_popup": "popup.html"}

图标

browser_action图标推荐使用宽高都为19像素的图片，更大的图标会被缩小，格式随意，一般推荐png，可以通过manifest中default_icon字段配置，也可以调用setIcon()方法。

tooltip

修改browser_action的manifest中default_title字段，或者调用setTitle()方法。

badge

所谓badge就是在图标上显示一些文本，可以用来更新一些小的扩展状态提示信息。因为badge空间有限，所以只支持4个以下的字符（英文4个，中文2个）。badge无法通过配置文件来指定，必须通过代码实现，设置badge文字和颜色可以分别使用setBadgeText()和setBadgeBackgroundColor()。

chrome.browserAction.setBadgeText({text: 'new'});chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

效果：

pageAction(地址栏右侧)

所谓pageAction，指的是只有当某些特定页面打开才显示的图标，它和browserAction最大的区别是一个始终都显示，一个只在特定情况才显示。

需要特别说明的是早些版本的Chrome是将pageAction放在地址栏的最右边，左键单击弹出popup，右键单击则弹出相关默认的选项菜单：

而新版的Chrome更改了这一策略，pageAction和普通的browserAction一样也是放在浏览器右上角，只不过没有点亮时是灰色的，点亮了才是彩色的，灰色时无论左键还是右键单击都是弹出选项：

具体是从哪一版本开始改的没去仔细考究，反正知道v50.0的时候还是前者，v58.0的时候已改为后者。

调整之后的pageAction我们可以简单地把它看成是可以置灰的browserAction。

• chrome.pageAction.show(tabId) 显示图标；

• chrome.pageAction.hide(tabId) 隐藏图标；

示例(只有打开百度才显示图标)：

// manifest.json{"page_action":{"default_icon": "img/icon.png","default_title": "我是pageAction","default_popup": "popup.html"},"permissions": ["declarativeContent"]}// background.jschrome.runtime.onInstalled.addListener(function(){chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){chrome.declarativeContent.onPageChanged.addRules([{conditions: [// 只有打开百度才显示pageActionnew chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})],actions: [new chrome.declarativeContent.ShowPageAction()]}]);});});

效果图：

右键菜单

通过开发Chrome插件可以自定义浏览器的右键菜单，主要是通过chrome.contextMenusAPI实现，右键菜单可以出现在不同的上下文，比如普通页面、选中的文字、图片、链接，等等，如果有同一个插件里面定义了多个菜单，Chrome会自动组合放到以插件名字命名的二级菜单里，如下：

最简单的右键菜单示例

// manifest.json{"permissions": ["contextMenus"]}// background.jschrome.contextMenus.create({title: "测试右键菜单",onclick: function(){alert('您点击了右键菜单！');}});

效果：

添加右键百度搜索

// manifest.json{"permissions": ["contextMenus"， "tabs"]}// background.jschrome.contextMenus.create({title: '使用度娘搜索：%s', // %s表示选中的文字contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单onclick: function(params){// 注意不能使用location.href，因为location是属于background的window对象chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});}});

效果如下：

语法说明

这里只是简单列举一些常用的，完整API参见：https://developer.chrome.com/extensions/contextMenus

chrome.contextMenus.create({type: 'normal'， // 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normaltitle: '菜单的名字', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本contexts: ['page'], // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认pageonclick: function(){}, // 单击时触发的方法parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单documentUrlPatterns: 'https:/*", "https:/*", "https:/*", // 可以通过executeScript或者insertCSS访问的网站"https://*/*" // 可以通过executeScript或者insertCSS访问的网站],}// background.js// 是否显示图片var showImage;chrome.storage.sync.get({showImage: true}, function(items) {showImage = items.showImage;});// web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlockingchrome.webRequest.onBeforeRequest.addListener(details => {// cancel 表示取消本次请求if(!showImage && details.type == 'image') return {cancel: true};// 简单的音视频检测// 大部分网站视频的type并不是media，且视频做了防下载处理，所以这里仅仅是为了演示效果，无实际意义if(details.type == 'media') {chrome.notifications.create(null, {type: 'basic',iconUrl: 'img/icon.png',title: '检测到音视频',message: '音视频地址：' + details.url,});}}, {urls: ["<all_urls>"]}, ["blocking"]);

国际化

插件根目录新建一个名为_locales的文件夹，再在下面新建一些语言的文件夹，如en、zh_CN、zh_TW，然后再在每个文件夹放入一个messages.json，同时必须在清单文件中设置default_locale。

_locales\en\messages.json内容：

{"pluginDesc": {"message": "A simple chrome extension demo"},"helloWorld": {"message": "Hello World!"}}

_locales\zh_CN\messages.json内容：

{"pluginDesc": {"message": "一个简单的Chrome插件demo"},"helloWorld": {"message": "你好啊，世界！"}}

在manifest.json和CSS文件中通过__MSG_messagename__引入，如：

{"description": "__MSG_pluginDesc__",// 默认语言"default_locale": "zh_CN",}

JS中则直接chrome.i18n.getMessage("helloWorld")。

测试时，通过给chrome建立一个不同的快捷方式chrome.exe --lang=en来切换语言，如：

英文效果：

中文效果：

API总结

比较常用用的一些API系列：

• chrome.tabs

• chrome.runtime

• chrome.webRequest

• chrome.window

• chrome.storage

• chrome.contextMenus

• chrome.devtools

• chrome.extension

经验总结

查看已安装插件路径

已安装的插件源码路径：C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions，每一个插件被放在以插件ID为名的文件夹里面，想要学习某个插件的某个功能是如何实现的，看人家的源码是最好的方法了：

如何查看某个插件的ID？进入 chrome://extensions ，然后勾线开发者模式即可看到了。

特别注意background的报错

很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因，这时打开background的控制台才发现原来某个地方写错了导致代码没生效，正式由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)，所以特别注意这点。

如何让popup页面不关闭

在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。这种方法在某些情况下很实用！

不支持内联JavaScript的执行

也就是不支持将js直接写在html中，比如：

<input id="btn" type="button" value="收藏" onclick="test()"/>

报错如下：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-class="lazy" data-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

解决方法就是用JS绑定事件：

$('#btn').on('click', function(){alert('测试')});

另外，对于A标签，这样写href="javascript:;" rel="external nofollow" rel="external nofollow" 然后用JS绑定事件虽然控制台会报错，但是不受影响，当然强迫症患者受不了的话只能写成href="#" rel="external nofollow" 了。

如果这样写：

<a href="javascript:;" rel="external nofollow"  rel="external nofollow"  id="get_secret">请求secret</a>

报错如下：

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-class="lazy" data-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

注入CSS的时候必须小心

由于通过content_scripts注入的CSS优先级非常高，几乎仅次于浏览器默认样式，稍不注意可能就会影响一些网站的展示效果，所以尽量不要写一些影响全局的样式。

之所以强调这个，是因为这个带来的问题非常隐蔽，不太容易找到，可能你正在写某个网页，昨天样式还是好好的，怎么今天就突然不行了？然后你辛辛苦苦找来找去，找了半天才发现竟然是因为插件里面的一个样式影响的！

打包与发布

打包的话直接在插件管理页有一个打包按钮：

然后会生成一个.crx文件，要发布到Google应用商店的话需要先登录你的Google账号，然后花5个$注册为开发者，本人太穷，就懒得亲自验证了，有发布需求的自己去整吧。

参考

官方资料

推荐查看官方文档，虽然是英文，但是全且新，国内的中文资料都比较旧（注意以下全部需要翻墙）：

Chrome插件官方文档主页

Chrome插件官方示例

manifest清单文件

permissions权限

chrome.xxx.api文档模糊匹配规则语法详解

第三方资料

部分中文资料，不是特别推荐：

360安全浏览器开发文档

360极速浏览器

Chrome扩展开发文档

Chrome扩展开发极客系列博客

附图

附图：Chrome高清png格式logo：

感谢各位的阅读！关于“Chrome插件开发的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！