chrome插件編寫

chrome瀏覽器

1. Chrome 瀏覽器追求的是全方位的快速體驗。它不僅能飛快地從桌面上啓動，而且能瞬間完成網頁加載，還能以閃電般的速度運行網絡應用。
2. Chrome 瀏覽器整潔且直觀。您可在同一位置進行搜索和導航，可隨意排列標籤頁，既快捷又輕鬆。
3. 您不必成爲安全專家即可放心地瀏覽網絡。Chrome 默認會爲用戶提供安全保護，並可供所有人輕鬆且安全地使用。

內置地址

所有內置地址列表：chrome://chrome-urls/
開發者常使用列表：

1. 開發者高級選項：chrome://flags/
2. dns緩存清除： chrome://net-internals/#dns
3. 擴展應用程序：chrome://extensions/
4. 偵測頁面[包括外接安卓設備]：chrome://inspect/#devices

比較全的的列表：

（1）chrome://accessibility/
可達性分析，默認是關閉的，點擊accessibility off後變成accessibility on|show accessibility tree，點擊show accessibility tree顯示分析樹
（2）chrome://appcache-internals/
應用程序緩存，顯示所有的應用程序緩存路徑列表
（3）chrome://apps/
當前chrome安裝的應用列表
（4）chrome://blob-internals/
當前內部的blob文件列表
（5）chrome://bookmarks/ 
書籤管理器
（6）chrome://cache/
當前緩存文件的url列表，點擊url可以看到對應的緩存文件內容，包括類型 編碼 過期時間等概要信息，以及文件內容等具體信息，以二進制方式顯示
（7）chrome://chrome/
chrome關於頁面，顯示當前chrome的版本信息。
（8）chrome://chrome-urls/
顯示chrome可用的僞url列表
（9）chrome://components/
顯示chrome的組件列表，可以點擊"檢測是否有更新"來檢測當前組件是否有新版本，如果有，可以直接下載更新。
（10）chrome://conflicts/
模塊衝突檢測，會列出當前已加載到主進程中的所有模塊，包括模塊的數量、簽名方，版本以及模塊所在的位置
（11）chrome://copresence/
Google共存信息列表，顯示共存信息，包括有效指令、傳輸的令牌、收到的令牌
（12）chrome://crashes/
顯示當前chrome的崩潰報告，需要啓用崩潰報告後纔會顯示。
https://support.google.com/chrome/answer/96817中說明了如何啓用崩潰報告。
設置後需要重啓chrome才能生效
（13）chrome://credits/
類似於演職員列表，是一份chrome使用的一些開源組件或工具的列表，包括各種工具的主頁和授權文件。
但第一行的“Accessibility Audit library, from Accessibility Developer Tools”的主頁居然鏈接的是一份未壓縮的js源碼，不知道是啥情況
（14）chrome://device-log/
設備日誌，chrome://device-log/?refresh=秒數 可以自動刷新
（15）chrome://devices/
顯示當前在網絡中註冊的設備，可以添加打印機到雲打印
（16）chrome://discards/
丟棄的標籤頁面，標籤頁面按照感興趣的程度由高到低排序。如果當前的物理內存超出運行內存後，最不感興趣的tab頁面可能被丟棄掉。
（17）chrome://dns/
如果當前顯示DNS pre-resolution and TCP pre-connection is disabled.
則打開設置，勾選“預提取資源，以便更快速地加載網頁”
然後刷新當前頁面就可以看到相關頁面預加載的分析數據列表了
（18）chrome://downloads/
下載內容頁面
（19）chrome://extensions/
擴展程序列表
（20）chrome://flags/
實驗性功能列表，可以在這裏啓用這些實驗性的功能
（21）chrome://flash/
顯示flash插件的版本信息，安裝位置及顯卡的一些具體信息，包括顯卡版本號，GPU
（22）chrome://gcm-internals/
GCM（Google Cloud Messaging ）內部構建信息，包括簽到、連接、註冊、發送、接收相關的日誌信息。
（23）chrome://gpu/
顯示當前的GPU信息，包括圖像功能的狀態（各種功能的硬件加速）、Gpu內存buffer的狀態
（24）chrome://help/
chrome關於頁面，與chrome://chrome/是同樣的效果
（25）chrome://histograms/
直方圖，柱狀圖，顯示了瀏覽器啓動到上一個頁面加載的狀態統計數據，重新加載可以獲取到當前頁面加載數據。
（26）chrome://history/
歷史記錄頁面，顯示所有的瀏覽記錄
（27）chrome://indexeddb-internals/
顯示chrome的內部數據庫的實例列表，包括所有的內部數據所在的路徑，最後修改時間及數據庫大小
（28）chrome://inspect/
檢測設備，頁面，擴展插件，應用程序等，在Pages標籤中顯示當前打開的所有tab頁面，點擊inspect直接跳轉到該頁面，並調起開發者工具。
（29）chrome://invalidations/
失效的調試信息，失效調試服務狀態，註冊的失效服務處理器等信息
（30）chrome://local-state/
本地狀態，顯示的是一個json格式的文件，包括了瀏覽器的很多狀態信息，插件的詳細信息
（31）chrome://media-internals/
當前的多媒體內部構建信息，如果當前使用的是瀏覽器內部的播放器而不是flash播放器的話，會在Players、Audio、Video Capture顯示播放文件的詳細信息，在Player中可以顯示當前播放的適配的詳細信息，包括音頻、視頻及播放器的內部狀態信息。
（32）chrome://memory
會自動跳轉到chrome://memory-redirect/，顯示瀏覽器佔用的總內存以及各個內部進程佔用的內存，包括各個Tab頁面佔用的物理內存和虛擬內存數，包括私有內存，共享內存及總內存
（33）chrome://memory-internals/
內存內部詳細信息，點擊Update後可以獲取到當前瀏覽內存的使用信息，包括一個json格式的數據。
下發有一個列表，可以顯示出所有進程所佔用的內存，以及V8引擎使用的和分配的內存。
（34）chrome://nacl/
NaCl的版本信息，包括NaCl的插件位置，版本信息
（35）chrome://net-internals
網絡內部構件的信息。包括代理信息、時間信息、DNS信息。其中的DNS可以顯示當前瀏覽器中緩存的DNS信息，包括過期時間
（36）chrome://newtab
打開一個新的標籤頁
（37）chrome://omnibox/
omnibox 的測試工具 ，omnibox API https://developer.chrome.com/extensions/omnibox
（38）chrome://password-manager-internals/
顯示捕獲到的密碼管理日誌。當這個頁面被關閉掉，則已有的記錄會被清除，並且不再捕獲。
（39）chrome://plugins/
顯示當前chrome中所使用的插件及版本信息，可以在該頁面點擊 停用 來停用某個插件
（40）chrome://policy/
顯示已設置的政策，默認是沒有的
（41）chrome://predictors/
顯示預測列表，包括自動完成動作的預取列表，也就是在地址欄輸入某些字母后，出現對應的完整地址的列表，還包括
（42）chrome://print/
瀏覽器打印頁面
（43）chrome://profiler/
分析器，可以按照不同的條件分組及排序，主要應該是用於分析chrome的各種進程的內部信息
（44）chrome://quota-internals/
存儲空間的配額信息，包括了三個tab頁面，Summary、Usage&Quota、Data
Summary標籤頁顯示的是一個磁盤總的空閒空間大小以及混合統計的一些數值
Usage&Quota 標籤頁顯示的是臨時的、持久化的和同步的數據庫中的具體數據項
Data標籤中點擊Dump按鈕可以生成一個json格式的文件，包含了前面兩個tab中的統計信息和分類信息。
（45）chrome://serviceworker-internals/
serviceworker的內部組件，可以勾選選擇框，進行調試
ServiceWorker的項目主頁： https://www.chromium.org/blink/serviceworker
介紹視頻：https://youtu.be/4uQMl7mFB6g
視頻中介紹者的的代碼：https://github.com/jakearchibald/simple-serviceworker-tutorial
w3c ServiceWorker的Demo：https://github.com/w3c-webmob/ServiceWorkersDemos
（46）chrome://settings/
chrome的設置頁面
（47）chrome://signin-internals/
當前chrome登錄者信息，包括賬戶狀態的各種信息
（48）chrome://suggestions/
推薦信息，也就是打開新的tab頁是默認顯示的推薦網站的縮略圖頁面的那些網站，包含了網站的信息和過期時間。
（49）chrome://sync-internals/
chrome賬戶同步信息，包含了多個tab頁面，首頁顯示的是同步的概要信息，包含同步相關的各種信息，包括上一次同步的時間，Token請求時間，接收時間等。
後面的tab按照同步的不同類型展示了不同信息，包括了同步的分類、事件等
（50）chrome://system/
系統的診斷數據，包括當前Chrome的版本信息、操作系統的版本信息、同步數據信息、數據壓縮代理是否啓用、內存使用概況信息、usb鍵盤檢測信息。
（51）chrome://terms/
chrome服務條款
（52）chrome://thumbnails/
頂級網站的url，分爲包含縮略圖的和未包含的、聚焦和未聚焦，估計也是用於在新開tab頁面做推薦時使用
（52）chrome://tracing/
可以在該頁面錄製chrome的跟蹤信息，也可以使用監控
（53）chrome://translate-internals
翻譯內部組件信息，此處包含了對於chrome翻譯的設置，包括用戶自定義的不需要自動翻譯的網站列表，可以在此處進行編輯，刪除
包括了當前翻譯引擎的設置，以及翻譯組件的日誌信息，日誌包括了檢測日誌、事件日誌和錯誤日誌，其中檢測日誌可以dump爲json格式的文件。
追蹤日誌會將打開該頁面後的瀏覽器訪問的網頁內容抓取出來，包括要翻譯的文字內容列表
（54）chrome://user-actions/
用戶操作列表，包括操作類型和發生時間。
（55）chrome://version/
顯示當前chrome的版本信息，包括版本號、JavaScript 引擎版本號，Flash插件版本號，用戶代理信息等
（56）chrome://view-http-cache/
顯示當前http緩存的url列表，點擊對應的url，可以打開緩存的文件，包含了文件的具體信息和二進制內容信息
（57）chrome://webrtc-internals/
webrtc內部組件信息。點擊Create Dump按鈕，可以下載當前的webrtc連接的數據信息和狀態信息快照數據
（58）chrome://webrtc-logs/
webrtc日誌信息

