Chrome 擴充套件程開發初探

FunTester發表於2024-07-22
Chrome套件
「原創宣告：保留所有權利，禁止轉載」

最近學習了一些前端知識，準備找點方向和專案在工作之餘練練手。偶然間被 ChatGPT 提醒，覺得 Chrome 擴充開發是一個非常不錯的方向。

Chrome 擴充是擴充套件瀏覽器功能的小程式，使用者可以透過 Chrome Web Store 下載和安裝。這些擴充能夠增強瀏覽器的效能和使用者體驗，例如廣告攔截、實時翻譯、任務管理、筆記記錄等。外掛還提供自定義功能，使使用者能夠根據個人喜好調整瀏覽器外觀和書籤管理。同時，安全外掛可以保護使用者隱私和資料安全，開發擴充幫助開發者更高效地除錯程式碼。跨平臺同步功能使得使用者可以在不同裝置上享有一致的瀏覽體驗。Chrome 應用市場豐富多樣，滿足各種需求。

優勢

在我看來，Chrome 擴充有一下幾點好處：

  1. 操作簡單快捷。相比較普通的Web頁面，擴充可以更快直達使用者，免去跳轉切換的繁瑣手續。配合快捷鍵更是如虎添翼，直上雲霄。
  2. 開發成本低。Chrome 擴充開發只需要建立符合Chrome要求的目錄即可。簡單的一鍵式直達功能不需要工程化，直接一兩個方法解決。前端程式碼完全可以比照Web端編寫，甚至程式碼拿來即用，相容性非常好。
  3. 開發效率高。據我自己體驗，Chrome 擴充的頁面相對簡單和獨立，對於大量功能性頁面，不需要太多互動設計，大大降低了開發難度，提升開發效率。對於一個前端小白的我來說，跟 ChatGPT 對話就能完成類似 Postman 單頁面的開發。甚至還能微調 CSS 提升美觀程度。

還有一個不咋上的檯面的原因，就是可以直接抄別人的程式碼。比如我需要內建一個歷史頁面的管理功能，直接去 Chrome 商店下載一個擴充，然後發動抄能力，把原始碼抄過來即可，直呼過癮。我已經在實踐專案中抄了 3 個別人外掛的原始碼，其中復活了一個由於未及時適配 Manifest V3 而被下架的外掛，功能就是防止瀏覽器視窗關閉最後一個標籤時會關閉整個視窗，有興趣的可以私聊發原始碼交流。

下面正式進入正題，如何開發 Chrome 擴充。

準備

首先你需要具備一些知識：HTML 、CSS 、 JavaScript 等。
其次需要了解 Chrome 擴充開發規範和 API。
最後你需要一件趁手的兵器，我用的 Webstorm 。

第一步

首先需要一個 manifest.json 檔案。manifest.json 檔案是 Chrome 擴充套件的配置檔案，定義了擴充套件的基本資訊、許可權和功能。下面是一個簡單的示例：

