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

在使用中分頁中插入指令碼

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

總覽

本教學課程會建構擴充功能，簡化 Chrome 擴充功能和 Chrome 線上應用程式商店說明文件頁面的樣式，讓內容更容易閱讀。

在本指南中，我們要說明如何執行下列操作：

使用擴充功能 Service 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"
  }
}

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

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

步驟 2：初始化擴充功能

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

首先，請在 manifest.json 檔案中註冊 Service Worker：

{
  ...
  "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 權限可讓擴充功能「暫時」在使用中的分頁執行程式碼。還可存取目前分頁的敏感屬性。

當使用者叫用擴充功能時，系統就會啟用這項權限。在這種情況下，使用者只要點選擴充功能動作，即可叫用擴充功能。

💡? 哪些使用者互動會為我的擴充功能啟用 Active Tab 權限？

按下鍵盤快速鍵組合。
選取內容選單項目。
接受網址列的建議。
正在開啟擴充功能彈出式視窗。

"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 的檔案，並加入以下程式碼：

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

使用 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 和 images 資料夾。

在本機載入擴充功能

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

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

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

接著按一下額外資訊動作。如果你已設定鍵盤快速鍵，可以按下 Ctrl + B 或 Cmd + B 進行測試。

看起來應該是這樣：

變更為：

🎯? 潛在強化

請根據您今天學到的知識，嘗試下列任一操作：

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

繼續拓展社群規模！

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

延伸	學習目標
閱讀時間	如何在一組特定頁自動插入元素。
分頁管理員	建立管理瀏覽器分頁的彈出式視窗。

繼續探索

希望您喜歡這個 Chrome 擴充功能，期待能繼續協助您開發擴充功能。我們建議的學習路徑如下：

開發人員指南提供數十種其他說明文件連結，協助您瞭解進階擴充功能建立功能。
擴充功能可以存取強大的 API，而不僅止於開放網路提供的 API。Chrome API 說明文件逐一介紹各項 API。