寫chrome外掛前必須要知道的

Eric_zhang發表於2019-03-09

介紹

瀏覽器外掛本質上就是利用前端的html\css\javascript等技術，借用瀏覽器對外提供的API，實現各種不同的功能

外掛組成

首先先看一下我們要開發的外掛的各個檔案組成

manifest.json :我們在專案的根檔案必須要有一個命名為manifest.json的檔案，它是整個外掛的功能入口，用來告訴瀏覽器外掛的一些基本資訊，及需要載入和執行的資原始檔等，裡面包含一些必填項：

name 外掛的名字
version 外掛版本
manifest_version manifest的版本
description 外掛的描述(選填)

{
    "name": "hello extension",
    "description": "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
}
複製程式碼

icons 在擴充套件程式管理介面，呈現的圖示，可以設定不同的尺寸的選項，用來適配不同的場景

{
    "icons": {
        "16": "images/extension_icon16.png",
        "32": "images/extension_icon32.png",
        "48": "images/extension_icon48.png",
        "128": "images/extension_icon128.png"
      },
}
複製程式碼

background 在擴充套件程式被開啟時，會首先觸發執行background 選項中指定的js資源，並且一直存在於擴充套件程式的整個生命週期，直到擴充套件程式被關閉或者刪除，background一直被用來做任務和狀態的控制管理工作

// scripts 子選項指定了需要執行的js檔案的路徑及檔名
{
    "background": {
        "scripts":["background.js"],
        "persistent": false
    }
}
複製程式碼

background.js 通常最外層使用監聽事件chrome.runtime.onInstalled.addListener(()=>{})初始化外掛，監聽外掛安裝成功後，會觸發對應的邏輯開始工作

permissions 屬性值為一個陣列，申請chrome API的許可權，只有在這個選項中申請了才能使用（比如通過 XMLHttpRequest 跨域請求資料、訪問瀏覽器選項卡（tabs）、獲取當前活動選項卡（activeTab）、瀏覽器通知（notifications）、設定外掛啟用規則（declarativeContent）、類似localStorage的儲存（storage）等）

{
    "permissions": [
        "http://xxx.com/api"
        "tabs",
        "activeTab",
        "notifications",
        "declarativeContent",
        "storage"
    ],
}
複製程式碼

與使用者實現UI互動的功能主要有兩個：browser_action、page_action 兩者選擇其中一個

browser_action 提供的功能面向所有網站，外掛圖示一直是啟用的狀態

{
    "browser_action": {
      "default_popup": "popup.html"        // 指定click外掛圖示時，展示的頁面
      "default_icon": "images/icon.png", // 指定瀏覽器工具欄展示的外掛的圖示 
      "default_title": "display tooltip" // 當滑鼠懸浮在外掛圖片上方時，展示的文字，叫tooltip；如果沒有這個配置選項，則懸浮時顯示menifest.json中的name選項值
  }
}
複製程式碼

page_action 只針對對應目標網站提供的功能，外掛會在background頁設定啟用外掛的規則，只有滿足條件的網頁的外掛才是啟用的，其他網站外掛是不可用的，外掛的icon是灰的

在background script裡，chrome.runtime.onInstalled.addListener(()=>{})初始化中使用chrome.declarativeContent定義外掛被啟用的規則

{
    "page_action":{
        "default_popup": "popup.html", // 指定click外掛圖示時，展示的頁面
        "default_icon": "hello_extension.png" // 指定瀏覽器工具欄展示的外掛的圖示 
        "default_title": "display tooltip"
},
}
複製程式碼

    chrome.runtime.onInstalled.addListener(function() {
    // Replace all rules ...
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
        {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
            new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' }, //url的內容中包含字母g的，外掛才會被啟用
            })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
        }
    ]);
    });
});
複製程式碼

popup.html

popup.html 是使用browser_action或者page_action 指定的default_popup選項，表示點選外掛圖示會觸發的html資源，其與普通的html頁面的區別就是不能使用內聯script，其他都一樣 it can contain links to stylesheets and script tags, but does not allow inline JavaScript.

Content Script 對當前web頁面注入擴充套件程式程式碼，也就是在當前web頁面的上下文環境中，可以訪問頁面的DOM資訊並且修改DOM，具有操作Chrome API的許可權，並且可以把資訊傳遞給父級外掛

content script工作在一個獨立的空間，它使得不會訪問和呼叫web page或者其他content script中定義的變數和函式，兩者唯一共享的是DOM
Content Script與Page action 或Browser action通訊的方式是通過傳遞Message的方式，正確的機制應該是：
- Page action 或Browser action 中的js使用chrome.tabs.sendMessage()釋出一個請求資訊，傳遞出去當前的tab頁id及其他資訊
- 注意：從Page action 或Browser action釋出訊息到Content Script必須用chrome.tabs.sendMessage()，從Content Script釋出簡單的資訊到Page action 或Browser action 可以使用chrome.runtime.sendMessage()
```
 chrome.tabs.sendMessage(
     tabs[0].id, //當前啟用的tab頁id
     {greeting: "hello"}, //需要傳遞的資訊
     function(response) { //用來接收反饋的回撥函式
     console.log(response.farewell);
 });
複製程式碼
```
- Content Script完成初始化，設定chrome.runtime.onMessage().addListener()監聽事件，等待另一側請求資訊的釋出
```
chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse) {
     console.log(sender.tab ?
                 "from a content script:" + sender.tab.url :
                 "from the extension");
     if (request.greeting == "hello")
     sendResponse({farewell: "goodbye"});
 });
複製程式碼
```
- Content Script將資訊通過Message釋出訂閱的方式，釋出出去
- Page action 或Browser action 中的jschrome.tabs.sendMessage()最後一個引數是一個回撥函式，用來接收另一側反饋回來的資料，最後同步到UI上

  chrome.tabs.sendMessage()
