Chrome外掛入門

kear發表於2019-01-28

起步

git clone https://github.com/zzc5464/chrome-tool.git複製程式碼

官網入門-需翻牆描述檔案 manifest

{ 
 "manifest_version": 2, // manifest的版本，1已經棄用，寫死  "name": "One-click Kittens", // 專案名稱  "description": "This extension demonstrates a browser action with kittens.",  "version": "1.0",  // 該外掛會生效於哪個網址  "permissions": ["http://*.google.com/", "https://*.google.com/"],  "browser_action": { 
// 外掛在瀏覽器上行為的描述    "default_icon": "icon.png", // 右上角圖示配置    "default_popup": "popup.html" // 點選圖示後顯示的頁面  
  }
  }複製程式碼

現在一個簡單的外掛就寫好了，嘗試把它放到瀏覽器去。

如果沒問題會直接載入好了。

點選圖示可以看到demo外掛的popup.html 已展示出來

可以發現擴充外掛頁面有三個按鈕: 載入、打包、更新。

一般可以認為: 載入已解壓的擴充程式為開發時測試程式碼用，使用方式同上。

打包擴充程式為開發完成要釋出時使用

選擇要打包檔案的路徑，私鑰檔案為打包完檔案後一起生成的 .pem 檔案

一開始沒有就不選

基礎

這部分主要是過一下瀏覽器外掛都可以做哪些事情

官網概要

概要

擴充程式是由:

html
css
js 可用API參考
谷歌提供的瀏覽器API(書籤、標籤頁)組合而成

互動介面

外掛的使用者介面,除了在起步中描述之外(瀏覽器按鈕,這也是最常見的)。還可以是頁面按鈕，如圖:

還有一些其他的互動方式: 右鍵選單等具體可參考開發者指南

專案檔案

編寫完一個外掛的程式碼,通過打包擴充程式壓縮成以.crx結尾的zip也可以通過谷歌的託管平臺釋出程式碼,會自動壓縮成.crx (不過要付錢~)一個外掛所需檔案要求如下

一個清單檔案
一個或多個 HTML 檔案（除非擴充套件程式是一個主題背景）
可選：一個或多個 JavaScript 檔案
可選：您的擴充套件程式需要的任何其他檔案，例如圖片除了要求的檔案外，你可以在任意目錄放置任意檔案。

關於清單檔案,瞭解更多內容

外掛專案的構成

在外掛中根據幾個關鍵檔案進行定義

background.html 外掛的後臺。在外掛生效後，會根據你使用的方式事件頁面 or 後臺網頁執行後臺指令碼
popup.html 點選圖片彈出的使用者互動頁面
contentscript.js 頁面指令碼

chrome.* API

除了能使用web中的api之外，還可以用谷歌專門提供的api大部分方法都是非同步的，在非同步函式的最後一個引數中寫一個回撥即可獲取執行結果。文件

頁面通訊

能讓同一個外掛生效的頁面之間，都可以相互通訊,直接呼叫chrome.extension。比如在外掛除錯工具中 chrome-extension://外掛ID/頁面

location.href// "chrome-extension://pcbcpgmalddcijhdchfojedmhghopjhm/popup.html"複製程式碼

資料儲存和隱身模式

直接使用使用 storage API、HTML5 網頁儲存 API（例如 localStorage）值得注意的是隱身模式下預設是不會執行外掛的，但是也可以

要確定視窗是否處於隱身模式，檢查相關的 tabs.Tab 或 windows.Window 物件的 icognito 屬性。

function saveTabData(tab, data) { 
 if (tab.incognito) { 
   chrome.runtime.getBackgroundPage(function(bgPage) { 
     bgPage[tab.url] = data;
      // 僅在記憶體中保留資料    
  });
  
  } else { 
   localStorage[tab.url] = data;
  // 可以儲存資料  
  }
  }複製程式碼