## 动态注入或执行JS 虽然在`background`和`popup`中无法直接访问页面DOM，但是可以通过`chrome.tabs.executeScript`来执行脚本，从而实现访问web页面的DOM（注意，这种方式也不能直接访问页面JS）。 示例`manifest.json`配置： ~~~ { "name": "动态JS注入演示", ... "permissions": [ "tabs", "http://*/*", "https://*/*" ], ... } ~~~ JS： ~~~ // 动态执行JS代码 chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'}); // 动态执行JS文件 chrome.tabs.executeScript(tabId, {file: 'some-script.js'}); ~~~ ## 动态注入CSS 示例`manifest.json`配置： ~~~ { "name": "动态CSS注入演示", ... "permissions": [ "tabs", "http://*/*", "https://*/*" ], ... } ~~~ JS代码： ~~~ // 动态执行CSS代码，TODO，这里有待验证 chrome.tabs.insertCSS(tabId, {code: 'xxx'}); // 动态执行CSS文件 chrome.tabs.insertCSS(tabId, {file: 'some-style.css'}); ~~~ ## 获取当前窗口ID ~~~ chrome.windows.getCurrent(function(currentWindow) { console.log('当前窗口ID：' + currentWindow.id); }); ~~~ ## 获取当前标签页ID 一般有2种方法： ~~~ // 获取当前选项卡ID function getCurrentTabId(callback) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if(callback) callback(tabs.length ? tabs[0].id: null); }); } ~~~ 获取当前选项卡id的另一种方法，大部分时候都类似，只有少部分时候会不一样（例如当窗口最小化时） ~~~ // 获取当前选项卡ID function getCurrentTabId2() { chrome.windows.getCurrent(function(currentWindow) { chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs) { if(callback) callback(tabs.length ? tabs[0].id: null); }); }); } ~~~ ## 本地存储 本地存储建议用`chrome.storage`而不是普通的`localStorage`，区别有好几点，个人认为最重要的2点区别是： * `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('保存成功！'); }); ~~~ ## webRequest 通过webRequest系列API可以对HTTP请求进行任性地修改、定制，这里通过`beforeRequest`来简单演示一下它的冰山一角： ~~~ //manifest.json { // 权限申请 "permissions": [ "webRequest", // web请求 "webRequestBlocking", // 阻塞式web请求 "storage", // 插件本地存储 "http://*/*", // 可以通过executeScript或者insertCSS访问的网站 "https://*/*" // 可以通过executeScript或者insertCSS访问的网站 ], } // background.js // 是否显示图片 var showImage; chrome.storage.sync.get({showImage: true}, function(items) { showImage = items.showImage; }); // web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking chrome.webRequest.onBeforeRequest.addListener(details => { // cancel 表示取消本次请求 if(!showImage && details.type == 'image') return {cancel: true}; // 简单的音视频检测 // 大部分网站视频的type并不是media，且视频做了防下载处理，所以这里仅仅是为了演示效果，无实际意义 if(details.type == 'media') { chrome.notifications.create(null, { type: 'basic', iconUrl: 'img/icon.png', title: '检测到音视频', message: '音视频地址：' + details.url, }); } }, {urls: ["<all_urls>"]}, ["blocking"]); ~~~ ## 国际化 插件根目录新建一个名为`_locales`的文件夹，再在下面新建一些语言的文件夹，如`en`、`zh_CN`、`zh_TW`，然后再在每个文件夹放入一个`messages.json`，同时必须在清单文件中设置`default_locale`。 `_locales\en\messages.json`内容： ~~~ { "pluginDesc": {"message": "A simple chrome extension demo"}, "helloWorld": {"message": "Hello World!"} } ~~~ `_locales\zh_CN\messages.json`内容： ~~~ { "pluginDesc": {"message": "一个简单的Chrome插件demo"}, "helloWorld": {"message": "你好啊，世界！"} } ~~~ 在`manifest.json`和`CSS`文件中通过`__MSG_messagename__`引入，如： ~~~ { "description": "__MSG_pluginDesc__", // 默认语言 "default_locale": "zh_CN", } ~~~ JS中则直接`chrome.i18n.getMessage("helloWorld")`。 测试时，通过给chrome建立一个不同的快捷方式`chrome.exe --lang=en`来切换语言，如：