Day 6：Chrome Extension 理論篇 - background.js 背景腳本解析

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 6：Chrome Extension 理論篇 - background.js 背景腳本解析

🎭 從權限到背景服務

昨天我們完成了基本的權限配置，今天我們要深入理解 Chrome Extension 的核心組件之一：background.js 背景腳本。這是擴充功能的「大腦」，負責處理事件、管理狀態，以及協調各個組件之間的通信！

🧠 理論基礎：什麼是 background.js？

背景腳本的核心概念

background.js 是 Chrome Extension 的「控制中心」，它具有以下特徵：

🔹 常駐服務：即使用戶沒有打開擴充功能介面，背景腳本依然運行
🔹 事件驅動：響應各種瀏覽器事件（安裝、更新、分頁變化等）
🔹 無界面：沒有可見的 UI，純粹處理邏輯
🔹 權限豐富：可以使用擴充功能的所有權限
🔹 通信樞紐：協調 popup、content script 之間的數據交換

⚡ Service Worker 生命週期深度解析

2.1 生命週期狀態

Service Worker 具有明確的生命週期：

🟢 安裝 (Installing)
    ↓
🟡 等待 (Waiting) 
    ↓  
🔵 啟動 (Activating)
    ↓
✅ 活躍 (Active)
    ↓
😴 休眠 (Idle)
    ↓
❌ 終止 (Terminated)

暫停與重啟：

• Service Worker 會在閒置時自動暫停
• 收到事件時會自動重啟
• 重啟時全域變數會丟失！

2.2 狀態管理策略

由於 Service Worker 可能隨時終止，我們不能依賴全域變數：

❌ 錯誤做法：

// 全域變數會在 Service Worker 重啟時丟失
let userSettings = {};
let scheduleData = [];

✅ 正確做法：

// 使用 chrome.storage 持久化數據
const saveUserSettings = async (settings) => {
  await chrome.storage.local.set({ userSettings: settings });
};

const getUserSettings = async () => {
  const result = await chrome.storage.local.get(['userSettings']);
  return result.userSettings || {};
};

📡 通信架構：背景腳本作為通信中樞

3.1 Chrome Extension 通信模型

background.js 在整個擴充功能中扮演「通信樞紐」的角色：

flowchart LR
    popup["popup.js\n(前端界面)"] <--> background["background.js\n(控制中心)"]
    background <--> content["content.js\n(網頁腳本)"]
    background --> chromeAPIs["Chrome APIs\n(瀏覽器功能)"]

3.2 消息傳遞機制

單向消息 (One-way)：

// 從 popup 發送到 background
chrome.runtime.sendMessage({
  action: 'startScheduleExtraction',
  url: 'https://portal.fju.edu.tw/courseList'
});

雙向消息 (Two-way)：

// 發送消息並等待回應
const response = await chrome.runtime.sendMessage({
  action: 'getScheduleData'
});
console.log('收到回應:', response);

3.3 事件監聽與處理

背景腳本主要透過事件監聽來響應各種操作：

擴充功能圖示點擊：

chrome.action.onClicked.addListener(async (tab) => {
  // 用戶點擊擴充功能圖示時觸發
  console.log('用戶在分頁上點擊圖示:', tab.url);
});

分頁更新：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url?.includes('fju.edu.tw')) {
    console.log('輔大網站頁面載入完成');
  }
});

💾 數據存儲選項比較

在 Service Worker 環境中，我們有多種數據存儲方案：

🔗 知識銜接：今天我們建立了 background.js 的理論基礎，明天將進入實作階段，學習如何將這些概念轉化為實際的代碼，建立我們輔大課表生成器的核心控制邏輯。

🎯 下集預告：Day 7 - background.js 背景腳本實作篇 🛠️