Day 9：Chrome Extension 實作篇 - Popup Script 基礎架構

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

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

📅 Day 9：Chrome Extension 實作篇 - Popup Script 基礎架構

🛠️ 從介面到功能

昨天我們建立了美觀的 popup.html 介面，今天我們要開始讓它動起來！我們將建立 popup.js 的基礎架構，學習如何正確初始化腳本。

📋 學習目標

今天我們要完成：

1. 🎯 建立 popup.js 基本架構
2. 📄 理解 DOM 載入機制

🎯 建立 popup.js 基本架構

1.1 最簡單的 popup.js

讓我們從最基本的版本開始：

// popup.js - 輔大課表生成器彈出視窗腳本
console.log('🎨 Popup 腳本已載入');

// 等待 DOM 載入完成
document.addEventListener('DOMContentLoaded', () => {
  console.log('📄 DOM 載入完成');

  // 初始化按鈕事件
  initializeButtons();

  // 初始化狀態顯示
  initializeStatus();
});

// 初始化按鈕事件（暫時只是空函數）
function initializeButtons() {
  console.log('🔘 按鈕初始化完成');
}

// 初始化狀態顯示
function initializeStatus() {
  console.log('📊 狀態初始化完成');
}

⚠️ 重要概念：DOMContentLoaded

• 為什麼需要等待？ 因為腳本可能在 HTML 載入完成前就執行
• DOMContentLoaded 確保所有 HTML 元素都已經載入
• 這是 JavaScript 開發的基本好習慣

1.2 DOM 操作基礎

在 Chrome Extension 的 popup 中，DOM 操作和一般網頁相同：

// 顯示狀態訊息
function showStatus(message, type = 'info') {
  const statusDiv = document.getElementById('status');
  if (statusDiv) {
    statusDiv.textContent = message;
    statusDiv.style.display = 'block';

    // 移除舊的 class
    statusDiv.classList.remove('success', 'error');

    // 添加新的 class
    if (type === 'success' || type === 'error') {
      statusDiv.classList.add(type);
    }
  }
}

// 隱藏狀態訊息
function hideStatus() {
  const statusDiv = document.getElementById('status');
  if (statusDiv) {
    statusDiv.style.display = 'none';
  }
}

🧪 簡單測試

2.1 建立測試版本的 popup.js

以下為前面所學的 popup.js 的完整程式碼：

// popup.js - 測試版本
console.log('🎨 Popup 腳本已載入');

// 等待 DOM 載入完成
document.addEventListener('DOMContentLoaded', () => {
  console.log('📄 DOM 載入完成');

  // 初始化按鈕事件
  initializeButtons();

  // 初始化狀態顯示
  initializeStatus();
});

// 初始化按鈕事件
function initializeButtons() {
  const generateButton = document.getElementById('generateButton');
  const settingsButton = document.getElementById('settingsButton');

  if (generateButton) {
    generateButton.addEventListener('click', () => {
      console.log('🔘 生成課表按鈕被點擊');
      showStatus('按鈕點擊成功！', 'success');
    });
    console.log('✅ 生成按鈕事件已綁定');
  }

  if (settingsButton) {
    settingsButton.addEventListener('click', () => {
      console.log('🔘 設定按鈕被點擊');
      showStatus('設定按鈕點擊成功！', 'success');
    });
    console.log('✅ 設定按鈕事件已綁定');
  }
}

// 初始化狀態顯示
function initializeStatus() {
  showStatus('準備就緒', 'success');
}

// 顯示狀態訊息
function showStatus(message, type = 'info') {
  const statusDiv = document.getElementById('status');
  if (statusDiv) {
    statusDiv.textContent = message;
    statusDiv.style.display = 'block';

    // 移除舊的 class
    statusDiv.classList.remove('success', 'error');

    // 添加新的 class
    if (type === 'success' || type === 'error') {
      statusDiv.classList.add(type);
    }
  }
}

2.2 測試步驟

1. 建立 popup.js 檔案：

   • 將上面的代碼保存為 popup.js

2. 重新載入擴充功能：

   • 打開 chrome://extensions/
   • 點擊「重新載入」按鈕
     

3. 測試 popup：

   • 點擊擴充功能圖示，會可以看到狀態顯示 準備就緒 的新增
     

4. 檢查 Console：

   • 先點擊擴充功能圖示

   • 右鍵彈窗空白處 → 檢查
     

   • 查看 Console 輸出為以下內容即成功
     

5. 測試點擊效果，點擊開始生成課表，會看到狀態 按鈕點擊成功!
   

📂 專案結構檢查

完成後，目前專案結構應該是：

📁 fju-schedule-extension/
├── 📄 manifest.json     ← 擴充功能設定
├── 📄 background.js     ← 背景腳本
├── 📄 popup.html        ← 使用者介面
└── 📄 popup.js          ← 彈出視窗邏輯（今天部分完成）

🔗 知識銜接：今天我們建立了 popup.js 的基礎架構，明天將學習如何處理按鈕點擊事件和消息傳遞。

🎯 下集預告：Day 10 - Popup 按鈕事件處理 🔘