手寫chrome extension

想寫一個支持html轉PDF的小工具方便本身平常使用，因而乎查了查資料關於怎麼寫chrome extension。記錄擼代碼的過程。

基礎配置

• 進入 chrome://extensions 打開Developer mode
• 選擇Load Uppacked加載你的extension
• 每次新改動要更新extension，以後記得刷新頁面最新的change才能起效

extension的基本組成部分

extension主要是四塊：manifest.json, content script, background script, popup。manifest.json定義了extension的基本信息、權限、後三者的結構。後三者之間只能經過message通訊，能夠理解爲在不一樣的sandbox中。

manifest.json

以下manifest定義了permission、content、background、browser_action。能夠注意到content_scripts字段是一個數組結構，而background卻只能有一個。browser_action能夠定製extension的圖標和彈出的popup頁面內容。

{
  "name": "...",
  "version": "1.0",
  "description": "...",
  "permissions": [
    "downloads",
    "activeTab",
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "index.html",
  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'"
}
複製代碼

content scripts

content_scripts是能拿到當前訪問的網頁元素。也就是script中寫個console.log會輸出在當前的Chrome deveploment tool上。

// listener的message
chrome.runtime.onMessage.addListener(function(message, sender,senderResponse){
    //...
});
複製代碼

background script

background script只能經過background page進行debug。該區域也沒有直觀UI效果。

能夠監聽瀏覽器點擊在extension上的事件

chrome.browserAction.onClicked.addListener(function(tab){
    // send message to tab
    chrome.tabs.sendMessage(tab.id, {text: "hello, i'm back"});
})
複製代碼

popup

點擊extension圖標是彈出頁面

popup是一個單獨的網頁，debug這塊代碼的時候能夠選擇當前的popup，經過右鍵inspect審查元素打開debug工具。

通訊

message是不一樣區域之間通訊的惟一方式，而且只有content script能夠獲取當前頁面的dom節點。

chrome.runtime.onMessage
chrome.runtime.sendMessage
chrome.tabs.sendMessage
chrome.runtime.onconnect
複製代碼

通訊這一塊沒有深刻，遇到了Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist。試過幾種方法發現跟時序有些關係，貌似過早調用runtime會鏈接失敗，沒有解決這個問題，後面換了種寫法貌似避開了這個問題:( 。後期須要理解一下Live connect

chrome extensions api

• chrome.tabs

chrome.tabs.query({
        active: true,
        currentWindow: true
    }, (tabs) => {
        const tab = tabs[0];
        chrome.tabs.sendMessage(tab.id, {text:  "changeColor"});
});
複製代碼

• chrome.runtime
• chrome.download
• ...

使用react

在使用create-react-app腳手架時遇到的幾點問題：

• eslint error沒辦法識別關鍵字chrome,解決方法是添加下面的註釋在文件頭部，能夠避開eslint

/*global chrome*/
複製代碼

• chrome extension不支持inline script，creat-react-app默認打包以後存在inline script。在打包deploy的時候build參數添加INLINE_RUNTIME_CHUNK=false

{
    "scripts": {
        "start": "react-scripts start",
        "build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
 }
複製代碼

• 更新必定記得刷新頁面，否則爲進入自我懷疑模式

主要代碼：github react_html2Pdf，目前只完成了粗糙的extension腳手架。

參考：

• building a chrome extension using react
• Create chrome extension with ReactJs using inject page strategy
• 11.3: Chrome Extensions: Content Scripts - Programming with Text - YouTube