chrome extension开发

一、前言

Chrome插件是一个用Web技术开发，可以增强浏览器功能的软件。它其实和一个普通web应用一样都是由html+css+js经过zip打包组成的，插件可以使用Chrome提供的浏览器API。

在chrome浏览器的【扩展程序】里，可以打开开发者模式，加载一个文件夹来进行插件的开发。可以监听本地开发的代码，实时编译，改动后再刷新加载新的插件来调试。

对于调试完成的插件，可以打包成.crx包文件，去发布到chrome商店。

二、核心介绍

一个插件的核心是manifest.json清单文件，提供有关扩展程序的各种信息。其中，manifest_version、name、version3个是必不可少的。

{
    "manifest_version": 2,
    "description": "简单的Chrome扩展demo",
    "version": "1.0.0",
    "name": "chrome_helper",
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "这是一个示例Chrome插件",
        "default_icon": "images/icon-34.png"
    },
    "background": {
        "page": "background.html"
    },
    "devtools_page": "devtools.html",
    "icons": {
        "128": "images/icon-34.png"
    },
    "permissions": [
        "",
        "storage",
        "webRequest",
        "webRequestBlocking"
    ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "content_scripts": [
        {
            "matches": [""],
            "run_at": "document_start",
            "js": ["dist/content.bundle.js"]
        }
    ]
}

content_scripts
background
popup

content_scripts

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

向页面注入脚本。content-scripts和原始页面共享DOM，但是不共享JS。
也就是说content_scripts注入的脚本可以拿到DOM节点做分析，但是没办法获取到别的js下的变量。

权限：content-scripts不能访问绝大部分chrome.xxx.api。

可以访问：

chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage

Q：那如果我们想注入js脚本后，同时可以获取到页面其他js暴露出来的变量能不能实现呢？
A：能！

inject脚本

如要访问页面JS（比如想要直接用其他js里暴露出来的变量），可以通过content_scripts把我们要执行的脚本注入到页面中。

具体的实现方式就是在content_scripts里把injetc.js动态注入到document里。

function injectCustomJs() {
    const jsPath = 'dist/inject.bundle.js';
    var temp = document.createElement('script');
    temp.setAttribute('type', 'text/javascript');
    // 获得的地址类似：chrome-extension://asdasdadavdfscgfdhfgh/js/inject.js
    temp.src = chrome.extension.getURL(jsPath);
    temp.onload = function() {
        // 不想在Element里暴露js的话可以在onload事件里再remove掉这个script节点
        console.log('inject');
    };
    document.head.appendChild(temp);
}

background

后台进程脚本。在manifest.json里通过background引入background.html，可以在html里再引入js资源。

打开方式：在扩展程序里打开。

图片

特性：

生命周期长，从浏览器页面打开时候开始加载，关闭时终止。
权限大，可以调用几乎可以调用所有的Chrome扩展API（除了devtools）。
无跨域限制，可以跨域访问任何网站而无需要求对方设置CORS。

Tip: chrome-extension://id/xx.html这种方式打开的网页都可以无限制跨域。

background因为无跨域又可以调用所有的api。可以实现dom操作和api拦截等。
通过chrome.webRequest来实现api篡改和拦截。

// 示例。拦截并所有发给baidu.com的请求
chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        // console.log('onBeforeRequest', details);
      return {cancel: details.url.indexOf("://www.baidu.com/") !== -1};
    },
    {urls: [""]},
    ["blocking", "extraHeaders"]
);

注意：
调用webRequest需要在manifest.json先声明webRequest权限，及要拦截的url过滤。
我这里先放过去了所有的url，直接写的""。

附（webRequest的API）：

图片

popup

插件弹窗。配置在manifest.json里的browser_action里，可以配置一个弹窗网页、title、和插件的icon。

特性：

生命周期短。这点和background不同，popup在鼠标点击icon打开popup弹窗的时候开始生命周期，在关闭popup页面时候结束。
权限和background非常类似，调用的api一样。
popup中可以直接通过chrome.extension.getBackgroundPage()获取background的js，也可以直接访问background的DOM。

popup页面的打开是在插件icon上右击选择审查弹出内容。

图片

三、数据和通信

storage

chrome.storage可以在插件里的数据存储。

storage分位sync和local两个维度。sync是同步到插件的，可以跟随chrome账户做同步，local顾名思义就是存储在chrome本地。

message

content_scripts、background、popup三者可以通过chrome.extension.onMessage来通信。

chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
    console.log('收到消息')
    sendResponse('发送返回值');
});

chrome.tabs.query可以拿到当前激活态的tab页面。

chrome.extension.getBackgroundPage可以返回当前扩展在后台运脚本的window对。

四、注意事项

开发调试过程中，因为加载的目标文件夹是固定的。可以监听文件改动，实时编译。
每次修改代码后，需要在扩展程序页面，重新刷新加载。如果有报错，可以在加载界面看到。

图片

参考：

https://developer.chrome.com/docs/extensions/reference/webRequest/
http://www.kkh86.com/it/chrome-extension-doc/extensions/webRequest.html