參考博客[https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html) Google Chrome擴展最常用的可視界面為如下兩種形式（兩者是互斥的）： 它們的UI部分有圖標（icon）、提示（tooltip）徽章（badge）、彈出框（popup）組成 * ## **<span style="color:red">browser actions</span>** 這樣的Google Chrome擴展可以適用于**任何**頁面。圖標往往位于瀏覽器地址欄**外**右側。點擊圖標將彈出窗口。  >[info]這個圖標與瀏覽器相關，只要安裝了該Chrome擴展的瀏覽器，就會顯示該圖標。 鼠標懸浮到圖標上會給出提示信息，鼠標點擊圖標會彈出popup頁面。圖標還可以根據條件設置不同的徽章(Badge)，提示用戶不同的條件狀態 啟用他必須在manifest.json文件中注冊如下： ``` { ... "browser_action": { "default_icon": "icons/icon.png",//圖標（icon）也可以調用setIcon()方法 // 圖標懸停時的標題，可選 "default_title": "這是一個示例Chrome插件",//對應提示（tooltip）還可以調用`setTitle()`方法設置此方法 //單擊圖標打開popup，焦點離開又立即關閉，所以popup頁面的生命周期一般很短，需要長時間運行的代碼千萬不要寫在popup里面 "default_popup": "popup.html"//彈出框（popup） //徽章（badge）badge無法通過配置文件來指定，必須通過代碼實現，設置badge文字和顏色可以分別使用`setBadgeText()`和`setBadgeBackgroundColor()` }, ... } ``` 設置badge ``` chrome.browserAction.setBadgeText({text: 'new'}); chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]}); ``` 效果  * ## **<span style="color:red">page actions</span>** 這樣的Google Chrome擴展只能作用于**某一**頁面，當打開該頁面時觸發該Google Chrome擴展，關閉頁面則Google Chrome擴展也隨之消失。圖標往往位于瀏覽器地址欄**內**右端。還有個不同點是沒有點亮時是灰色的，點亮了才是彩色的（一般通過background 里的事件api控制） ``` chrome.pageAction.show(tabId); //顯示圖標； chrome.pageAction.hide(tabId); //隱藏圖標； ``` 示例(只有打開百度才顯示圖標)： ``` // manifest.json { "page_action": { "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" }, "permissions": ["declarativeContent"] } // background.js chrome.runtime.onInstalled.addListener(function(){ chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){ chrome.declarativeContent.onPageChanged.addRules([ { conditions: [ // 只有打開百度才顯示pageAction new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}}) ], actions: [new chrome.declarativeContent.ShowPageAction()] } ]); }); }); ```  ## **此外，Google Chrome擴展還支持其他的可視界面：** * ## **<span style="color:red">context menu</span>**，右鍵菜單 >通過開發Chrome插件可以自定義瀏覽器的右鍵菜單，主要是通過`chrome.contextMenus`API實現，右鍵菜單可以出現在不同的上下文，比如普通頁面、選中的文字、圖片、鏈接，等等，如果有同一個插件里面定義了多個菜單，Chrome會自動組合放到以插件名字命名的二級菜單里，如下：  ### 最簡單的右鍵菜單示例 ~~~ // manifest.json {"permissions": ["contextMenus"]} // background.js chrome.contextMenus.create({ title: "測試右鍵菜單", onclick: function(){alert('您點擊了右鍵菜單！');} }); ~~~  ### 添加右鍵百度搜索 ~~~ // manifest.json {"permissions": ["contextMenus"， "tabs"]} // background.js chrome.contextMenus.create({ title: '使用度娘搜索：%s', // %s表示選中的文字 contexts: ['selection'], // 只有當選中文字時才會出現此右鍵菜單 onclick: function(params) { // 注意不能使用location.href，因為location是屬于background的window對象 chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)}); } }); ~~~  **[contextMenus語法說明](https://developer.chrome.com/extensions/contextMenus)** ``` chrome.contextMenus.create({ type: 'normal'， // 類型，可選：["normal", "checkbox", "radio", "separator"]，默認 normal title: '菜單的名字', // 顯示的文字，除非為“separator”類型否則此參數必需，如果類型為“selection”，可以使用%s顯示選定的文本 contexts: ['page'], // 上下文環境，可選：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默認page onclick: function(){}, // 單擊時觸發的方法 parentId: 1, // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成為父菜單項的子菜單 documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些頁面顯示此右鍵菜單 }); // 刪除某一個菜單項 chrome.contextMenus.remove(menuItemId)； // 刪除所有自定義右鍵菜單 chrome.contextMenus.removeAll(); // 更新某一個菜單項 chrome.contextMenus.update(menuItemId, updateProperties); ``` * ## **<span style="color:red">options 頁面</span>** Google Chrome擴展可以有一個options 頁面，支持用戶定制Chrome擴展的運行參數。 * ## **<span style="color:red">override(覆蓋特定頁面)</span>** Google Chrome擴展中的override頁面可以替換瀏覽器中打開的默認頁面，如標簽管理器頁面chrome://bookmarks、瀏覽歷史記錄頁面chrome://history或新建Tab頁面chrome://newtab。不過，一個Google Chrome擴展只能替換一個默認頁面。 代碼（注意，一個插件只能替代一個默認頁，以下僅為演示）： ~~~ "chrome_url_overrides": { "newtab": "newtab.html", "history": "history.html", "bookmarks": "bookmarks.html" } ~~~ * 通過**chrome.tabs.create()** 或**window.open()** 打開的頁面 出了上面幾種可見的展示形式還有下面三種展示形式 * ## **<span style="color:red">[devtools 開發控制臺](https://developer.chrome.com/extensions/devtools)</span>** >[info]自定義一個和多個和`Elements`、`Console`、`Sources`等同級別的面板； 自定義側邊欄(sidebar)，目前只能自定義`Elements`面板的側邊欄； devtools頁面的生命周期和devtools窗口是一致的(F12窗口關閉，頁面也隨著關閉)。devtools頁面可以訪問一組特有的`DevTools API`以及有限的擴展API，這組特有的`DevTools API`只有devtools頁面才可以訪問，background都無權訪問，這些API包括： * `chrome.devtools.panels`：面板相關； * `chrome.devtools.inspectedWindow`：獲取被審查窗口的有關信息； * `chrome.devtools.network`：獲取有關網絡請求的信息； 大部分擴展API都無法直接被`DevTools`頁面調用，但它可以像`content-script`一樣直接調用`chrome.extension`和`chrome.runtime`API，同時它也可以像`content-script`一樣使用Message交互的方式與background頁面進行通信。 ### **實例：創建一個devtools擴展** 首先，要針對開發者工具開發插件，需要在清單文件聲明如下： ~~~ { // 只能指向一個HTML文件，不能是JS文件 "devtools_page": "devtools.html" } ~~~ 這個`devtools.html`里面一般什么都沒有，就引入一個js： ~~~ <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="js/devtools.js"></script> </body> </html> ~~~ 可以看出來，其實真正代碼是`devtools.js`，html文件是“多余”的，所以這里覺得有點坑，`devtools_page`干嘛不允許直接指定JS呢？ 再來看devtools.js的代碼： ~~~ // 創建自定義面板，同一個插件可以創建多個自定義面板 // 在`Panel.html`添加一個面板，幾個參數依次為：panel標題、圖標（其實設置了也沒地方顯示）、要加載的頁面、加載成功后的回調 chrome.devtools.panels.create('MyPanel','icons/3601643092096124127.PNG','theme/mypanel.html', function(panel) { console.log('自定義面板創建成功！'); // 注意這個log一般看不到 }); // 創建一個自定義側邊欄 chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar) { // sidebar.setPage('../sidebar.html'); // 指定加載某個頁面 sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通過表達式來指定 //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接設置顯示某個對象 }); ~~~ mypanel.html ``` <!DOCTYPE html> <html> <head></head> <body> <div>這是一個自定義面板</div> </body> </html> ``` setPage時的效果：   ## **更近一步** **mypanel.html** ``` <!DOCTYPE html> <html> <head> <title>新標簽頁</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html,body{height: 100%;} body{font-family: 'Microsoft Yahei';margin:0;padding:0;} .center { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #CCC; } .content { position: absolute; left: 20px; top: 10px; } </style> </head> <body> <div class="center"><p>這是一個自定義Chrome開發者工具頁面</p></div> <div class="content"> <div><a href="javascript:;" id="check_jquery">檢測當前頁面jQuery</a></div> <div><a href="javascript:;" id="open_resource">查看當前頁面HTML代碼的第20行</a></div> <div><a href="javascript:;" id="test_inspect">審查當前頁面第一張圖片</a></div> <div><a href="javascript:;" id="get_all_resources">獲取當前頁面所有Resources</a></div> </div> <script type="text/javascript" src="js/mypanel.js"></script> </body> </html> ``` **mypanel.js** ``` // 檢測jQuery document.getElementById('check_jquery').addEventListener('click', function() { // 訪問被檢查的頁面DOM需要使用inspectedWindow // 簡單例子：檢測被檢查頁面是否使用了jQuery chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException) { var html = ''; if (isException) html = '當前頁面沒有使用jQuery。'; else html = '當前頁面使用了jQuery，版本為：'+result; alert(html); }); }); // 打開某個資源 document.getElementById('open_resource').addEventListener('click', function() { chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException) { chrome.devtools.panels.openResource(result, 20, function() { console.log('資源打開成功！'); }); }); }); // 審查元素 document.getElementById('test_inspect').addEventListener('click', function() { chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){}); }); // 獲取所有資源 document.getElementById('get_all_resources').addEventListener('click', function() { chrome.devtools.inspectedWindow.getResources(function(resources) { alert(JSON.stringify(resources)); }); }); ```  ### 調試技巧 修改了devtools頁面的代碼時，需要先在[chrome://extensions](chrome://extensions/)頁面按下`Ctrl+R`重新加載插件，然后關閉再打開開發者工具即可，無需刷新頁面（而且只刷新頁面不刷新開發者工具的話是不會生效的）。 由于devtools本身就是開發者工具頁面，所以幾乎沒有方法可以直接調試它，直接用`chrome-extension://extid/devtools.html"`的方式打開頁面肯定報錯，因為不支持相關特殊API，只能先自己寫一些方法屏蔽這些錯誤，調試通了再放開。 * ## **omnibox** `omnibox`是向用戶提供搜索建議的一種方式 首先，配置文件如下： ~~~ { // 向地址欄注冊一個關鍵字以提供搜索建議，只能設置一個關鍵字 "omnibox": { "keyword" : "go" }, } ~~~ 然后`background.js`中注冊監聽事件： ~~~ // omnibox 演示 chrome.omnibox.onInputChanged.addListener((text, suggest) => { console.log('inputChanged: ' + text); if(!text) return; if(text == '美女') { suggest([ {content: '中國' + text, description: '你要找“中國美女”嗎？'}, {content: '日本' + text, description: '你要找“日本美女”嗎？'}, {content: '泰國' + text, description: '你要找“泰國美女或人妖”嗎？'}, {content: '韓國' + text, description: '你要找“韓國美女”嗎？'} ]); } else if(text == '微博') { suggest([ {content: '新浪' + text, description: '新浪' + text}, {content: '騰訊' + text, description: '騰訊' + text}, {content: '搜狐' + text, description: '搜索' + text}, ]); } else { suggest([ {content: '百度搜索 ' + text, description: '百度搜索 ' + text}, {content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text}, ]); } }); // 當用戶接收關鍵字建議時觸發 chrome.omnibox.onInputEntered.addListener((text) => { console.log('inputEntered: ' + text); if(!text) return; var href = ''; if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text; else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', ''); else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', ''); else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text; openUrlCurrentTab(href); }); // 獲取當前選項卡ID function getCurrentTabId(callback) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if(callback) callback(tabs.length ? tabs[0].id: null); }); } // 當前標簽打開某個鏈接 function openUrlCurrentTab(url) { getCurrentTabId(tabId => { chrome.tabs.update(tabId, {url: url}); }) } ~~~  * ## **notification** Chrome提供了一個`chrome.notifications`API以便插件推送桌面通知，暫未找到`chrome.notifications`和HTML5自帶的`Notification`的顯著區別及優勢。 在后臺JS中，無論是使用`chrome.notifications`還是`Notification`都不需要申請權限（HTML5方式需要申請權限），直接使用即可。 代碼： ~~~ chrome.notifications.create(null, { type: 'basic', iconUrl: 'img/icon.png', title: '這是標題', message: '您剛才點擊了自定義右鍵菜單！' }); ~~~