chrome插件开发攻略

当下在各大浏览器中，chrome可能已经成为前端开发者第一选择，不管是从启动速度、载入网页速度，账号系统，webstore，开发调试等，大家使用起来都很顺手，其中webstore中丰富的插件可能是有的人选择它的重要原因之一，今天我们就来了解一下chrome插件相关开发知识。

通过这篇文章，希望大家了解到:

什么是chrome插件

chrome插件结构组成，主要说下manifest.json文件

chrome插件的存储及消息通信是怎么样的

chrome插件是什么

通常来说Chrome插件只是一些HTML,CSS和JavaScript，允许我们通过一些Chrome提供的一些JavaScript API向Chrome添加一些功能。插件基本上是托管在Chrome中的网页，可以访问一些额外的API。

我们可类比chrome插件为公众号里面h5之于微信。微信提供了h5一些native接口比如分享，h5也是使用js/html/css实现，只是微信在上面加上了一层认证。

如果你有兴趣详细了解Chrome插件，可以查看Chrome官方文档深入学习。

chrome插件组成

一个 Chrome 插件其实就是一个配置文件 manifest.json 和一系列 html、css、js、图片文件的集合，所以只要有一点前端基础，写一个简单的 Chrome 插件还是很简单的事情。

manifest.json

首先我们看看manifest.json是什么，有什么作用，下面是一个manifest.json示例:

chrome浏览器加载插件时通过这文件配置，判断要加什么类型的插件，有什么功能，显示图标是怎么样的，有什么权限，去哪儿检测更新等。接下来主要说下其中几个重要的:

• permissions
• ominibox
• options_page
• content_scripts
• browser_action
• background
• update_url

权限设置 permissions

首先我们看下permission项，Chrome插件也和普通我们安装Android或者其它程序一样，考虑安全问题，平台会要求开发者提供我们需要操作用户的什么数据，即相应的需要使用权限有哪些，让用户安装时可以知道这插件要使用我的什么权限，有个安装前了解，是不是有安全问题等，所以Chrome插件在配置文件里面有个permission选项，里面列上我们开发者需要使用权限，然后再后来的开发中才能使用相应的功能。

比如我们想读取用户的cookie(当然这很危险⚠️了)，我们需要加上cookies在permission列表里面。比如我们需要用户右击显示我们的菜单，我们需要contextMenus

当然对于我们普通用户不能随便装一些不安全的插件，一是我们在安装时可以看到我们要装的插件需要哪些权限，如果有比如危险的，比如cookies/webRequest等，我们就要注意一下了，除了在安装时可以看到，我们在安装好后在chrome://extensions插件列表页面相应的插件项里面有个"permission"荐，点击也能看到。

安装时查看：

安装完查看:

地址栏交互，omnibox

我们也可以在chrome://settings/searchEngins里面看到，除了插件注册的一些方式，通用搜索引擎也有注册，比如google/bing等

插件配置页 options_page

下面是Google translate插件options_page：

看了图大家应该就知道，这相当于是配置页，允许用户自定义插件的行为，我们提供一个选项页面给用户设置一些常用的操作选项，然后存起来，然后给插件使用。

比如我们可以在options page的实现用户设置收藏的颜色：

页面操作 page_action

设置此选项后的插件图标会出现在地址栏的右边，browser action同page action功能大体相同，设置popup，获取页面信息，设置页信息等

chrome://newtab/ (二维码自动识别)

browser action和page action的不同点在于，这两个只能设置一个，还有适用场景不一样，我们看下browser action的开发注意项：

• browser action用于对大多数页面有意义的功能。
  
• 对于只针对部分页面的操作，推荐使用page action。
  
• 请使用充分利用16x16倾斜空间的大型彩色图标。浏览器动作图标看起来应该比页面动作图标更大更重。
  
• 不要试图模仿Google Chrome的单色菜单图标。这不适合主题，无论如何，插件应该脱颖而出。
  
• 请使用Alpha透明度为您的图标添加柔化边缘。由于许多人使用主题，因此您的图标应该在各种背景颜色上看起来不错。
  
• 不要经常动画你的图标

常驻浏览器功能, background

此选设置的是插件加载后执行的代码，只执行一次，在这里面我们会

基于插件模块可以通过chrome.extension.getBackgroundPage()调用background中的方法,比如在options_page或者browser_action或者page_action中

页面注入, content_scripts

content scripts从名字我们就可以看出，这是和页面内容有关系的，这类设置的js/css会在页面加载后注入到页面里面，然后我们就可以在content scripts操作网页中的dom或者设置css样式了，content scripts也分为两种：
1.manifest.json里面content_scripts设置的js/css
2.通过api中的chrome.tabs.executeScript注入脚

本到相应网页，这api需要权限"activeTab"。

比如我们想安装我们插件后在打开网页时，我们点击页面中id为'blablabla'的按钮弹框提示：

当然我们也可以使用chrome提供的一些内置api，注意由于是content
script，我们不能在里面使用插件的方法，比如background的方法(当然我们可以通过后面说的通信方法实现):

chrome.extension

• getURL
• inIncognitoContext
• lastError
• onRequest
• sendRequest)

chrome.i18n

chrome.runtime

• connect
• getManifest
• getURL
• id
• onConnect
• onMessage
• sendMessage)

chrome.storage

插件的更新 update_url

浏览器会一定时间间去文章manifest.json里面的update_url里面的xml，然后更新相应内容进行更新。xml内容示例如下：

在网上有文章看到源码里面是设置5小时自动更新插件，当然也可以在chrome://extensions点击按钮手动更新

Chrome插件各模块之单的数据通信

content scripts与插件通信

content scripts与插件长连接通信

有时，持续时间长于单个请求和响应的对话很有用。在这种情况下，可以使用runtime.connect从content scripts打开一个port连接到插件页面。该port可以设置具有名称，以便区分不同类型的连接。以后就可能使用此port改送和接收消息。

插件间通信

有时我们如果有多个插件，有时会在多个插件间通信，和上面插件内通信类似，只是加个后缀即可。

插件A中设置接受连接代码

插件B中向插件A发消息

数据怎么存储

既然Chrome插件和普通网页一样，当然常用的网页存储方案，比如cookie，localStorage, sessionStorage等都可用，当然如前面提到，我们要在manifest中加入相应的权限并在相应的页面操作。

另外chrome还提供了一套API,chrome.storage，然后再分为两类，chrome.storage.local是只把数据保存在本地，另一种方法是chrome.storage.sync，这方法会在chrome自己的用户体系里面把用户保存的插件信息进行服务器同步，用户在其它chrome上登录时能同步其它地方登录的插件的数据。这两种方法都是异步的，示例如:

总结chrome插件的概览图

滴滴云官网：https://www.didiyun.com/?channel=14112

滴滴云疯狂双十一，服务器最低35折起