Chrome extensions

chrome扩展可以看成一中小型的应用，用来改善使用chrome浏览器时的体验。从实现角度看，就是一个.crx后缀命名的压缩包，里面包括但不限于HTML，JavaScript 和CSS文件。 对于功能比较多的扩展，也可以是vue 或者 react框架打包后的产物。

修改浏览器主题，修改网页上的样式，获取网络信息，截图下载等功能，利用扩展都可以完成。

基本项目结构

Manifest 文件

必须有manifest.json 配置文件，作为扩展的入口，而且后面用到的所有脚本或组件，都需要在manifest中注册。

//manifest.json
  {
  // Required
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2
  }

上面列出了必须字段，其中manifest_version版本从chrome 18 开始，需要固定写成2，不带任何引号。

background

在manifest.json中指定后台脚本文件，用来监听浏览器事件。

• script选项指定了需要注册的js文件路径。
• persistent一般设置为false，唯一需要设置persistently为true的时候，是当前扩展用到了chrome.webRequest APi去阻止或修改网络请求。大部分情况设置"persistent": false

// manifest.json
{
 ...
 
+ "background": {
+     "scripts": ["background.js"],
+     "persistent": false
+   },

}

然后在background.js 中初始化扩展。下面示例表示在安装完成后，马上更新存储的color值。

// background.js
  chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });

permissions

权限许可，脚本中用到了那些api，对应的权限字段在这里列出来，比如前面用到了storageAPI。

// manifest.json
{
...
+  "permissions": ["storage"],
}

在chrome开放者文档中，每个api都列出了Permissions字段。
。

也可以是请求跨域接口的权限设置，比如

  "permissions": [
    "https://\*.google.com/"
  ],

action

用户接口，可以是一个小型弹窗，提示框，右键菜单，自定义快捷键等。

比如设置page_action选项，只在指定页面中被激活，其他页面中处于灰色不可点击状态，弹窗的内容对应popup.html页面

// manifest.json
{
  ...
+    "page_action": {
+      "default_popup": "popup.html"
+    },
}

完整入门示例,可以在chrome开发者网站上下载

其它文件

需要与manifest.json配置中，指定的路径一致

安装

1. 直接地址栏输入chrome://extensions，或者点击右上角菜单->More Tools（工具） -> Extensions（扩展程序）. 勾选Developer Mode（开发者模式），
2. 点击Load Unpacked Extension（加载已解压的扩展程序）。

练习过程中，如果不清楚某些api用法，可以在https://developer.chrome.com/... 这里，搜索对应api编写的简单示例，更快上手。
在明确自己写插件的需求后，先在chrome应用商店中用关键词搜索一下是否有相应扩展。

常用chrome扩展

1.Infinity 新标签页 (Pro)

自定义新标签页，可以选择多种壁纸

2.沙拉查词-聚合词典划词翻译

好用的翻译插件，集合了多个词典

3.JSONView

在地址栏中输入接口地址，对返回的json格式数据格式化，

4.Proxy SwitchyOmega
代理转发接口

5.掘金
推荐每日优质内容，不过跟Infinity扩展有冲突，默认显示在新开标签页，

6.mage Downloader

截图，可以截整张网页，可以下载网页中所有图片，支持多种格式

7.Screencastify - Screen Video Recorder

屏幕录制，可以保存到Google Drive

8.简悦 - SimpRead

进入沉浸式阅读，体验不错

9.JavaScript Errors Notifier
捕获页面的JavaScript报错，不用打开开发者工具

国内插件库

https://www.chromebus.cn/
https://chrome.zzzmh.cn/#ext
https://pictureknow.com

参考文档

https://developer.chrome.com/...