Manifest V3 架構解析與環境建置

如果你想要打造一款微型 SaaS，並且在最短的時間內獲得使用者，那麼 Chrome Extension (瀏覽器擴充套件) 絕對是你的首選。

為什麼？因為使用者不需要安裝龐大的桌面軟體，也不需要離開他們正在瀏覽的網頁。你的工具可以直接「寄生」在他們的瀏覽器上，在他們最需要的時候提供價值（例如：Grammarly 幫你改寫英文、AdBlock 幫你擋廣告、或是自動填表工具）。

在這堂課中，我們將從零開始，帶你深入了解 Google 最新的 Manifest V3 架構，並建立你的第一個擴充套件。

1. 什麼是 Manifest V3？

在開發 Chrome Extension 時，最核心的檔案就是 manifest.json。這就像是擴充套件的「身分證」與「說明書」，告訴瀏覽器這個套件叫什麼名字、需要什麼權限、以及包含哪些腳本。

Google 在近期全面推動了 Manifest V3，取代了舊版的 V2。這是一個巨大的架構變革，主要目的是為了提升：

  1. 安全性：限制外部程式碼的執行，防止惡意套件竊取資料。
  2. 效能：引入了 Service Workers，取代了過去一直常駐在背景吃記憶體的 Background Pages。
  3. 隱私：更嚴格的權限控管，例如 declarativeNetRequest 取代了 webRequest 來阻擋網路請求。

[!WARNING] 棄用警告：Google 已經開始強制下架所有 Manifest V2 的擴充套件。如果你在網路上看到舊的教學文章還在使用 "manifest_version": 2，請直接跳過，因為那已經無法上架了！本課程全篇採用最新的 V3 標準。

2. 擴充套件的核心組成元件

一個強大的 Chrome Extension 通常由以下四個核心元件組成：

  • Manifest (manifest.json)：設定檔，定義權限與架構。
  • Background Script (Service Worker)：在背景默默運行的管家。負責處理事件、跨網頁狀態管理、甚至與後端 API 通訊。
  • Content Scripts：注入到目標網頁的間諜。可以直接讀取和修改網頁的 DOM（例如把網頁上的特定單字標記成紅色）。
  • Popup / Options Page：使用者介面。點擊右上角圖示彈出的小視窗，或是專屬的設定頁面。

這四個元件彼此之間是隔離的，它們必須透過 Chrome 提供的 Message Passing (訊息傳遞) API 來互相溝通。

3. 動手做：建立第一個擴充套件

讓我們先建立一個最簡單的 Hello World 專案。請在你的電腦上建立一個新資料夾 my-first-extension，並在裡面建立以下檔案：

manifest.json

這是唯一不可或缺的檔案。請將以下程式碼貼入：

{
  "manifest_version": 3,
  "name": "Vibe Tutor 第一個擴充套件",
  "version": "1.0.0",
  "description": "這是我跟著 Vibe Tutor 做的第一個 Chrome Extension！",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

解析：

  • "manifest_version": 3：宣告我們使用最新標準。
  • "action"：定義了當使用者點擊瀏覽器右上角圖示時，會發生什麼事（在這裡我們指定彈出 popup.html）。
  • "permissions"：宣告我們需要使用的 Chrome API 權限。這裡我們先申請 storage (儲存設定) 和 activeTab (獲取當前分頁資訊)。

popup.html

這就是點擊圖示後會看到的小視窗 UI，其實就是一個簡單的網頁。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 300px;
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    h1 {
      font-size: 18px;
      color: #3b82f6;
    }
    button {
      background-color: #3b82f6;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
      margin-top: 10px;
    }
    button:hover {
      background-color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>哈囉！Vibe Tutor！</h1>
  <p>這是你的第一個微型 SaaS 雛形。</p>
  <button id="clickMeBtn">點我測試</button>

  <!-- 引入邏輯腳本 -->
  <script src="popup.js"></script>
</body>
</html>

popup.js

為我們的按鈕加上互動邏輯。

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('clickMeBtn');
  
  btn.addEventListener('click', () => {
    alert('太棒了！你成功觸發了按鈕事件！');
    btn.innerText = "已點擊 ✓";
    btn.style.backgroundColor = "#10b981"; // 變成綠色
  });
});

準備 Icon 圖片

你需要在專案內建立一個 icons 資料夾，並放進三張不同尺寸的圖片 (icon16.png, icon48.png, icon128.png)。

小提示：如果你只是在本地端開發測試，其實沒有 icon 也可以運行，Chrome 會自動給你一個預設的英文字母圖示。

4. 如何安裝並測試你的擴充套件？

寫好這三個檔案後，我們要怎麼把它安裝到瀏覽器上呢？

  1. 打開 Chrome 瀏覽器，在網址列輸入 chrome://extensions/ 並進入。
  2. 在頁面右上角，開啟 「開發人員模式 (Developer mode)」 的開關。
  3. 點擊左上角的 「載入未封裝項目 (Load unpacked)」 按鈕。
  4. 選擇你剛剛建立的 my-first-extension 資料夾。

這時候，你就會在擴充套件列表中看到它了！ 點擊瀏覽器網址列右側的拼圖圖示 🧩，把你的套件「釘選 (Pin)」在工具列上。點擊它的圖示，你就會看到精美的 popup.html 彈出來，並且按鈕可以正常運作。

[!TIP] 開發與除錯技巧 每次你修改了 HTML 或 JS 檔案後，你必須回到 chrome://extensions/ 頁面，點擊你套件卡片右下角的 重新整理按鈕 (⟳)，最新的程式碼才會生效！這是新手最常忘記的步驟。

5. 接下來的挑戰

恭喜你！你已經完成了第一步。 但在真實的 SaaS 產品中，我們不僅僅需要一個彈出視窗，我們還需要讓套件「看得懂」使用者正在瀏覽的網頁，甚至在背景幫使用者做自動化任務。

在下一章中，我們將深入探討 Manifest V3 最大的變革——Background Service Workers，看看這個強大的隱形管家能為我們帶來什麼樣的超能力！