{
  "manifest_version": 3,
  "name": "FunTester Extension",
  "version": "1.0",
  "description": "This is a simple Chrome extension example.",
  "icons": {
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon48.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["content.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

以下是其主要功能的簡介：

  1. 基本資訊：
    • manifest_version：指定清單檔案的版本，目前最新版本是 3。
    • name：擴充套件的名稱。
    • version：擴充套件的版本號。
    • description：擴充套件的簡短描述。
    • icons：定義擴充套件的圖示，可以指定不同尺寸的圖示。
  2. 許可權：
    • permissions：列出擴充套件需要的許可權，例如訪問標籤頁、儲存等。這決定了擴充套件可以訪問的瀏覽器功能和使用者資料。
  3. 後臺指令碼：
    • background：定義後臺指令碼，在 manifest_version 3 中使用 service_worker。後臺指令碼在瀏覽器啟動時執行，管理擴充套件的生命週期和處理事件。
  4. 瀏覽器動作：
    • action：定義擴充套件圖示的預設行為，如點選圖示時彈出的頁面（popup），可以設定預設彈出頁面和圖示。
  5. 內容指令碼：
    • content_scripts：定義內容指令碼，這些指令碼將注入到匹配的網頁中執行。內容指令碼可以修改網頁內容或監聽網頁事件。
  6. 可訪問資源：
    • web_accessible_resources：定義擴充套件中可以被網頁訪問的資源，例如內容指令碼或圖示。這使得網頁能夠訪問擴充套件內的特定檔案。

透過配置 manifest.json 檔案，可以定義和控制 Chrome 擴充套件的各種功能和行為，包括使用者介面、後臺處理、網頁內容修改和許可權管理。這使得開發者能夠建立功能豐富且安全的瀏覽器擴充套件。

以上資訊建議去官方檢視，我就是因為版本 V2 教程耽誤了好一陣子功夫。

常用功能

在 Chrome 擴充套件中，popup 頁面是指當使用者點選擴充套件圖示時彈出的介面。這個介面通常用於提供使用者互動或展示資訊。Popup 頁面由一個 HTML 檔案組成，可以包含 JavaScript 和 CSS 來實現其功能和樣式。

popup 頁面配置方式如下：

{
  "manifest_version": 3,
  "name": "FunTester Extension",
  "version": "1.0",
  "description": "This is a simple Chrome extension example.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon48.png"
  },
  // 其他配置項...
}

這是一個簡單的 popup 頁面：

<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <style>
    body {
      width: 300px;
      height: 200px;
      font-family: Arial, sans-serif;
      padding: 10px;
    }
    button {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple popup example.</p>
  <button id="myButton">Click me</button>

  <script src="popup.js"></script>
</body>
</html>

不清楚是什麼版本開始，或者一直就這樣。Chrome 擴充套件的安全性設計確實不允許在 HTML 頁面中直接使用 JavaScript 程式碼來載入或執行擴充套件的功能。Chrome 擴充套件透過內容安全性策略來限制可以在頁面上執行的指令碼。這意味著擴充套件不能簡單地透過內聯 <script> 標籤或透過 document.write() 插入的指令碼來執行。這是為了防止惡意程式碼的執行和保護使用者的安全。所以都是寫在另外的 js 檔案當中。

假如我們想給這個 myButton 新增一個 onClick 事件的處理方法，可以在 popup.js 中新增下面的程式碼：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
  });
});

background

background.js 檔案是 Chrome 擴充套件的後臺指令碼，用於處理長期執行的任務、事件和狀態管理。它在瀏覽器的後臺執行，並且在瀏覽器啟動時載入。對於 manifest_version 3，使用 service_worker 作為後臺指令碼。

下面是配置方法：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  // 其他配置項...
}

而在 V2 當中是這麼配置的：

{
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  // 其他配置項...
}

顧名思義，background.js 就是作為背景存在，無論當我們在哪個頁面上都會被載入。在 manifest_version 3 中，透過在 manifest.json 檔案中定義 background 部分並引用 background.js 作為服務工作者，可以配置後臺指令碼來處理擴充套件的安裝事件、訊息傳遞、瀏覽器事件監聽、持久儲存、定時任務和網路請求。透過這種方式，可以在後臺指令碼中實現複雜的邏輯和狀態管理，同時與其他擴充套件元件進行通訊。

下面是 background.js 主要的功能演示：

1. 處理安裝事件

在擴充套件安裝或更新時執行一些初始化操作：

chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === 'install') {
    console.log("Extension installed");
    // 初始化一些資料
    chrome.storage.local.set({initialized: true});
  } else if (details.reason === 'update') {
    console.log("Extension updated to version " + chrome.runtime.getManifest().version);
  }
});

2. 訊息傳遞

監聽和處理來自內容指令碼（content scripts）、彈出頁面（popup）和其他部分的訊息：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GREETINGS") {
    console.log("Received message from", sender.tab ? "content script" : "popup", ":", message.payload);
    sendResponse({message: "Hello from background script"});
  }
});

3. 瀏覽器事件監聽

監聽瀏覽器的各種事件，例如標籤頁更新：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log("Tab updated: ", tabId);
    // 在更新的標籤頁中執行一些操作
  }
});

4. 持久儲存和同步

使用 Chrome 儲存 API 在瀏覽器關閉時保持資料持久化：

// 儲存資料
chrome.storage.local.set({key: 'value'}, () => {
  console.log('Value is set to value');
});

// 獲取資料
chrome.storage.local.get(['key'], (result) => {
  console.log('Value currently is ' + result.key);
});

我們還可以將資料儲存到雲端，方便跨裝置同步：