複製程式碼

Content script有兩種注入方式：程式設計式動態注入、宣告式注入
程式設計式動態注入：獲取activeTab許可權後，使用chrome.tabs.executeScript()來注入js程式碼片段，使用chrome.tabs.insertCSS()注入css程式碼片段
```
 //manifest.json
 {
   "name": "My extension",
   ...
   "permissions": [
     "activeTab"
   ],
 }
複製程式碼
```


在Page action 或Browser action 中的js中實行程式設計式動態注入content script，其訪問和更改的就是web page上的DOM屬性

```js
chrome.runtime.onMessage.addListener(
  function(message, callback) {
    if (message == “changeColor”){
      chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor="orange"'
      });
    }
 });
 // 你也可以注入一個檔案
 chrome.runtime.onMessage.addListener(
  function(message, callback) {
    if (message == “runContentScript”){
      chrome.tabs.executeScript({
        file: 'contentScript.js'
      });
    }
 });
複製程式碼

宣告式注入，在manifest.json中使用content_scripts來定義

  {
      "name": "My extension",
      ...
      "content_scripts": [
      {
          "matches": ["http://*.nytimes.com/*"],
          "css": ["myStyles.css"],
          "js": ["contentScript.js"]
      }
      ],
      ...
  }
複製程式碼

matches：必填陣列，用來匹配注入Content Script的頁面地址。可以使用萬用字元來指代：'*'指代任意長度字元；'?'指代單個字元
css：選填陣列，在頁面的任何DOM建立和展示之前，按照陣列中定義的順序，依次注入
js：選填陣列，按照陣列中定義的順序，依次注入
run_at：Content Script注入的時機
- 如果是document_start, 檔案將在所有CSS載入完畢，但是沒有建立DOM並且沒有執行任何指令碼的時候注入
- 如果是document_end，則檔案將在建立完DOM之後，但還沒有載入類似於圖片或frame等的子資源前立刻注入
- 如果是document_idle，瀏覽器會在document_end和發出window.onload事件之間的某個時機注入。具體的時機取決與文件載入的複雜度，為加快頁面載入而優化

{
    "content_scripts" : [{
      "matches" : ["*://*/*"],
      "js" : ["content.js", "jquery.js"],
      "css" : ["style.css"],
      "run_at" : "document_end"
  }],
}
複製程式碼

options_page 設定外掛的選項頁面，配置了此選項後，在外掛上滑鼠右鍵時，會有一個‘選項’按鈕，點選後會進入options_page對應的頁面
```
{
    "options_page":"options.html"
}
複製程式碼
```
chrome_url_overrides 設定可替換的chrome預設頁面
- newtab：新建標籤時開啟的頁面
- bookmarks：書籤頁面
- history：歷史記錄
```
{
    "chrome_url_overrides":{
      "newtab": "newTab.html"
  }
}
複製程式碼
```

常用到的Chrome API

chrome.tabs

chrome.tabs.create(object createProperties, function callback) 建立新的標籤。注：無需請求manifest的標籤許可權，此方法也可以被使用。 Parameters createProperties ( object )
- windowId ( optional integer ) 建立新標籤的目標視窗。預設是當前視窗。
- index ( optional integer ) 標籤在視窗中的位置。值在零至標籤數量之間。
- url ( optional string ) 標籤導航的初始頁面。完整的URL 必須包含一個字首 (如 'www.google.com', 不能寫為 'www.google.com')。相對 URL則與擴充套件所在的頁面相對，預設值為新標籤頁面。
- selected ( optional boolean ) 標籤是否成為選中標籤。預設為true。
- pinned ( optional boolean ) 標籤是否被固定。預設值為false。
- callback ( optional function )
Callback function 回撥引數應該如下定義：

function(Tab tab) {...}; tab ( Tab ) 所建立的標籤的細節，包含新標籤的ID。
chrome.tabs.executeScript(integer tabId, object details, function callback) 向頁面注入JavaScript 指令碼執行 Parameters
1. tabId ( optional integer ) 執行指令碼的標籤ID；預設為當前視窗所選中的標籤。
2. details ( object ) 要執行的指令碼內容，可選code或者file，但不能同時選兩者。
  - code ( optional string ) 要執行的指令碼程式碼。
  - file ( optional string ) 要執行的指令碼檔案。
  - allFrames ( optional boolean ) true的時候，給所有frame執行指令碼。預設為false，只給頂級frame執行指令碼。
3. callback ( optional function ) 所有指令碼執行後會被呼叫的回撥。
chrome.tabs.query(object queryInfo, function callback) 獲取經過特定過濾條件篩選的標籤頁資訊，如果沒有特定過濾條件則是獲取所有標籤頁資訊
1. queryInfo 為特定的屬性，用來對標籤頁進行過濾。常用的屬性有：（所有屬性均為boolean值）
  - active 標籤在他們的視窗中是否是啟用狀態
  - currentWindow 標籤是否在當前視窗
```
    chrome.tabs.query({
        active:true,
        currentWindow:true
    },function(tabs){
        //...
    })
