Chrome外掛入門

kear發表於2019-01-28
Chrome

起步

起步例子可參考

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" // 點選圖示後顯示的頁面
  }
}
複製程式碼

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

Chrome外掛入門

Chrome外掛入門

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

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

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

Chrome外掛入門

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

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

Chrome外掛入門

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

Chrome外掛入門

一開始沒有就不選

基礎

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

官網概要

概要

擴充程式是由:

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

互動介面

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

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

專案檔案

編寫完一個外掛的程式碼,通過打包擴充程式壓縮成以.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） 值得注意的是隱身模式下預設是不會執行外掛的，但是也可以

Chrome外掛入門

要確定視窗是否處於隱身模式，檢查相關的 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;  // 可以儲存資料
  }
}
複製程式碼

除錯

谷歌的外掛開發除錯工具,用來除錯彈出視窗的工具，已經在瀏覽器中內建。

  • 開啟chrome://extensions
  • 確保處於開發者模式
  • 右鍵點選右上角想要除錯的開發者工具
  • 選擇審查彈出的內容 剩下的跟除錯web一致

Chrome外掛入門

Chrome外掛入門

開發指南

剩下的就是去呼叫API了 指南

相關文章