# 自製 chrome 擴充套件
我的需求: 希望有個擴充套件可以改變某個網頁的字型(字形改成微軟正黑體)。

## 一、專案根目錄
建立資料夾，命名 my-extension (可自行命名)，my-extension資料夾內建立以下檔案:
- background.js // 自動注入 JS
- content.js // 你想執行的 JS
- manifest.json // 必備的設定檔

## 二、各檔案內容，貼上下列程式碼
### background.js (自動注入 JS)

// background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 網址要跟 manifest.json 內的 "host_permissions" 的值一樣
  if (changeInfo.status === 'complete' && tab.url.includes("https://law.moj.gov.tw/")) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ["content.js"]
    });
  }
});

'https://law.moj.gov.tw/' 網址要跟 manifest.json 內的 "host_permissions" 的值一樣，這是你想操控的網頁網址

-----

### content.js （你想自動執行的 JS）

console.log("自動注入成功！");

const bodyTag = document.body;

// 所有你希望改字體的元素
const list = ['div', 'a', 'p', 'span'];

// 字體微軟正黑體
function changeFont() {
  list.forEach((tag) => {
    const elements = document.querySelectorAll(tag);
    elements.forEach((el) => {
      el.style.fontFamily = 'Arial, 微軟正黑體';
    })
  })
}

changeFont(); // 執行

這邊我想執行的是，將網頁內的字形改成微軟正黑體、英文字型改成 Arial。

------
### manifest.json (必備的設定檔)

//manifest.json

{
  "manifest_version": 3,
  "name": "Auto Run Snippet",
  "version": "1.0",
  "description": "自動在特定網頁執行 JavaScript",
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["https://law.moj.gov.tw/"],
    // background.js 內的 tab.url 的值，必須和這個網址一樣
  "background": {
    "service_worker": "background.js" // 這裡放你要自動匯入的background.js檔案(可以自行命名檔案，請注意檔案路徑要正確)
  },
  "action": {
    "default_title": "Auto Run"
  }
}

**host_permissions** 的值換成你希望操控的網址
這裡放的是全國法規資料庫的網頁(因為他們都是新細明體閱讀起來不舒服，我想改成微軟正黑體)

### 以下介紹 manifest.json 內的屬性:
:::info
上方程式碼是 Chrome 擴充套件（Extension） 的設定檔，使用的是 Manifest V3（最新的擴充套件格式）。
1. manifest_version: 3
manifest_version 是必須的，用來告訴瀏覽器這個擴充套件使用的是哪個版本的設定規範。
v3 是最新的版本，具有一些新特性，例如背景頁面使用 service_worker，而非舊版的 background 頁面。
2. name: "Auto Run Snippet"
name 是擴充套件的名稱，這個名稱會顯示在瀏覽器擴充套件管理頁面，也會顯示在安裝後的擴充套件欄位中。
3. version: "1.0"
version 是擴充套件的版本號，這有助於管理更新。
4. description: "自動在特定網頁執行 JavaScript"
description 是擴充套件的簡介，告訴用戶這個擴充套件的功能。這裡是說它可以在特定的網站上自動執行 JavaScript 代碼。
5. permissions: ["scripting", "tabs"]
permissions 是擴充套件需要的權限。在這裡：
scripting：讓擴充套件有權限注入腳本到網頁中。
tabs：讓擴充套件能夠與瀏覽器的標籤頁進行交互，查看標籤頁狀況或操作標籤頁。
6. host_permissions: ["https://example.com/*"]
host_permissions 用來指定擴充套件可以在哪些網站上運行。
"https://example.com/*" 表示該擴充套件將只在 example.com 網站上運行，並且可以對該網站進行腳本注入或其他操作。你可以根據需求修改成不同的網址（例如 https://www.google.com/*）。
7. background: { "service_worker": "background.js" }
background 設定是擴充套件的背景腳本，它用來處理一些長時間運行的任務，或是監聽一些事件。
使用 service worker（background.js）是 Manifest V3 中的改動，這樣做可以讓擴充套件在背景處於輕量且事件驅動的模式。
background.js 是實際處理背景邏輯的 JavaScript 檔案，通常用來監控或處理某些事件（如網頁加載、按鈕點擊等）。
8. action: { "default_title": "Auto Run" }
action 是指擴充套件的圖標按鈕設定，這裡的 default_title 是當用戶將鼠標懸停在擴充套件圖標上時顯示的提示文字。
"Auto Run" 會顯示在圖標上，提醒用戶這個擴充套件的功能。
:::

----

### 四、安裝這個擴充套件到 Chrome
打開 Chrome 瀏覽器
輸入網址：[chrome://extensions](chrome://extensions)
開啟右上角的「開發人員模式」
點「載入未封裝項目」，選剛剛的資料夾（例如 my-extension）
成功後它就會在你設定的網站開啟時，自動注入 content.js 裡的代碼！

:::info
❗️安全提示
不要加 "<all_urls>" 除非你真的需要全網頁注入，否則建議用明確網址。
:::

可以加上權限提示或 ```action button``` 做進階控制。

------
### 2025.5.5 實際操作
## 我的資料夾架構
根目錄三隻檔案:
- background.js
- content.js
- manifest.json

根據上面的步驟建立專案、建立檔案並貼上程式碼後，打開chrome瀏覽器，進入頁面:
或是直接輸入網址: chrome://extensions
然後照著下圖步驟操作:


:::info
想檢查擴充套件有沒有應用了，可打開F12 console.log 查看~
console.log("自動注入成功！");
:::

已成功修改全國法規資料庫內網址的文字為微軟正黑體字形。