// 儲存資料到同步儲存
chrome.storage.sync.set({key: 'value'}, () => {
  console.log('Value is set to value');
});

// 獲取同步儲存中的資料
chrome.storage.sync.get(['key'], (result) => {
  console.log('Value currently is ' + result.key);
});

// 刪除同步儲存中的資料
chrome.storage.sync.remove(['key'], () => {
  console.log('Value is removed');
});

// 清空所有同步儲存資料
chrome.storage.sync.clear(() => {
  console.log('All sync storage data is cleared');
});

5. 定時任務

設定定時器來定期執行任務：

setInterval(() => {
  console.log("Periodic task running...");
  // 執行定期任務
}, 60000); // 每分鐘執行一次

6. 網路請求

發起網路請求，處理資料，並與伺服器通訊：

function fetchData() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));
}

// 定期獲取資料
setInterval(fetchData, 3600000); // 每小時執行一次

content_scripts

在 Chrome 擴充套件中，content.js 是內容指令碼，用於在匹配的網頁上執行 JavaScript 程式碼。內容指令碼可以修改網頁的 DOM 結構，與頁面進行互動，並在瀏覽器頁面載入時注入執行。

配置方法如下：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

假如我想在頁面 body 中新增一個元素，可以在 content.js 中新增以下程式碼：

console.log("Content script loaded");

// 在頁面 DOM 載入完成後執行操作
document.addEventListener('DOMContentLoaded', function() {
  // 在頁面中插入一個 div 元素
  const div = document.createElement('div');
  div.textContent = 'This content is injected by Chrome extension.';
  document.body.appendChild(div);
});

Chrome 擴充套件中的 content.js 主要功能包括：

  1. DOM 操作：修改頁面的 DOM 結構，例如插入、刪除或修改元素。
  2. 事件監聽：監聽頁面上的各種事件，如點選、輸入、滾動等，以響應使用者操作。
  3. 與頁面互動：與頁面上的元素進行互動，獲取或修改它們的內容、屬性和樣式。
  4. 資料注入：在頁面載入時向頁面注入自定義的 HTML、CSS 或 JavaScript，改變頁面的外觀或行為。
  5. 內容修改和過濾：根據特定規則修改頁面內容，過濾廣告、隱藏特定元素或修改網頁樣式。
  6. 訊息傳遞：與擴充套件的其他部分（如後臺指令碼 background.js、彈出頁面 popup.js）進行訊息傳遞和通訊。
  7. 資料採集和分析：收集頁面上的資料，進行分析或傳送到後臺進行處理。
  8. 頁面狀態監控：監控頁面的載入狀態和變化，執行相應的操作或顯示載入狀態。
  9. 與第三方服務整合：與網頁上的第三方服務或 API 進行整合和互動，獲取資料或執行操作。

右鍵選單

在 Chrome 擴充套件中，右鍵選單（Context Menu）是指使用者右鍵點選瀏覽器頁面或特定元素時彈出的選單選項。開發者可以透過 Chrome 擴充套件來新增自定義的右鍵選單選項，以提供更多的功能和互動性。

若想使用，需要在許可權當中新增 contextMenus 內容，如下：

  "permissions": [
    "contextMenus"
  ],

我們通常會把建立右鍵選單的方法放到 background 當中，這樣就能一直執行。下面是新增右鍵選單以及監聽時間的程式碼演示：

// 建立一個右鍵選單項
chrome.contextMenus.create({
  id: "myContextMenu",
  title: "Do Something",
  contexts: ["page", "selection", "link"]
});

// 監聽右鍵選單點選事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "myContextMenu") {
    console.log("Context menu item clicked:", info);
    // 執行相應的操作，例如傳送訊息到 content script 或執行後臺任務
  }
});

使用 chrome.contextMenus.create 方法建立右鍵選單項。使用 chrome.contextMenus.onClicked 監聽選單項點選事件。

  • 服務端功能測試
  • 效能測試專題
  • Java、Groovy、Go、Python
  • 單元&白盒&工具合集
  • 測試方案&BUG&爬蟲&UI 自動化
  • 測試理論雞湯
  • 社群風采&影片合集
如果覺得我的文章對您有用，請隨意打賞。您的支援將鼓勵我繼續創作！
打賞支援
暫無回覆。

相關文章