複製程式碼
```
2. callback 是獲取到特定標籤頁資訊後的回撥函式，引數為標籤的資訊

chrome.contextMenus 當前頁面，選中內容後右鍵展示的內容

在manifest.json中設定許可權{"permissions": ["contextMenus", "storage"]}

放在background.js中，初始化之後的回撥函式中，使用chrome.contextMenus.create({})建立內容目錄

chrome.runtime.onInstalled.addListener(function() {
 //...
     chrome.contextMenus.create({
         "id": "sampleContextMenu",
         "title": "Sample Context Menu",
         "contexts": ["selection"]
     });
 });
複製程式碼

外掛安裝

進入擴充套件程式管理介面 chrome://extensions
開啟'開發者模式'
可以選擇'載入已解壓的擴充套件程式'，將本地開發目錄上傳上去即可
可以使用'打包擴充套件程式'，生成.ctx字尾的擴充套件程式，就可以釋出到google應用市場了

外掛除錯

注意：

每次重新整理頁面，都會執行browser_action或page_action 指定的popup.html資源
background指定的js資源只在外掛安裝時執行，之後就一直存在程式中，不會重複執行

除錯步驟

在瀏覽器工具欄右鍵外掛圖示
點選'審查彈出內容'，進入控制檯
切換到Source欄，即可看到browser_action或page_action 指定的資源，設定斷點
切換到Console欄，輸入location.reload()，發現原有的頁面重新進行了載入，同時browser_action或page_action 指定的資源也重新執行了一遍，並在設定的斷點處停下來，等待debug

參考連結

chrome擴充套件程式
 如何從零寫一個Chrome擴充套件

11個SEO人員必須知道的Chrome擴充套件外掛
2018-07-21
Chrome套件
面試前必須要知道的Redis面試題
2019-01-21
Redis面試題
開發Koa 必須用的外掛
2019-02-19
在面試前必須要知道的 Redis 面試內容
2019-01-14
面試Redis
面試前必須要知道的21道Redis面試題
2019-09-02
Redis面試題
Flutter 外掛編寫必知必會
2018-12-26
Flutter
你必須要知道的babel二三事
2020-09-14
Babel
寫一個chrome外掛讓你的codepen下雨
2018-07-28
Chrome
好用的chrome外掛
2019-03-29
Chrome
CSS你可以不寫，但這些規範必須要知道！
2019-05-07
CSS
PMD外掛：你必須掌握的程式碼質量工具！
2023-04-09
你必須要知道的HTTP協議原理
2020-12-10
HTTP協議
chrome 小外掛
2018-07-06
Chrome
關於Http協議，你必須要知道的
2019-01-19
HTTP協議
LLM部署，你必須要知道的幾個技巧！
2024-11-20
Chrome外掛入門
2019-01-28
Chrome
Chrome外掛推薦
2019-03-15
Chrome
chrome 外掛開發
2024-07-20
Chrome
程式設計師必備的 chrome 外掛及下載安裝
2019-10-23
程式設計師Chrome
15款好用超讚的chrome外掛，開發者們的必備~
2019-07-29
Chrome
配音技巧 | 學配音必須要知道的幾個技巧
2020-10-19
【推薦】Python中你必須要知道的IDE工具!
2022-06-20
PythonIDE
chrome擴充-chrome外掛-強制copy
2024-03-21
Chrome
【必須知道的JavaScript庫】 - 解決95%問題的工具外掛/庫 - 1
2022-02-19
JavaScript
強烈推薦的 Chrome 外掛
2019-01-23
Chrome
常用chrome外掛推薦
2018-08-23
Chrome
Chrome外掛開發教程
2021-09-25
Chrome
寫個Markdown外掛,講講Chrome擴充套件開發
2018-06-16
Chrome套件
檔案管理，你必須要知道的三個要點
2019-10-31
關於移動端適配，你必須要知道的
2019-05-17
這些外掛太強了，Chrome 必裝！尤其程式設計師！
2020-02-16
Chrome程式設計師
面試前必須知道的MySQL命令【explain】
2018-12-06
面試MySqlAI
Chrome外掛——Markdown編輯器
2019-01-12
Chrome
Chrome安裝json view外掛
2019-01-17
ChromeJSONView
Web前端開發Chrome外掛
2018-07-18
Web前端Chrome
吐血推薦 Chrome 外掛（一）
2021-09-09
Chrome
blazor wasm開發chrome外掛
2021-11-15
BlazorASMChrome
Chrome外掛開發入門
2021-04-18
Chrome