chrome扩展开发

1. 简介

chrome扩展程序（常称插件）是一个用Web技术开发、用来增强浏览器功能的软件，chrome浏览器扩展开发算是相当简单的，基本只要掌握HTML+CSS+Javascript，即可快速开发一个属于你的chrome插件！它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

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

书签控制；
下载控制；
窗口控制；
标签控制；
网络请求控制，
各类事件监听；
自定义原生菜单；
完善的通信机制；

2. 文件目录

3. 插件组成

后台网页background

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

background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。配置中，background可以通过page指定一张网页，也可以通过scripts直接指定一个JS，Chrome会自动为这个JS生成一个默认的网页:

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

用户界面网页popup

扩展程序可以包含普通的 HTML 网页，用来显示扩展程序的用户界面。例如，浏览器按钮可以包含弹出菜单，通过 HTML 文件实现。任何一个扩展程序都可以有选项页面，让用户自定义扩展程序的工作方式。

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

内容脚本content-scripts

如果您的扩展程序需要与网页交互，您就需要使用内容脚本。内容脚本是一些 JavaScript 代码，它们在浏览器中已加载页面的上下文中执行。借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS，最常见的比如：广告屏蔽、页面CSS定制，等等。

content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现。content-scripts不能访问绝大部分chrome.*api，如果非要调用其它API的话，你还可以通过通信来实现让background来帮你调用。

4. 使用 chrome.* API

扩展程序除了能够使用网页和应用可以使用的所有 API 外，还能使用仅用于 Chrome 浏览器的 API（通常称为 chrome.* API）来更好地与浏览器集成。例如，任何扩展程序或网上应用可以使用标准的 window.open() 方法来打开一个网页，但是如果您想指定网页应该显示在哪个窗口中，您的扩展程序就可以使用仅用于 Chrome 浏览器的 tabs.create 方法。

异步方法与同步方法的区别
大部分 chrome.* API 的方法都是异步的，它们不等待操作完成就立即返回。如果您需要知道操作结果，您可以向方法传递一个回调函数，回调函数将稍后在方法返回后的某个时刻执行（可能很久之后）。下面是一个异步方法签名的例子：

chrome.tabs.create(object createProperties, function callback)

也有一些 chrome.* 方法是同步的。同步的方法没有回调参数，因为它们只有当所有操作完成后才返回。通常，同步方法有返回值类型。考虑 runtime.getURL 方法：

string chrome.runtime.getURL()

该方法没有回调参数，但是有返回值类型 string，因为它同步地返回 URL，不进行任何其他异步操作。

1
2
3

chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});

5. 插件清单manifest.json

manifest.json是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。

下面给出的是一些常见的配置项：

