Google Extension - DashingDigit001/WikiPage GitHub Wiki

Google Extension組成的主要元素

  • background scripts :

    擴充插件在安裝後需要的持續性的資料來源(persistent variable)

  • content scripts

  • option page

  • UI Elements

  • manifest.json :

    此extension的manifest

建置步驟

  1. 建立空資料夾 -> 裡面建立manifest.json
{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3
}

  1. 在瀏覽器網址列上輸入:chrome://extensions

  2. 切換至Developer Mode(開發者模式)

  3. 點選Load Unpacked -> 選擇剛剛建立的資料夾

  4. 下方即可看到剛剛建立的extension

  5. 接著在manifest.json中加入

"background": {
    "service_worker": "background.js"
  }

明確指示要讀取的背景js

  1. 建立background.js -> 監聽事件 runtime.onInstalled

    let color = '#3aa757';

//只要在安裝後會觸發
chrome.runtime.onInstalled.addListener(() => { 
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

  2. 第7步使用了storage API, 因此要在manifest.json中加入:

     "permissions": ["storage"]

  3. 建立UI介面, popup.html和button.css

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

button.css

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}
  1. 在manifest.json中加入
"action": {
    "default_popup": "popup.html"
}
  1. 在manifest.json中加入各種icons
"action": {
    "default_popup": "popup.html",
    "default_icon": {
        "16": "/images/get_started16.png",
        "32": "/images/get_started32.png",
        "48": "/images/get_started48.png",
        "128": "/images/get_started128.png"
    }
},
"icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
}
  1. 建立popup.js

首先先從storage API中抓取我們想要的元素

// Initialize button with user's preferred color
let changeColor = document.getElementById("changeColor");

chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

然後匯入到popup.html中

<script src="popup.js"></script>
  1. 加入以下程式碼可以建立按鈕事件
// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

//以上內容會在插件上的網頁中執行
//以下內容會被動態注入到讀取中的網頁並且執行
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}

上方程式碼有兩個額外的權限需求:

  • 讓插件存取當前網頁
  • 使用scripting API中的executeScript

因此我們要在manifest.json中加入

 "permissions": ["storage", "activeTab", "scripting"],
  1. 至此更換網頁背景顏色的功能完成

其他操作

如何加入bootstrap來協助排版

  1. 到bootstrap官網下載bootstrap的dist並放到extension的資料夾下
  2. 在步驟第9步的popup.html中head加入
<link rel="stylesheet" href="./bootstrap-5.0.2-dist/css/bootstrap.min.css" />
  1. 在步驟第9步的popup.html中body加入
<script src="./bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>

注意

  • 如果功能沒有觸發, 需要移除插件在安裝

觀念

插件可視為另一個網頁

然後此網頁可以注入可執行的程式碼到現有網頁

runtime.onInstalled

runtime.onInstalled, 該事件只會在三種情況下觸發

  • 首次安裝完成
  • 插件更新
  • 瀏覽器更新

在內部我們將使用chrome的storage API, 讓插件的其他元件都能存取到裏面的變數

Chrome API

幾乎所有的API都要經由"註冊"取得權限後才可以使用, 因此在manifest.json中需要建立permissions

service_worker

步驟中建立的background.js被稱作service worker, 只有在安裝的首次會執行, 可將在此載入一些預設資料

script injection

要將我們插件的邏輯操作注入到當前網頁中有兩種處理方式:

  • 在manifest.json中宣告host_permissions
  • 在permissions中加入activeTab
⚠️ **GitHub.com Fallback** ⚠️