chromeExtensionの雛形をCline+Claudeで作ってもらった

background.js

// メッセージリスナーを設定
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "openUrl" && request.url) {
    // 新しいタブでURLを開く
    chrome.tabs.create({ url: request.url });
  }
});

content.css

/* メインボタンのスタイル */
.url-generator-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.url-generator-button:hover {
  background-color: #45a049;
}

/* 入力フォームのコンテナ */
.url-generator-container {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 300px;
  padding: 16px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  display: none;
}

/* テキストボックスのスタイル */
.url-generator-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/* 生成ボタンのスタイル */
.url-generator-submit {
  width: 100%;
  padding: 8px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.url-generator-submit:hover {
  background-color: #1976d2;
}

content.js

// メインボタンとフォームコンテナを作成
function createElements() {
  // メインボタン
  const button = document.createElement("button");
  button.className = "url-generator-button";
  button.textContent = "URL Generator";
  document.body.appendChild(button);

  // フォームコンテナ
  const container = document.createElement("div");
  container.className = "url-generator-container";

  // テキストボックス
  const input = document.createElement("input");
  input.type = "text";
  input.className = "url-generator-input";
  input.placeholder = "Enter text...";
  container.appendChild(input);

  // 生成ボタン
  const submit = document.createElement("button");
  submit.className = "url-generator-submit";
  submit.textContent = "作成";
  container.appendChild(submit);

  document.body.appendChild(container);

  return { button, container, input, submit };
}

// URLを生成する関数（ダミー実装）
function generateUrl(text) {
  // ダミーのURL生成ロジック
  return `https://example.com/search?q=${encodeURIComponent(text)}`;
}

// イベントリスナーの設定
function setupEventListeners(elements) {
  const { button, container, input, submit } = elements;

  // メインボタンクリックでフォーム表示/非表示を切り替え
  button.addEventListener("click", () => {
    const isVisible = container.style.display === "block";
    container.style.display = isVisible ? "none" : "block";
  });

  // 生成ボタンクリックでURLを生成して新しいタブで開く
  submit.addEventListener("click", () => {
    const text = input.value.trim();
    if (text) {
      const url = generateUrl(text);
      // Background Scriptに新しいタブでURLを開くように要求
      chrome.runtime.sendMessage({ action: "openUrl", url });
      container.style.display = "none";
      input.value = "";
    }
  });

  // Enterキーでも送信可能に
  input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      submit.click();
    }
  });
}

// 初期化
const elements = createElements();
setupEventListeners(elements);

manifest.json

{
  "manifest_version": 3,
  "name": "URL Generator Extension",
  "version": "1.0",
  "description": "Generate and open URLs based on user input",
  "permissions": ["tabs"],
  "action": {},
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["content.css"],
      "js": ["content.js"]
    }
  ],
  "icons": {}
}

プロンプト

画面上にボタンを配置する。ボタンを押すと、画面右上に枠を表示すル。枠にはテキストボックスと「作成」ボタンが表示される。テキストボックスに入力した値を元にURLを組み立てて、生成ボタンを押すとそのURLを別ブラウザで開く。URL生成のルールは一旦ダミー実装でOK