Chrome Extension - crx

参考资料

(干货)Chrome插件(扩展)开发全攻略
360极速浏览器应用开发平台
Chrome插件（Extensions）开发攻略
chrome扩展开发示例之扩展页面与content_scripts建立长连接通信

主要内容

- 为什么需要

简单地说，浏览器插件，可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能：捕捉特定网页的内容，捕捉HTTP报文，捕捉用户浏览动作，改变浏览器地址栏/起始页/书签/Tab等界面元素的行为，与别的站点通信，修改网页内容

- chrome扩展安装简介

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。从右上角菜单->更多工具->扩展程序可以进入 插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问。
勾选开发者模式即可以文件夹的形式直接加载插件，否则只能安装.crx格式的文件。Chrome要求插件必须从它的Chrome应用商店安装，其它任何网站下载的都无法直接安装，所以，其实我们可以把crx文件解压，然后通过开发者模式直接加载。

- chrome扩展的基本常见组成

image

• manifest.json： 配置文件入口

{
  // 清单文件的版本，这个必须写，而且必须是2
  "manifest_version": 2,
  // 插件的名称
  "name": "simpleUse",
  "version": "1.0.0",
  // 插件页描述
  "description": "简单的Chrome扩展分享",
  // 插件页图标
  "icons": {
    "16": "icon/icon2.png",
    "48": "icon/icon2.png",
    "128": "icon/icon2.png"
  },
  // 会一直常驻的后台JS或后台页面，不会判断url，针对所有界面，无限制跨域
  "background": {
    "scripts": ["js/jquery-3.4.1.min.js", "js/background.js"],
    "persistent": true
  },
  // 浏览器右上角图标设置
  "browser_action": {
    "default_icon": "icon/icon1.png",
    "default_title": "插件分享",
    "default_popup": "popup.html"
  },
  // 指定替换的页面 历史记录history，新标签页newtab，书签页bookmarks（只能覆盖一个）
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  // 需要直接注入页面的JS
  "content_scripts": [{
    "matches": ["http://zhishuchacha.com/*"],
    "js": ["js/jquery-3.4.1.min.js", "js/content-script.js"],
    "css": ["css/custom.css"],
    // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
    "run_at": "document_end",
    "all_frames": true
  }],
  "permissions": [
    "contextMenus", // 右键菜单
    "tabs", // 标签
    "webRequest", // web请求
    "webRequestBlocking",
    "storage", // 插件本地存储
    "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
    "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
  ],
  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
  "web_accessible_resources": [
    "*",
    "*/*"
  ],
  "homepage_url": "http://zhishuchacha.com/",
  // 配置option页面，可以用于让用户自己设置自定义参数
  "options_page": "options.html",
  "options_ui": {
    "page": "options.html",
    "chrome_style": true,
    "open_in_tab": false
  },
  // 配置引入外界链接资源(https://blog.csdn.net/zhouxingxingzxy/article/details/50802908)
  "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;"
}

• content-script.js：

注入js文件，只共享DOM，不共享JS
inject.js 指的是通过DOM操作的方式向页面注入的一种JS.因为content-script有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用content-script中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求,可以往页面动态注入一个inject.js，再通过window.postmessage等方式来通信

* content-script.js *
<!-- injectJs注入脚本 -->
function injectCustomJs(jsPath) {
  jsPath = jsPath || "js/inject.js"
  var temp = document.createElement("script")
  temp.setAttribute("type", "text/javascript")
  // 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
  temp.src = chrome.extension.getURL(jsPath)
  temp.onload = function () {
    // 执行完后移除掉
    this.parentNode.removeChild(this)
  };
  document.head.appendChild(temp)
}

• popup：

点击browser_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭（生命周期），可以和background直接通信

• background：

后台一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域

- chrome扩展的部分模块间通信方式（跨域长连接找background）

image

• contentJs 和 injectJs

//方式1（推荐）
window.postMessage({data}) 
--
window.addEventListener("message", function (e) {
  //e.data
}, false);

//方式2（自定义事件传递）
var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
ele.dispath(customEvent)
--
ele.addEventListener('myCustomEvent', function () {
   //process()
});

• contentJs 与 popup(必须打开) / background 通信

1. 短连接（同步调用）：
 - contentJS发起：
  chrome.runtime.sendMessage
 - 扩展端发起：
  chrome.tabs.sendMessage
 - 接受一致：
  chrome.runtime.onMessage
2. 长连接（异步数据返回）：
（https://blog.csdn.net/wxkongkong/article/details/64906319）
 - contentJS发起：
  chrome.runtime.connect
 - 扩展端发起：
  chrome.tabs.connect
 - 接受一致：
  chrome.runtime.onConnect.addListener

• popup 和 background

1.获取background window对象
chrome.extension. getBackgroundPage()
示例：
// background.js
function test() { alert('我是background！');}
// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 访问bg的函数
alert(bg.document.body.innerHTML); // 访问bg的DOM

2.获取popup对象（popup打开状态）
示例：
// background.js
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
  console.log(views[0].location.href);
}

- chrome扩展的storage（local：本地， sync: 同步到账户）

• chrome.storage是针对插件全局的，即使你在background中保存的数据，在content-script也能获取到。
• chrome.storage.sync可以跟随当前登录用户自动同步，这台电脑修改的设置会自动同步到其它电脑，很方便，如果没有登录或者未联网则先保存到本地，等登录了再同步至网络；
• 需要声明storage权限，有chrome.storage.sync和chrome.storage.local这2种方式可供选择

// 读取数据，第一个参数是指定要读取的key以及设置默认值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
  console.log(items.color, items.age);
});
// 保存数据
chrome.storage.sync.set({color: 'blue'}, function() {
  console.log('保存成功！');
});

- chrome扩展的webRequest简介

通过webRequest系列API可以对HTTP请求进行任性地修改、定制，这里通过beforeRequest来简单演示一下它的冰山一角：

// web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {
  // 常见的type类型：main_frame,xmlhttprequest,image,media,script,stylesheet,sub_frame
  console.log(details.type)
  // cancel 表示取消本次请求
  // 阻塞图片请求
  //if(details.type == 'image') return {cancel: true};
}, {urls: ["<all_urls>"]}, ["blocking"]);