AIで作ったChrome拡張機能を3分で強化してみた

Posted at 2025-09-09

今回は、以前ChatGPTに作ってもらったGoogle検索結果をカスタマイズするChrome拡張機能を、もっと便利に使えるように強化した話をします。

追加した機能はとてもシンプルで、検索結果から除外したいドメインをポップアップから追加できるようにしただけです。

強化前の課題

元々の拡張機能は、Google検索結果ページで以下の2つを行うものでした。

Google広告エリア（#taw）を瞬時に非表示化
特定ドメインを検索結果から完全に非表示化

しかし、ブロック対象のドメインはdomains.jsonに直接書き込む必要があり、拡張機能をいちいち編集しなければならないという問題がありました。

実際に使用していると、これがめちゃくちゃめんどくさいわけです。

修正内容

1. manifest.json にポップアップを追加

新たにdefault_popupを設定し、拡張機能アイコンをクリックしたときにポップアップが開くようにしました。

もちろん私が考えたわけでも書いたわけでもなく、丸ごとすべてChatGPTがやっています。

{
  "manifest_version": 3,
  "name": "Hide Google #taw + Block Search Result Domains (No Layout Shift)",
  "version": "1.5",
  "description": "Google検索結果を瞬時にカスタマイズ。ポップアップからドメイン追加可能",
  "permissions": [
    "storage",
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_title": "ブロックドメイン管理"
  },
  "content_scripts": [
    {
      "matches": ["*://www.google.com/*"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["domains.json"],
      "matches": ["*://www.google.com/*"]
    }
  ]
}

2. popup.html を新規作成

ユーザーがドメインを追加・削除できるUIを作成してもらいました。
追加したドメインはリストに表示され、削除もワンクリックで行えます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ドメイン追加</title>
  <style>
    /* ここにcssが書いてありますが長いので端折ります */
  </style>
</head>
<body>
  <h3>ブロックドメイン管理</h3>
  <input type="text" id="domainInput" placeholder="例: example.com">
  <button id="addDomainBtn">追加</button>
  <ul id="domainList"></ul>
  <script src="popup.js"></script>
</body>
</html>

3. popup.js を新規作成

ポップアップからの操作をchrome.storage.localで管理し、入力されたドメインを保存・表示できるようにしました。

document.addEventListener('DOMContentLoaded', () => {
  const domainInput = document.getElementById('domainInput');
  const addDomainBtn = document.getElementById('addDomainBtn');
  const domainList = document.getElementById('domainList');

  function renderDomainList(domains) {
    domainList.innerHTML = '';
    domains.forEach((domain, index) => {
      const li = document.createElement('li');
      li.textContent = domain;

      const removeBtn = document.createElement('button');
      removeBtn.textContent = '削除';
      removeBtn.addEventListener('click', () => {
        domains.splice(index, 1);
        chrome.storage.local.set({ blockedDomains: domains }, () => {
          renderDomainList(domains);
        });
      });
      
// 拡張機能の配布はできないため、この行より下のコードはカットします

4. content.js の修正

検索結果のフィルタリングで、ポップアップから追加されたドメインを反映できるように修正してもらいました。
domains.jsonは初期値として読み込み、ユーザー追加分をマージします。

拡張機能配布の規約上、Chrome Web Storeを通さずに一般公開することはできないため、JavaScriptのコードについては3分の1くらいしか掲載していません。

全部合わせると、今回追加したコードはだいたい150行ちょっと。手作業で書いたらそこそこ時間がかかると思いますが、全部ChatGPTにやってもらっておよそ3分で完成しました。

fetch(chrome.runtime.getURL('domains.json'))
  .then(response => response.json())
  .then(config => {
    const defaultDomains = config.blockedDomains || [];

    chrome.storage.local.get({ blockedDomains: [] }, (data) => {
      const userDomains = data.blockedDomains;
      const allDomains = Array.from(new Set([...defaultDomains, ...userDomains]));
      runBlocker(allDomains);
    });
  })
  .catch(error => {
    console.error('Error loading domains.json:', error);
  });

// 拡張機能の配布はできないため、この行より下のコードはカットします