業務効率化のChrome拡張機能をAIエージェントで作る【2026】Manifest V3・APIなし

mkdir work-helper-extension
cd work-helper-extension
git init     # 変更履歴を残して、いつでも戻れるようにする
claude       # Claude Code を起動。最初に /init で CLAUDE.md を作っておく

# 業務ちょい便利ツール（Chrome拡張）

## 方針
- Manifest V3。ビルドツールやnpmパッケージは使わない（素のJS）
- permissions は最小限。追加するときは理由を説明し、私の確認を取る
- innerHTML は使わない（textContent / createElement を使う）
- 外部サーバーへの通信はしない。外部スクリプトも読み込まない

## 確認方法
- JSを変更したら node --check で構文チェックする
- 動作確認は chrome://extensions で再読み込みしてから行う（手順を私に案内する）

業務用のChrome拡張機能を Manifest V3 で作りたいです。機能は3つ。

1. ツールバーのボタンからポップアップを開き、今のタブのタイトルとURLを
   [タイトル](URL) のMarkdown形式でクリップボードにコピー
2. ポップアップに定型文のボタンを並べ、押すとページの入力欄（カーソル位置）に挿入
3. 登録したキーワードをページ内でハイライト。社内ポータル（https://*.example.co.jp/）では
   ページを開いたら自動で、それ以外のサイトではボタンを押したときだけ

定型文とキーワードは設定ページで編集し、chrome.storage.sync に保存。
権限は必要最小限にしてください。ファイル構成と、manifest に書く権限とその理由を
先に見せてください。

"permissions": ["tabs", "activeTab", "scripting", "storage"],
"host_permissions": ["<all_urls>"],

権限を1つずつ、なぜ必要か説明してください。
activeTab で代わりにならないものは残し、代わりになるものは削ってください。
インストール時にどんな警告が出るかも教えてください。

- tabs：タブのタイトルとURLを読むために入れましたが、activeTab があれば、ユーザーが拡張の
  ボタンを押したタブについてはタイトルとURLを取得できます。削除します。
- <all_urls>：任意のサイトでハイライトするために入れましたが、ボタンを押したときだけ動けばよい
  ので、activeTab + scripting で「クリックしたタブにだけ一時的に」注入できます。削除します。
- 社内ポータルでの自動ハイライトは content_scripts の matches を https://*.example.co.jp/* に
  限定します。インストール時の警告はこのドメインについてのみ表示されます。
- storage：設定の保存に必要です（警告は出ません）。
- scripting：ページへの注入に必要です。

Uncaught SyntaxError: Identifier 'keywords' has already been declared

ハイライトボタンを2回押すと、ページのコンソールに次のエラーが出て2回目が動きません。
原因を説明してから直してください。何回押しても、ハイライトが二重にならないようにしてください。

Uncaught SyntaxError: Identifier 'keywords' has already been declared

executeScript で同じファイルを注入すると、同じページの同じ「拡張用の世界」で2回実行されます。
content.js の一番外側で const keywords を宣言していたため、2回目は「宣言済み」のエラーになりました。
全体を即時実行関数 (async () => { ... })() で包んで変数をその中に閉じ込め、
実行のたびに前回の <mark> を外してからハイライトし直すように修正しました。

あるフォームで、定型文が入力欄に表示されるのに、送信すると空欄扱いになります。
考えられる原因と対策を教えてください。一般的なフォームでも壊れない方法にしてください。

JSファイルをすべて node --check で構文チェックしてから、ここまでをGitにコミットしてください。
コミットメッセージには、権限を削った理由と、二重注入の修正内容を書いてください。

{
  "manifest_version": 3,
  "name": "業務ちょい便利ツール",
  "version": "1.0.0",
  "description": "Markdownリンクのコピー、定型文の入力、キーワードのハイライト",
  "permissions": ["activeTab", "scripting", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "業務ちょい便利ツール"
  },
  "background": {
    "service_worker": "background.js"
  },
  "options_page": "options.html",
  "content_scripts": [
    {
      "matches": ["https://*.example.co.jp/*"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "commands": {
    "_execute_action": {
      "suggested_key": { "default": "Alt+Shift+L" }
    }
  }
}

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <button id="copy-md">📋 このページをMarkdownリンクでコピー</button>
  <h2>定型文を入力</h2>
  <div id="templates"></div>
  <button id="highlight">🖍 キーワードをハイライト</button>
  <p id="status" role="status"></p>
  <button id="open-options">⚙ 設定（定型文・キーワード）</button>
  <script src="popup.js"></script>
</body>
</html>

const statusEl = document.getElementById("status");
const show = (msg) => { statusEl.textContent = msg; };

async function getActiveTab() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  return tab;
}

// [タイトル](URL) 形式。タイトル中の [ ] はエスケープして崩れないようにする
function toMarkdownLink(title, url) {
  const safeTitle = (title || url).replace(/([\[\]])/g, "\\$1");
  return `[${safeTitle}](${url})`;
}

// ① Markdownリンクをコピー
document.getElementById("copy-md").addEventListener("click", async () => {
  const tab = await getActiveTab();
  await navigator.clipboard.writeText(toMarkdownLink(tab.title, tab.url));
  show("コピーしました");
});

// ② 定型文：ページ側で実行される関数（この関数だけがページに注入される）
function insertText(text) {
  const el = document.activeElement;
  if (el && (el.tagName === "TEXTAREA" ||
      (el.tagName === "INPUT" && /^(text|search|email|url|tel)?$/.test(el.type)))) {
    el.setRangeText(text, el.selectionStart, el.selectionEnd, "end");
    el.dispatchEvent(new Event("input", { bubbles: true })); // 画面側に変更を知らせる
    return true;
  }
  if (el && el.isContentEditable) {
    return document.execCommand("insertText", false, text);
  }
  return false;
}

async function renderTemplates() {
  const { templates = [] } = await chrome.storage.sync.get("templates");
  const box = document.getElementById("templates");
  box.replaceChildren();
  for (const t of templates) {
    const btn = document.createElement("button");
    btn.textContent = t.label; // innerHTML は使わない（設定値にHTMLが混ざっても安全）
    btn.addEventListener("click", async () => {
      const tab = await getActiveTab();
      const [result] = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: insertText,
        args: [t.text]
      });
      show(result.result ? "入力しました" : "先にページの入力欄をクリックしてください");
    });
    box.append(btn);
  }
}

