はじめてのAIコーディングーChrome拡張機能をAIで実装してみた

本記事はデザインウィーク2026 4日目の記事です。
🎨 3日目 ▶▶ 本記事 ▶▶ 5日目 🖼️

こんにちは。フロントエンドエンジニアの渡部です。
2年ぶりの執筆となります。

前回の記事を「その1」としており、「その2」もいずれ書こうと思っていましたが、機能の追加がなかなか進んでいないため、今回は別テーマのお話となります。
tech.nri-net.com

はじめに
拡張機能について
- 拡張機能の作り方
つくったもの
AI使ってみての感想
おわりに

はじめに

昨今、AIを業務に活用する流れが拡がっていますが、私の場合は、自身の業務への利用は限定的なものとなっていました。
特にコーディングに関しては、可読性や品質の観点からAIを完全には信頼できず、活用が進んでいませんでした。
今後は活用を進めていきたいと考えており、今回のブログ執筆を機にAIによるコーディングを試してみることにしました。

拡張機能について

今回のテーマはChrome拡張機能の実装としました。
最近、拡張機能を作る機会があり、ある程度の知見を得ていたため、イチから自作した場合とAIでコーディングした場合を比較できる点を重視して選びました。

本章では、拡張機能について説明したいと思います。
拡張機能は、業務効率化などを目的としてブラウザに追加できるアプリケーションのことを指します。
ブラウザのヘッダー部から確認することができると思います。

拡張機能の作り方と作った拡張機能のインストール方法について紹介したいと思います。

拡張機能の作り方

1. `manifest.json`ファイルの準備

開発用にフォルダを作成し、そのフォルダルートディレクトリへmanifest.jsonという名称でファイルを準備します。
この内容は今回作成した拡張機能で作ったファイルになります。

  {
    "manifest_version": 3,
    "name": "URL Saver",
    "version": "1.0",
    "description": "現在のタブのURLを保存・復元する拡張機能",
    "permissions": [
      "tabs",
      "storage"
    ],
    "action": {
      "default_popup": "popup.html",
      "default_title": "URL Saver"
    },
    "background": {
      "service_worker": "background.js"
    }
  }

必須項目は以下の3点で、そのほかの項目は必要に応じて設定します。

"manifest_version"
"name"
"version"

詳しくは、公式サイトをご確認ください。
マニフェストファイル形式 | Manifest | Chrome for Developers

2. `manifest.json`ファイルに記載したファイルの作成

例示したmanifest.jsonでいうと、popup.htmlとbackground.jsの2ファイルです。必要に応じてpopup.htmlで使用するjsファイルやcssファイルも作成します。ここまでで必要なファイルの作成は完了です。

3. ブラウザへの登録

Chromeでchrome://extensions/を開きます
「デベロッパーモード」をONにします
「パッケージ化されていない拡張機能を読み込む」を選択します
manifest.jsonファイルを配置している開発用のフォルダを選択します

以下キャプチャでいうとURL_saver 5. 拡張機能が追加されます

つくったもの

以下のものを実装しました。

AIツールは Claude Haiku 4.5を使用しました。
所属の部署で契約しているAIツール（GPT、Gemini、Claude）の中で、コーディングに最も適していると判断したためです。
AIの利用は「拡張機能の作り方」における手順1～2で使用していました。

Chromeで現在表示中のタブのURLを保存する機能と保存したURLをタブへ展開する機能を実装しました。
日頃の業務で以下のような機能が欲しいと思うことが何度かあり、今回実装にあたりました。

始業時など定常業務を行ううえで複数のページを一括で開きたい
シャットダウンしないといけないけれど開いているタブは残しておきたい

使い方としては、追加したいグループ名を選択（新規グループに追加したい場合は新しいグループ名を入力する）し、保存ボタンをクリックすることでURLが保存されます。
機能面のポイントとして保存対象も全てのタブと表示中のタブ1つから選ぶことができ、グルーピング機能を備え付けたので、目的に応じて管理するURLを分けることができます。