本頁面由 Cloud Translation API 翻譯而成。

將指令碼插入使用中的分頁

按一下擴充功能工具列圖示，即可簡化目前網頁的樣式。

總覽

本教學課程將建立一個擴充功能，簡化 Chrome 擴充功能和 Chrome 線上應用程式商店說明文件頁面的樣式，讓這些頁面更易於閱讀。

本指南將說明如何執行下列操作：

使用擴充功能服務 worker 做為事件協調器。
透過 "activeTab" 權限保護使用者隱私。
在使用者點選擴充功能工具列圖示時執行程式碼。
使用 Scripting API 插入及移除樣式表單。
使用鍵盤快速鍵執行程式碼。

事前準備

本指南假設您具備基本的網路開發經驗。建議您查看「Hello World」一文，瞭解擴充功能開發工作流程。

建構擴充功能

首先，請建立名為 focus-mode 的新目錄，用於儲存擴充功能的檔案。如有需要，您可以從 GitHub 下載完整的原始碼。

步驟 1：新增擴充資料和圖示

建立名為 manifest.json 的檔案，並加入下列程式碼。

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

如要進一步瞭解這些資訊清單鍵，請參閱「在每個分頁中執行指令碼」教學課程，進一步瞭解擴充功能的metadata和圖示。

建立 images 資料夾，然後下載圖示至其中。

步驟 2：初始化擴充功能

擴充功能可以使用擴充功能的服務 worker，在背景監控瀏覽器事件。服務工作站是特殊的 JavaScript 環境，可處理事件，並在不需要時終止。

請先在 manifest.json 檔案中註冊服務工作站：

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

建立名為 background.js 的檔案，並加入下列程式碼：

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

服務工作者會監聽的第一個事件是 runtime.onInstalled()。這個方法可讓擴充功能設定初始狀態，或在安裝時完成某些工作。擴充功能可以使用 Storage API 和 IndexedDB 儲存應用程式狀態。不過，由於我們只處理兩種狀態，因此會使用動作的徽章文字本身，追蹤擴充功能是否為「開啟」或「關閉」。

步驟 3：啟用擴充功能動作

擴充功能動作可控制擴充功能的工具列圖示。因此，每當使用者點按擴充功能圖示時，系統就會執行程式碼 (如本範例所示) 或顯示彈出式視窗。新增下列程式碼，在 manifest.json 檔案中宣告擴充功能動作：

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

使用 activeTab 權限保護使用者隱私

activeTab 權限可讓擴充功能暫時在有效分頁中執行程式碼。也允許存取目前分頁的敏感屬性。

使用者叫用擴充功能時，系統會啟用這項權限。在這種情況下，使用者會透過點選擴充功能動作來叫用擴充功能。

💡? 哪些其他使用者互動可在擴充功能中啟用 activeTab 權限？

按下鍵盤快速鍵組合。
選取內容選單項目。
接受通用搜尋框的建議。
開啟擴充功能彈出式視窗。

"activeTab" 權限可讓使用者有意選擇在焦點分頁中執行擴充功能，藉此保護使用者的隱私權。另一項好處是不會觸發權限警告。

如要使用 "activeTab" 權限，請將該權限新增至資訊清單的權限陣列：

{
  ...
  "permissions": ["activeTab"],
  ...
}

步驟 4：追蹤目前分頁的狀態

使用者點選擴充功能動作後，擴充功能會檢查網址是否與說明文件頁面相符。接著，它會檢查目前分頁的狀態，並設定下一個狀態。將下列程式碼新增至 background.js：

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

步驟 5：新增或移除樣式表單

接下來，我們要變更頁面的版面配置。建立名為 focus-mode.css 的檔案，並加入下列程式碼：

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

使用 Scripting API 插入或移除樣式表單。請先在資訊清單中宣告 "scripting" 權限：

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

最後，請在 background.js 中新增下列程式碼，變更頁面版面配置：

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡? 我可以使用 Scripting API 插入程式碼，而非樣式表單嗎？

可以。您可以使用 scripting.executeScript() 來插入 JavaScript。

選用步驟：指派鍵盤快速鍵

您可以新增捷徑，方便啟用或停用專注模式。將 "commands" 鍵新增至資訊清單。

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

"_execute_action" 鍵會執行與 action.onClicked() 事件相同的程式碼，因此不需要額外的程式碼。

測試是否能正常運作

請確認專案的檔案結構如下所示：

專注模式資料夾的內容：manifest.json、background.js、focus-mode.css 和圖片資料夾。

在本機載入擴充功能

如要在開發人員模式下載入未封裝的擴充功能，請按照「Hello World」中的步驟操作。

在說明文件頁面上測試擴充功能

首先，請開啟下列任一頁面：

接著，按一下擴充功能動作。如果你設定了鍵盤快速鍵，可以按下 Ctrl + B 或 Cmd + B 進行測試。

應該會從以下內容開始：

變更為：

🎯? 可能的改善項目

根據您今天學到的內容，請嘗試完成下列任一操作：

改善 CSS 樣式表單。
指派其他鍵盤快速鍵。
變更你喜愛的網誌或說明文件網站版面配置。

繼續建構。

恭喜您完成本教學課程 🎉?。請繼續完成本系列的其他教學課程，提升技能：

擴充功能	學習目標
閱讀時間	自動在特定網頁組合中插入元素。
分頁管理工具	建立可管理瀏覽器分頁的彈出式視窗。

繼續探索

希望您喜歡開發這個 Chrome 擴充功能，也期待您繼續學習擴充功能開發相關知識。建議您參考下列學習路徑：

開發人員指南提供數十個額外連結，可連至與進階擴充功能建立相關的說明文件。
擴充功能可存取開放網路上提供的強大 API。Chrome API 說明文件會逐一介紹各個 API。