// ③ ハイライト：開いているページに content.js をその場で注入する
document.getElementById("highlight").addEventListener("click", async () => {
  const tab = await getActiveTab();
  try {
    await chrome.scripting.insertCSS({ target: { tabId: tab.id }, files: ["content.css"] });
    await chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ["content.js"] });
    show("ハイライトしました");
  } catch (e) {
    show("このページでは使えません（chrome:// やウェブストアなど）");
    console.error(e);
  }
});

// 設定ページを開く（manifest の options_page）
document.getElementById("open-options").addEventListener("click", () => {
  chrome.runtime.openOptionsPage();
});

renderTemplates();

// 何度注入されても大丈夫なように、全体を即時実行関数で包む
(async () => {
  const { keywords = [] } = await chrome.storage.sync.get("keywords");
  const words = keywords.map((w) => w.trim()).filter(Boolean);

  // 前回のハイライトを外す（二重にならないように）
  for (const mark of document.querySelectorAll("mark.kw-hl")) {
    mark.replaceWith(document.createTextNode(mark.textContent));
  }
  document.body.normalize();
  if (words.length === 0) return;

  const escaped = words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
  const pattern = new RegExp(`(${escaped.join("|")})`, "g");

  // テキストノードだけを集める（script/style/入力欄の中は触らない）
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
    acceptNode(node) {
      if (node.parentElement.closest("script, style, textarea, input, [contenteditable]")) {
        return NodeFilter.FILTER_REJECT;
      }
      pattern.lastIndex = 0;
      return pattern.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
  });
  const targets = [];
  while (walker.nextNode()) targets.push(walker.currentNode);

  let count = 0;
  for (const node of targets) {
    const frag = document.createDocumentFragment();
    for (const part of node.nodeValue.split(pattern)) {
      if (!part) continue;
      if (words.includes(part)) {
        const mark = document.createElement("mark");
        mark.className = "kw-hl";
        mark.textContent = part;
        frag.append(mark);
        count++;
      } else {
        frag.append(document.createTextNode(part));
      }
    }
    node.replaceWith(frag);
  }
  console.log(`[業務ちょい便利ツール] ${count}件ハイライトしました`);
})();

mark.kw-hl { background: #ffe066; color: inherit; padding: 0 2px; border-radius: 3px; }

// インストール直後に、定型文とキーワードの初期値を入れておく
const DEFAULTS = {
  templates: [
    { label: "お礼", text: "お世話になっております。ご連絡ありがとうございます。" },
    { label: "日程調整", text: "下記の日程でご都合のよい時間をお知らせください。" }
  ],
  keywords: ["至急", "締切", "要確認"]
};

chrome.runtime.onInstalled.addListener(async ({ reason }) => {
  if (reason !== "install") return; // 更新時はユーザーの設定を上書きしない
  await chrome.storage.sync.set(DEFAULTS);
  console.log("初期設定を保存しました", DEFAULTS);
});

<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><title>設定</title></head>
<body>
  <h1>設定</h1>
  <label>定型文（1行に「ボタン名|本文」）<br>
    <textarea id="templates" rows="8" cols="60"></textarea></label>
  <label>ハイライトするキーワード（1行に1つ）<br>
    <textarea id="keywords" rows="5" cols="60"></textarea></label>
  <p><button id="save">保存</button> <span id="msg"></span></p>
  <script src="options.js"></script>
</body>
</html>

const $ = (id) => document.getElementById(id);

async function load() {
  const { templates = [], keywords = [] } = await chrome.storage.sync.get(["templates", "keywords"]);
  $("templates").value = templates.map((t) => `${t.label}|${t.text}`).join("\n");
  $("keywords").value = keywords.join("\n");
}

$("save").addEventListener("click", async () => {
  const templates = $("templates").value.split("\n")
    .map((line) => line.split("|"))
    .filter(([label, ...rest]) => label.trim() && rest.length)
    .map(([label, ...rest]) => ({ label: label.trim(), text: rest.join("|").trim() }));
  const keywords = $("keywords").value.split("\n").map((s) => s.trim()).filter(Boolean);
  await chrome.storage.sync.set({ templates, keywords });
  $("msg").textContent = "保存しました";
});

load();

javascript:(()=>{const t=document.title.replace(/([\[\]])/g,"\\$1");navigator.clipboard.writeText(`[${t}](${location.href})`).then(()=>alert("コピーしました"),()=>alert("コピーできませんでした"));})();