## 動態注入或執行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`來切換語言，如：