Chrome擴展程序開發筆記-擴展與web頁面的通訊

可參考的資料

• 官方開發文檔 ：目前全英文，須要翻**牆。
• Chrome插件開發全攻略：github上star挺多的一個repo，開發前可先過一下。

搜索到的資料能夠做爲參考，實際開發應以官方最新文檔爲準。

文件結構

• manifest.json配置文件：必須，詳細說明文檔
• 其餘JavaScript、HTML、CSS文件：根據功能和我的喜愛，進行增減以及結構調整。

開發擴展程序與WEB開發相似，主要應用的技術爲JavaScript、HTML、CSS等，再根據功能，調用chrome提供的各種API。

最終的文件結構能夠相似這樣：

my-extension
  - manifest.json  // required
  pages
    - background.html
    - popup.html
  icons
    - logo_16.png
    - logo_48.png
    - logo_128.png
  js
    - background.js
    - content.js
    - inject.js
    - popup.js
  css
    - popup.css
複製代碼

開發時爲防止後續功能繁多，我使用了Vue-Cli初始化項目，並使用插件vue-cli-plugin-chrome-ext修改文件結構，再根據本身須要修改vue.config.js以修改webpack的一些配置。

web頁面與擴展程序之間通訊

官方相關的文檔

• 消息通訊 從web頁面發送消息
• 外部鏈接相關 externally_connectable
• 監聽事件 onMessageExternal用法

權限聲明

首先，須要在manifest.json中，配置externally_connectable字段，來聲明哪些web應用能夠經過後面的方式，與擴展程序創建鏈接。在matches字段中，註明須要通訊的web網站清單。

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}
複製代碼

matches數組的每一項爲URL字符串。且URL值必需要包含到二級域名級別。

externally_connectable字段，還能夠聲明ids字段，來指定須要通訊的其餘Chrome應用或者其餘擴展程序。

通訊方式

從Web頁面向擴展程序發送消息，可使用chrome.runtime.sendMessage,須要傳入擴展程序的ID，回調函數能夠接收Chrome擴展響應的消息：

const extensionId = 'deakpiepsidfpdfdioffidjfifjtest' // 想要與之通訊的擴展ID

// 向Chrome擴展發送請求
chrome.runtime.sendMessage(extensionId, {
  event: 'requestEvent',
  data: requestData,
}, (response) => {
    console.log('res data', response)
}
複製代碼

在Chrome擴展內使用chrome.runtime.onMessageExternal.addListener監聽消息，接收後用sendResponse發送響應消息：

chrome.runtime.onMessageExternal.addListener(async (request, sender, sendResponse) => {
  if (request.event == 'requestEvent') {
    const res = 'res message'
    sendResponse(res)
  }
})

複製代碼

監聽和修改Web請求

文檔位置：webRequest

依然是要先進行權限聲明：

{
      "name": "My extension",
      ...
      "permissions": [
        "webRequest",
        "*://*.google.com/"
      ],
      ...
  }
複製代碼

Chrome提供了一系列的事件來監聽Web請求生命週期的各個階段，其中onBeforeSendHeaders事件被觸發的階段，能夠用來增、刪、改HTTP請求的headers。也能夠在這個事件中取消請求。

用法， 修改以後return新的配置：

chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
  const { requestHeaders } = details
  
  requestHeaders.push({
      name: 'x-request-xx',
      value: '...'
  })
  
  return { requestHeaders: requestHeaders }
})
複製代碼

cookies操做

使用cookie相關的API，須要先在manifest.json中的permissions字段進行權限聲明，要訪問cookies的host也要一併聲明：

{
  "name": "My extension",
  ...
  "permissions": [
    "cookies",
    "*://*.google.com/"
  ],
  ...
}
      
複製代碼

Chrome共提供了5個方法和1個監聽事件，用於cookie的操做和對cookie變化的監聽：

方法：

• get: chrome.cookies.get(object details, function callback)
• getAll
• set
• remove
• getAllCookieStores

事件：

• onChanged

獲取指定名稱的cookie

chrome.cookies.get({
  url: 'https://example.com',
  name: 'token',
}, (cookie) => {
  console.log(‘token: ’, cookie.value) // cookie爲獲取到的cookie對象
})
複製代碼

設置cookie

chrome.cookies.set({
    url: 'http://example.com',
    name: 'x-request-xx',
    value: 'value...',
  }, (cookie) => {
    console.log('set cookie', cookie)
  })
複製代碼

總結

Chrome擴展與web之間通訊，還有一些其餘方式，但我的認爲按照官方文檔中推薦的方式比較容易使用。

在開發測試的過程當中，若是擔憂擴展的ID值發生變化，能夠在Chrome的Dashboard中創建好應用後，把生成的public key的值配置到manifest.json的key字段中，這樣就能保證開發過程當中也能生成惟一固定的的ID了。但如今新版的Dashboard改版後好像把public key隱藏掉了...

若有其它的開發技巧，還請看到這篇文章的你賜教哇~