{
 //必选
 /*
   指定您的应用包要求的清单文件格式的版本。从 Chrome 18 开始，开发人员应该指定 2
 */
 "manifest_version": 2,
 "name":"我的应用名称",
 "version":"我的应用版本",

 //推荐
 /*
   清单文件-默认语言 指定_locales中的子目录，包含该应用默认字符串。
   对于含有 _locales 目录的应用来说这一属性是必需的，
   在没有 _locales 目录的应用中该属性不能存在
 */
 "default_locale":"en", 

 /*
   这个描述在安装应用之后可以看见
 */
 "description":"关于应用的描述", 

 /*一个或多个代表应用、应用或主题背景的图标*/
 "icons":{
   "16":"icon16.png",
   "48":"icon48.png"
 },

 /*
  选择某一个（或者无）
  browser_action（浏览器按钮）
  page_action（页面按钮）
 */

 // 如果有 browser_action, 即在 chrome toolbar 的右边添加了一个 icon
 "browser_action": {
   "default_icon": "logo.jpg",
   "default_title": "Google Mail",      // tooltip, 光标停留在 icon 上时显示
   "default_popup": "popup.html"  // 如果有 popup 的页面, 则用户点击图标就会渲染此 HTML 页面
 },


 // 如果并不是对每个网站页面都需要使用插件, 可以使用 page_action(页面按钮） 而不是 browser_action（浏览器按钮）
 // browser_action 应用更加广泛
 // 如果 page_action 并不应用在当前页面, 会显示灰色

 "page_action":{
   "default_icon": {                    // 可选
     "19": "images/icon19.png",           // 可选
     "38": "images/icon38.png"            // 可选
   },
   "default_title": "Google Mail",      // 可选，在工具提示中显示
   "default_popup": "popup.html"        // 可选
 },

 //可选
 "author":"开发者",
 "automation":"",


 /*
 后台网页
 1.应用通常需要有一个长时间运行的脚本来管理一些任务或状态，而后台网页就是为这一目的而设立。
 通常情况下，后台页面不需要任何 HTML 标记，这种情况下后台页面可以单独使用 JavaScript文件实现。
 后台页面将由应用系统生成，包含 scripts 属性中列出的每一个文件。

 2.page：如果您需要在您的后台页面中指定 HTML，您可以改用 page 属性：

 3.persistent：应用和应用通常需要长时间运行的脚本来管理某些任务或状态，这就是事件页面的作用。
 事件页面只在需要时加载，当事件页面不活动时就会卸载，以便释放内存和其他系统资源。
 如何得到事件页面 就是设置一个"persistent"键，如果没有设置，你将得到一个普通的后台页面。
 */
 "background":{
   "scripts":["background.js"],
   "page": "background.html",
   "persistent":false
 },


 /*
   内容脚本:其实就是向你想要的网页中插入一个脚本代码，执行你想要做的事情
   内容脚本是在网页的上下文中运行的 JavaScript 文件，
   它们可以通过标准的文档对象模型（DOM）来获取浏览器访问的网页详情，或者作出更改。
   
   1.run_at 可选。
   控制 js 中的 JavaScript 文件何时插入，
   可以为 "document_start"、
   "document_end" 或 "document_idle"，默认为 "document_idle"。 


   1.1如果是 "document_start"，这些文件将在 css 中指定的文件之后，但是在所有其他 DOM 构造或脚本运行之前插入。 

   1.2.如果是 "document_end"，文件将在 DOM 完成之后立即插入，但是在加载子资源（如图像与框架）之前插入。 

   1.3.如果是 "document_idle"，浏览器将在 "document_end" 和刚发生 window.onload 事件这两个时刻之间选择合适的时候插入，
   具体的插入时间取决于文档的复杂程度以及加载文档所花的时间，并且浏览器会尽可能地为加快页面加载速度而优化。 
 
   2.all_frames 可选。
   控制内容脚本运行在匹配页面的所有框架中还是仅在顶层框架中。 默认为 false，意味着仅在顶层框架中运行
   
   content_scripts还有一些其他不是很常用的属性
 */

 "content_scripts": [{
   "matches": ["https://*.lovek.vip/*"], //匹配的地址网页
   "exclude_matches":[],
   "js": ["jquery.js","ideacome.js"], //插入的js
   "css": ["mystyles.css"], //css改变样式
   "run_at":"document_idle",
   "all_frames": true //该匹配下面的所有窗口
 },{
   "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
   "js": ["js/show-image-content-size.js"] //可以针对不同的规则插入不同的内容
 }],

// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
"web_accessible_resources": [
   "images/*.png",
   "style/double-rainbow.css",
   "script/double-rainbow.js",
   "script/main.js",
   "templates/*"
 ],

/**
  如果不是通过 chrome web store 自动更新插件

   我们希望扩展能自动升级，理由和让chrome自动升级一样：修改程序bug和安全漏洞 ，增加新功能，提升性能，改善体验。
   一个扩展的manifest文件里面必须指定一个"update_url"来执行升级检测。

   扩展可以托管在Chrome Web Store，也可以发布到极速浏览器应用开放平台上。
   如果托管在Chrome Web Store则update_url应该是：http://clients2.google.com/service/update2/crx    
 **/
 "update_url": "https://clients2.google.com/service/update2/crx",

// 插件主页，这个很重要，不要浪费了这个免费广告位
"homepage_url": "https://www.lovek.vip",

/*  
   扩展或app将使用的一组权限。每个权限是一列已知字符串列表中的一个，
   如geolocatioin或者一个匹配模式，来指定可以访问的一个或者多个主机。
   权限可以帮助限定危险，如果你的扩展或者app被攻击。
   一些权限在安装之前，会告知用户
 */
 "permissions":[
   "tabs", //Required if the extension uses the chrome.tabs or chrome.windows module.
   "bookmarks", //使用chrome.bookmarks模块来创建、组织和管理书签
   "http://www.lovek.vip/",    
   "http://*.google.com/",    
   "unlimitedStorage", //提供了一个无限的HTML5配额来存储客户端数据,如数据库和本地存储文件。没有这个权限,扩展仅限于5 MB的本地存储
   "history" //历史记录的使用权限  chrome.history 
   "notifications",//提示
   "cookies",//Required if the extension uses the chrome.cookies module.
 ],

/**开发时为扩展指定的唯一标识值。
注意：通常您并不需要直接使用这个值，而是在您的代码中使用相对路径或者chrome.extension.getURL()得到的绝对路径。
这个值并不是开发时显式指定的，而是Chrome在安装.crx时辅助生成的。(开发时可以通过上传扩展或者手工打包生成crx文件)。 安装完crx，在Chrome的用户数据目录下的Default/Extensions/<extensionId>/<versionString>/manifest.json文件中，您可以看到这个扩展的key。**/

key:'',

"commands": {
     // commands API 用来添加快捷键
     // 需要在 background page 上添加监听器绑定 handler
   "toggle-feature-foo": {
     "suggested_key": {
       "default": "Ctrl+Shift+Y",
       "mac": "Command+Shift+Y"
     },
     "description": "Toggle feature foo",
     "global": true
       // 当 chrome 没有 focus 时也可以生效的快捷键
       // 仅限 Ctrl+Shift+[0..9]
   },
   "_execute_browser_action": {
     "suggested_key": {
       "windows": "Ctrl+Shift+Y",
       "mac": "Command+Shift+Y",
       "chromeos": "Ctrl+Shift+U",
       "linux": "Ctrl+Shift+J"
     }
   },
   "_execute_page_action": {
     "suggested_key": {
       "default": "Ctrl+Shift+E",
       "windows": "Alt+Shift+P",
       "mac": "Alt+Shift+P"
     }
   },
   ...
 },
 "content_capabilities": ...,
 "optional_permissions": ["tabs"], // 其他需要的 permission, 在使用 chrome.permissions API 时用到, 并非安装插件时需要

 "short_name": "Short Name", // 插件名字简写

"storage": {
   "managed_schema": "schema.json"
 }, //  使用 storage.managed api 的话, 需要一个 schema 文件指定存储字段类型等, 类似定义数据库表的 column

......
//还有很多其他的配置
}

转载请注明出处：https://blog.lovek.vip/2019/12/10/chrome-extension/