【ChatGPT制作術を実践】Chrome拡張機能を自作する

先日、ChatGPTやアフィリエイトに便利なChrome拡張機能を紹介する記事を書きました。

【1つは入れておきたい！】ChatGPTの便利な拡張機能53個まとめ

【2023年最新】アフィリエイトの効率化に役立つGoogle Chrome拡張機能8選

その流れで、今度はChrome拡張機能を自作してみることにしました。

流行に倣い、ChatGPTに聞きながら制作することでChatGPTのポテンシャルも測ってみることにしました。

結果としては簡単な機能であれば自作できることが判明したので、作成時の注意点も含めて紹介していきます。

また、今回はChatGPTのポテンシャルを検証する内容でもあるため、あえてChrome拡張機能の公式ドキュメントは読まずに制作してみることとします。

事前確認をする

どのような言語で作成されているのか

制作にあたり、使用したことがない言語が必要なのであれば学習コストがかかりますので、まずはChrome拡張機能の作成に必要な言語を調べます。

HTMLとCSSとJavaScriptで作成可能とのことだったので、もしかしたら簡単な機能であればそこまでハードルが高くないのかもしれません。

どのようなファイル構成になるのか

UnityなどのゲームエンジンやiOSのアプリ、WordPressの自作テーマなどにみられるような、「プラットフォームにアップロードすることで機能が利用できるようになる仕組み」では、最低限必要になるファイルが決められている場合が多いです。

必要ファイルが用意できずに拡張機能が動かないといった場合を避けるため、確認します。

特徴的なファイルはmanifest.jsonというjsonファイルでした。

こちらはmanifest.jsonという名前が固定であり、必須ファイルです。

jsonファイルとは、情報をまとめておいたり、システムの設定をしたりする場合に使われることが多いファイルを指し、JavaScriptで使われることが多いファイルです。

manifest.jsonの例を見ておく

必須ファイルには書き方のルールがある場合があります。

事前にこちらを確認しておきます。

{
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my awesome extension.",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    },
    "default_title": "My Extension",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "author": "Your Name",
  "homepage_url": "https://example.com/my-extension",
  "default_locale": "en"
}

予想通り、名前の記述やバージョンの記述箇所などがありました。

「条件に合わせてカスタマイズ」と書いてあるので、条件次第で記述が必要になる項目が変更するだろうと思われます。

こちらは制作しながら検証していく必要がありそうです。

どのような手順で作成するのか

作成手順の全体像を確認しておくことで、具体的な作業内容を想像することができます。

こちらもChatGPTに確認しておきます。

以上のChatGPTの回答の6以降はChromeに登録して配布していく手順でしたので、今回は自分専用の拡張機能を作成する目的であるため割愛させていただきます。

これで全体の流れが把握できました。

どのような機能にするのか

どのような拡張機能にするのか、具体的な機能を考えます。

今回制作するのは、「検索エンジンで検索した際、検索結果のタイトルだけが1箇所に一覧で表示される」という機能にしました。

具体的には、検索結果のタイトルを全て取得し、リンク付きの一覧にして表示する機能を作成します。

実際に作ってみる

ここからは実際に作ってみます。

まずは今までの情報から考えられる、最適なプロンプトをChatGPTに投げます。

この際、ChatGPTから返してもらう回答をなるべく少なくすることが重要です。

一度の回答が長くなってしまう場合、途中で回答が途切れてしまうだけでなく、回答の精度も落ちてきてしまうからです。

manifest.jsonを作成

ChatGPTに仕様を伝え、manifest.jsonの書き方から教えてもらいます。

{
  "manifest_version": 2,
  "name": "Google検索結果リスト",
  "version": "1.0",
  "description": "Google検索結果のタイトルを取得し、リストに表示します。",
  "permissions": [
    "https://www.google.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/*"
      ],
      "js": [
        "contentScript.js"
      ]
    }
  ],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

上記から推察すると、この機能でChrome拡張機能を作成する場合、必要になるファイルは

・manifest.json
・content.js
・icon_16.png
・icon_48.png
・icon_128.png

の以上5つになります。

アイコンの画像に関しては、それぞれ16×16、48×48、128×128のサイズ違いの同じ画像があれば大丈夫です。

manifest.jsonはコピペし、画像ファイルも作成し終えたら、次に進みます。

contentScript.jsを作成

