🎯 系列目標:用 30 天時間,從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能
👨💻 作者:輔大智慧資安 412580084
📅 Day 14:Chrome Extension 實作篇 - Content Script DOM 操作基礎
昨天我們學會了 Content Script 的基礎概念,今天我們要學習最基本的 DOM 操作,為後續的資料抓取打好基礎!
今天我們要完成:
DOM(Document Object Model)就是網頁的結構,我們可以透過 JavaScript 來讀取和修改它。
在網頁中找到我們需要的元素
// 基本的元素選取方法
const title = document.querySelector('h1');              // 找第一個 h1 標籤
const allLinks = document.querySelectorAll('a');         // 找所有 a 標籤
const byId = document.getElementById('studentName');     // 用 ID 找元素
const byClass = document.querySelector('.course-item'); // 用 class 找元素
從網頁元素中提取我們需要的資料
// 讀取元素的內容
const element = document.querySelector('h1');
if (element) {
  const text = element.textContent;        // 取得純文字內容
  const html = element.innerHTML;          // 取得 HTML 內容
  console.log('文字內容:', text);
  console.log('HTML 內容:', html);
} else {
  console.log('找不到元素');
}
避免程式因為找不到元素而出錯
// 安全的元素操作函數
function safeGetText(selector) {
  const element = document.querySelector(selector);
  if (element) {
    return element.textContent.trim(); // trim() 移除前後空白
  } else {
    console.log('找不到元素:', selector);
    return null;
  }
}
// 使用範例
const pageTitle = safeGetText('h1');
const studentName = safeGetText('#studentName');
if (pageTitle) {
  console.log('頁面標題:', pageTitle);
} else {
  console.log('沒有找到頁面標題');
}
// 收集頁面基本資訊
function getPageInfo() {
  const pageInfo = {
    title: document.title,                    // 網頁標題
    url: window.location.href,               // 當前網址
    domain: window.location.hostname,        // 網域名稱
    timestamp: new Date().toISOString()      // 當前時間
  };
  console.log('頁面資訊:', pageInfo);
  return pageInfo;
}
// 使用範例
const info = getPageInfo();
用法說明:
document.title:取得網頁標題window.location.href:取得完整網址window.location.hostname:取得網域名稱new Date().toISOString():取得當前時間// content.js - Day 14 基礎版本
console.log('🌐 Content Script DOM 操作練習 - Day 14');
// 安全的元素操作函數
function safeGetText(selector) {
  const element = document.querySelector(selector);
  return element ? element.textContent.trim() : null;
}
// 收集頁面基本資訊
function getPageInfo() {
  return {
    title: document.title,
    url: window.location.href,
    domain: window.location.hostname,
    timestamp: new Date().toISOString()
  };
}
// 統計網頁元素
function countElements() {
  return {
    links: document.querySelectorAll('a').length,
    images: document.querySelectorAll('img').length,
    tables: document.querySelectorAll('table').length,
    forms: document.querySelectorAll('form').length,
    inputs: document.querySelectorAll('input').length
  };
}
// 主要執行函數
function practiceDOM() {
  console.log('📊 開始 DOM 操作練習');
  // 1. 收集頁面資訊
  const pageInfo = getPageInfo();
  console.log('頁面資訊:', pageInfo);
  // 2. 統計元素
  const elementCount = countElements();
  console.log('元素統計:', elementCount);
  // 3. 嘗試抓取常見元素
  const title = safeGetText('h1');
  const firstLink = safeGetText('a');
  if (title) {
    console.log('✅ 找到標題:', title);
  } else {
    console.log('❌ 沒有找到 h1 標題');
  }
  if (firstLink) {
    console.log('✅ 找到第一個連結:', firstLink);
  } else {
    console.log('❌ 沒有找到連結');
  }
  return {
    pageInfo,
    elementCount,
    extractedText: { title, firstLink }
  };
}
// 監聽來自 background 的訊息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('📨 收到訊息:', request);
  if (request.action === 'practiceDOM') {
    try {
      const result = practiceDOM();
      sendResponse({ success: true, data: result });
    } catch (error) {
      console.error('DOM 操作練習失敗:', error);
      sendResponse({ success: false, error: error.message });
    }
  }
  return true;
});
// 頁面載入完成後自動執行一次
setTimeout(() => {
  practiceDOM();
}, 1000);
console.log('🚀 DOM 操作練習器初始化完成 - Day 14');
content.js
http://estu.fju.edu.tw/
F12 查看是否有以下日誌輸出即成功 
🔗 知識銜接:今天我們學會了基本的 DOM 操作,明天將學習如何識別輔大系統的特定元素。
🎯 下集預告:Day 15 - 輔大系統基礎元素識別 🎓