如何使用前端框架開發Google extension

相信很多人都很好奇如何開發Google Extension，這裡將介紹如何使用前端框架+chrome API開發Google套件。
為了方便解釋，以下以React為例，但是其他框架也是相同概念，不一樣的指令而已。

提要

開發套件的難點就是，每次預覽結果的時候，必須要build完再由Google chrome載入，而且需要注意一些開發的小坑。

初始化專案

1 2	npx create-react-app <專案名稱> cd <專案名稱>

設定manifest

位置在public裡面，將裡面的json取代成以下內容以辨識是google extension
你可以把你喜歡的圖片放在public變成你的icon

{
  "manifest_version": 2,
  "name": "example",
  "description": "",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  }
}

Build project

將自己的專案編譯打包，會多一個build資料夾

1	npm run build

載入專案

打開你的google chrome，打開套件頁面
1
chrome://extensions/
載入專案，找到build資料夾

是否能使用？

這個時候你會發現，套件已經出現在你的工具列了，但是按了發現沒有反應，怎麼會這樣呢？
讓我來告訴你，打開console你會看到有error出現

1
2

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-hohfoiwesjfiowejfiopwejfopekpeIL38o='), or a nonce ('nonce-...') is required to enable inline execution.

原因是你需要給予權限，因此請複製上面的sha256到manifest設定

{
  "manifest_version": 2,

  "name": "...",
  "description": "...",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "content_security_policy": "script-src 'self' 'sha256-......='; object-src 'self'"
}

設定好之後，你就會看到網頁跑起來了

如何開發

基本上都像一般在開發前端框架一樣平常，只是需要注意框框是很小的，因此字體和網頁大小需要特別注意。
extension是一個網頁，瀏覽器本身又是一個網頁，所以當你需要取得當下的網頁資料時，並非得到網頁的，而是套件本身。那要如何做到呢？需要用到Google Chrome API

Google Chrome API

如果要使用的話，記得要設置permissions，假如你會用到套件裡的tabs，需要給予權限。

{
  "manifest_version": 2,

  "name": "...",
  "description": "...",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "permissions": [
    "tabs",
    "storage",
    "activeTab",
    "<all_urls>"
  ],
  "content_security_policy": "script-src 'self' 'sha256-......='; object-src 'self'"
}

解決編譯時，遇到error的問題
假如你希望在瀏覽器上，inject一段程式碼（也就是希望放這段程式碼）
1
2
3
chrome.tabs.executeScript(null, {
"code": `document.getElementById(\"form\").value = \"${this.state.form}\";`
}, (result) => message.success('Update successful'));
當你build的時候，就會發現can’t not find chrome of undefined
沒錯，chrome必須在瀏覽器的環境之下才能夠啟動/編譯成功，那…這樣要怎麼編譯！？
解決方式：
放置Global註解在程式碼的最上面
1
/* global chrome */
編譯後，你會發現ok了！