manifest.jsonに記述されていたcontentScript.jsを作成します。

// 検索結果のタイトルとリンクを取得する関数
const getSearchResults = () => {
  const results = [];
  const searchResults = document.querySelectorAll('.g');

  searchResults.forEach((result) => {
    const titleElement = result.querySelector('h3');
    const title = titleElement ? titleElement.textContent : "";
    const linkElement = result.querySelector('a');
    const link = linkElement ? linkElement.href : "";
    results.push({ title, link });
  });

  return results;
};

// リストアイテムをクリックした際にリンクに飛ぶイベントを設定する関数
const setLinkClickEvent = (item, link) => {
  item.addEventListener('click', () => {
    window.location.href = link;
  });
};

// リストを表示する関数
const displayList = (results) => {
  const listContainer = document.createElement('div');
  listContainer.style.background = '#f5f5f5';
  listContainer.style.padding = '10px';
  listContainer.style.position = 'fixed';
  listContainer.style.top = '3px';
  listContainer.style.right = '3px';
  listContainer.style.zIndex = '9999';

  const ul = document.createElement('ul');

  results.forEach((result) => {
    const li = document.createElement('li');
    const link = document.createElement('a');
    link.textContent = result.title;
    link.href = result.link;
    setLinkClickEvent(li, result.link); // リンククリックイベントを設定
    li.appendChild(link);
    ul.appendChild(li);
  });

  listContainer.appendChild(ul);
  document.body.appendChild(listContainer);
};

// ページのロードが完了したら実行する
window.addEventListener('load', () => {
  const searchResults = getSearchResults();
  displayList(searchResults);
});

こちらもコピペで問題ありません。

基本的にはこれで作業終了です。

自作の拡張機能として読み込ませる

作成を終えたら、Chromeにアップロードをします。

アップロードには手順の段階で記述されていた【chrome://extensions/】にアクセスします。

画面左上の「パッケージ化されていない拡張機能を読み込む」を選択し、作成したフォルダを1つのフォルダにまとめて読み込みます。

このとき、問題がある場合は読み込みが正しく行われずにエラーの表示が出ます。

エラーの原因は記述されていますので、その通りにエラーを解消します。

エラー例としては、manifest.jsonに記述されているアイコンのファイル名がicon16.pngなのに対して、実際に用意しているファイルがicon-16.jpgになっていたりする場合です。

エラーの対応をする

ファイルが読み込まれたあと、以下のようにエラーが表示されていました。

内容を確認してみると、

とのことでした。

バージョン2はすでにバージョン3に移行しており、2023年には削除されるとのことです。

バージョン3の情報に関しては、現在のChatGPTの学習期間より新しい情報であるため、単純にGoogleで検索して情報を集めることとなりました。

調べた結果として、manifest.jsonの記述方法がいくつか変更されているようです。

まずはmanifest_versionの部分を2→3に変更します。

"manifest_version": 3,

その後、拡張機能の管理画面でエラーを削除→更新ボタンで拡張機能を更新します。

更新したところ、次は以下のエラーが出てきました。

こちらは調査の結果、manifest.jsonのpermissions部分をhost_permissionsに変更することでversion3に対応できました。

テスト表示をする

ここまででエラーが表示されなくなりましたので、実際に検証してみます。

検索ワードはなんでもいいのですが、今回は「Chrome 拡張機能」と検索してみます。

すると、検索結果画面の右上に、リストとなったタイトルを確認することができました。

contentScript.jsファイルに記述されているstyle部分を追記することで、見た目を好みに調整することができます。

これで自分専用のChrome拡張機能が完成しました。

まとめ

通常のGoogle検索での情報収集が必要になった箇所はありましたが、内容のほとんどはChatGPTだけで拡張機能を作成することができました。

最新の情報が手に入らないという点は、「WebChatGPT」という最新のWeb情報を収集してから回答する拡張機能を入れることで多少改善します。

また、そのようなChatGPTに使える便利な拡張機能をまとめた記事もありますので、こちらもぜひ読んでみてください。

【1つは入れておきたい！】ChatGPTの便利な拡張機能53個まとめ

ChatGPTを利用して簡単な拡張機能が作れるようになれば、より複雑な拡張機能を作れるようにもなっていきます。

Chrome拡張機能が自作できれば、汎用的なスキルとして様々なビジネスに応用できそうです。