應用商店

擴展應用商店
包含了很多實用的擴展應用，

• adblock，廣告過濾開發人員小心你的本地調試代碼也被攔截了
• Momentum 新開頁面的美化
• Proxy SwitchyOmega 瀏覽器代理設置
• 二維碼小助手 當前頁面的二維碼生成器
• 捕捉網頁截圖 - FireShot 滾動全局頁面截圖

插件編寫

參考chrome擴展入門編一個入門的插件；

擴展由不同但關聯的組件構成。組件可以包括後臺腳本，內容腳本，選項頁面，UI元素和各種邏輯文件，根據擴展的具體功能加入需要的功能組件模塊，其中使用的技術棧就是HTML、JS、CSS，而最後的擴展文件就是壓縮的HTML，CSS，JavaScript，圖像和Web平臺中使用的其他文件得出的包，

擴展具有廣泛的功能。他們不僅可以修改用戶查看、交互的Web頁面內容，甚至可以擴展和更改瀏覽器本身的行爲【所以每個瀏覽器的擴展可能有點不一樣】，

一個常見的chrome擴展會包含一下的一些內容：

• manifest.json清單文件【類似配置文件，表明權限、版本、名稱、介紹、配置入口等信息】
• ico 【應用擴展商店和chrome瀏覽器上的工具欄展示的圖標】
• Background Script 【後臺腳本是擴展的事件處理程序;它包含對擴展重要的瀏覽器事件的偵聽器。它處於休眠狀態，直到事件被觸發然後執行腳本邏輯。有效的後臺腳本僅在需要時加載，在空閒時卸載】
• UI Elements 【UI界面就是正常的html頁面，主要是交互中的彈窗等】
• Content Script 【這個就是操作用戶打開的頁面】
• Options Page 【擴展可供用戶配置的頁面，用於修改擴展中的一些默認配置參數】

