小編精選 - 技術文章翻譯 · 09月11日

可以使用 AI 輕鬆建立 Chrome 擴充功能的理論

「我想要製作一個擴充功能來自訂搜尋結果……」雖然我早就有這樣的想法，但我並沒有那麼高的技術能力。

不過最近，我突然想到「如果使用AI，這不是很簡單嗎?」

這次，我將介紹我實際使用AI製作「從Google搜尋結果中阻擋贊助廣告/特定網域的擴充功能」的步驟。

製作時間大約需要20到30分鐘。雖然我無法將程式碼直接貼在文章中，但我認為只要有心，任何人都可以做到，真心建議大家試試。

1. 目標的整理

首先，我們簡單決定想要的功能。
這次的目標有以下兩個。

隱藏Google搜尋結果內顯示的贊助廣告（#taw）
如果搜尋結果中包含特定網域，則整個區塊都隱藏

簡單來說，就是一個不讓廣告或惱人的網站出現的Chrome擴充功能。

最近AI生成的內容空洞的文章很多，因此這對於阻擋這類量產型文章的網站非常有用。

2. 創建必要的檔案

Chrome擴充功能最基本需要以下檔案。

manifest.json
content.js
domains.json（定義想要阻擋的網域）

當我把想做的事用隨便的提示告訴ChatGPT時，它自動生成了所需的檔案結構和代碼。

當然，一次就成功是不太可能的，所以這篇文章會介紹幾次生成結果中的部分程式碼。
整體程式碼加起來也不到100行，非常簡潔。

manifest.json
{
  "manifest_version": 3,
  "name": "Google Search Cleaner",
  "version": "1.0",
  "description": "從Google搜尋結果中隱藏特定網域和廣告",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/*"
      ],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

在manifest中，matches部分設定了攔截的範圍。這次由於是想從搜尋結果中排除，所以設定為「https://www.google.com/*」。

如果把這設定成yahoo的話，可能在yahoo也能阻擋。我不使用也就沒有這樣做。

3. 設定特定網域的方式

我選擇不直接在程式碼中寫入要阻擋的網域，而是將其整理在外部的domains.json中進行管理。
這樣的格式，只需要更改設定檔，即可輕鬆更改阻擋對象。

domains.json
{
  "blockedDomains": [
    "example.com",
    "spam-site.com",
    "test-site.net"
  ]
}

4. 監控搜尋結果並消除廣告

スクリーンショット 2025-09-08 151909.png

當進行搜尋時，最上面顯示的通常是標註為「贊助商」的廣告。

大約一年前，這裡甚至會出現詐騙網站，混亂不堪，不過最近都改善了不少，看起來整體變得好很多。

那麼，我們直接開始阻擋吧。按下F12查看類別或ID等信息，可以發現贊助廣告的ID為「#taw」。

對於這個#taw，我們可以使用CSS設定「display:none !important」，使其即使再顯示回來也不會被覆蓋。

處理流程如下。

在網頁加載後立即隱藏#taw
監控DOM變化，若#taw被新增，則即時隱藏

這樣的處理由ChatGPT創建。
順便說一下，這裡使用的是ChatGPT-5 mini版本。

5. 不依賴於類別名稱的結構

最初，我指定Google搜尋結果的類別（.yhQgZb等），並設定如果目標網域存在於該類別內便隱藏，但這個類別是根據頁面自動生成的，因此當我們移動頁面時，封鎖就失效了。

因此最終我決定不使用類別，而是解析搜尋結果區塊中的連結，若包含特定網域則隱藏其父元素。

處理流程如下。

獲取頁面內所有連結
檢查各連結的href中是否包含阻擋的網域
使用closest()找到包含該連結的全部搜尋結果
對該區塊使用display:none !important隱藏

這樣，即使Google的HTML結構稍作變動，也能穩定運作。這個流程也是ChatGPT幫我想的，真的是非常優秀。

6. 完成

雖然我想介紹最終完成的JavaScript，但這樣與正常分發擴充功能並無二致，因此我將不貼出實際程式碼。

（根據規定，若要分發給不特定的人，必須通過Chrome Web Store發佈）

簡單概括處理內容如下。

讀取設定檔
- 讀取domains.json並獲取要阻擋的網域清單。
隱藏#taw（廣告區域）
- 立即將頁面上的#taw元素隱藏，使用display:none !important。
- 此外，使用MutationObserver監控頁面內的DOM變化，即使用#taw動態生成也能自動隱藏。
阻擋特定網域的搜尋結果
- 檢查頁內所有連結，若連結所指向的網域包含阻擋的對象，則使用display:none !important隱藏該連結所在的搜尋結果區塊（div[jscontroller]、div[data-hveid]、div.g等）。
- 同樣，使用MutationObserver來監控動態新增的搜尋結果並套用阻擋。
錯誤處理
- 若讀取設定檔失敗，則在控制台輸出錯誤訊息。