一個改變當前查看頁面的背景色的擴展插件實現

想要實現這個功能，很簡單就知道需要一下模塊：

• manifest.json 【配置】
• ico 【圖標】
• Background Script 【圖標按鈕點擊交互】
• UI Elements 【點擊圖標是展示的彈窗頁面】
• Options Page 【可供用戶選擇修改默認的背景色的頁面】
• Content Script 【修改用戶查看的頁面的背景色】

manifest.json

配置文件，權限、彈窗頁面、ico位置等信息。

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!222",
    "permissions": ["activeTab", "declarativeContent", "storage"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "options_page": "options.html",
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "fh-icon.png",
            "32": "fh-icon.png",
            "48": "fh-icon.png",
            "128": "fh-icon.png"
        }
    },
    "icons": {
        "16": "fh-icon.png",
        "32": "fh-icon.png",
        "48": "fh-icon.png",
        "128": "fh-icon.png"
    },
    "manifest_version": 2
}

background.js

後臺腳本，

chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#f00'}, function() {
      console.log("The color is green.");
    });
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([{
          conditions: [new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {},
          })
          ],
              actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
      });
});

popup.html

點擊ico的時候彈出的頁面，只有一個可被點擊的色塊按鈕。

<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <button id="changeColor"></button>
      <script src="popup.js"></script>
    </body>
  </html>

popup.js

彈出頁面的交互，點擊彈窗頁面中的按鈕時，需要設置當前展示頁面的背景色爲chrome.storage存儲的默認色值，

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
});

changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.executeScript(
            tabs[0].id,
            {code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
};

options.html

擴展應用頁面可以查看每個擴展的詳細介紹，這個頁面就是擴展程序的擴展程序選項頁面，用戶可以自由配置擴展程序需要的參數【前提是擴展應用開發把配置參數放在這個頁面供使用者修改了】。本案例是可供選擇的背景色值。

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

options.js

擴展程序選項頁面的交互腳本，在用戶選擇 options.html頁面中的顏色塊的時候，處理設置chrome.storage存儲的默認色值，

let page = document.getElementById('buttonDiv');
  const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
  function constructOptions(kButtonColors) {
    for (let item of kButtonColors) {
      let button = document.createElement('button');
      button.style.backgroundColor = item;
      button.addEventListener('click', function() {
        chrome.storage.sync.set({color: item}, function() {
          console.log('color is ' + item);
        })
      });
      page.appendChild(button);
    }
  }
  constructOptions(kButtonColors);

上面實例是chrome官方提供的基礎實例，還有很多API需要在使用的時候查看。不能科學上網的話，只能參考一下國內的其他瀏覽器的擴展開發，其實是類似的，基本都是借鑑的Chrome的方式。

參考：
chrome擴展入門
chrome擴展綜述