ChatGPTにChrome拡張機能を作らせてみた

はじめに

イタンジ株式会社の佐藤です。新卒で入社して、更新退去くんという管理会社向けのSasSを開発しています。
今回は最近流行りのChatGPTを使用して、Chrome拡張機能を作らせてみようかと思います！
ChatGPTに関しては少し触ったくらいで、あまり使いこなせていないので体験談的なブログだと思って読んでもらえると幸いです！

作らせる拡張機能のお題

では本題に入りたいと思います。
まず、どういった題材で作らせるかを考えないといけないですが、
正直どこまでできるのか分からないので、めちゃくちゃ簡単なお題にしようと思います。

今回はGoogleChrome公式が公開しているサンプルの拡張機能の内「Hello Extensions」と同じような機能を作らせようかなと思います。
（拡張機能を実行（クリック）したら、ポップアップで「Hello」と表示させるだけの機能です）

https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/hello-world

ChatGPTに依頼してみる

まずは以下にアクセスします。（アカウントが必要です）

https://chat.openai.com/chat

いざ、依頼してみます!
（質問の文章が所々おかしいのは、ご容赦下さい、、あんまり考えずに入力してました）

1. 「Hello」という文字をpopupで表示するchrome拡張機能作る際のコードを教えて

おお、popup.htmlは良さげ（若干コードのヘッダーにphpって出てるの気になるけど、） manifest.jsonはManifest V2としては問題なさそうだが、正直 V3で出力して欲しかった、、
というのも、Manifest V2は段階的に廃止される予定だからですね。（https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/）

そこで、「Manifest V3」の仕様で直してもらいましょう！

2. manifest_versionは2じゃなくて3の仕様でmanifest.jsonを作り直して

差分は以下

{
  - "manifest_version": 2,
  + "manifest_version": 3,
  ...
}

あ、これは質問が悪かったせいかも、、
というのも、V2 から V3 に移行する際に仕様が変わるので、それも含めて変更して欲しかったんですよね。（https://developer.chrome.com/docs/extensions/mv3/mv3-migration/）

今回はbrowser_action => actionに変更して欲しかったのです。

ここで、直接actionに変更してと依頼してもいいのですが、せっかくなのでちょっとボカして依頼してみます。

3. manifest_versionを3だとbrowser_actionは使えないから、使えるキーに直したプログラミングコードを教えて

差分は以下

{
  ...
  - "browser_action": {
  + "browser_actions": {
  ...
}

期待外れな回答が来てしまいました、、

・ChatGPT
「 Google Chrome の manifest v3 では browser_action キーが使用できないため、代わりに browser_actions キーを使用することが推奨されます。」

上記のようにChatGPTはおっしゃてますが、公式ドキュメントによるとactionに統合したと記載されているので間違ってますね。
ただ、いざ断言されると心配になるもので一応browser_actionsについても調べてみました。

Chrome Developersの上のSearchバーで「browser_actions」で検索してみると、browser_actionsについて言及しているドキュメントを見つけることができました。
そのドキュメントで記載されている内容を引用すると、

The browser_actions key in the manifest, and the chrome.browserActions API are gone. Use the singular browser_action and chrome.browserAction instead.

とあり、Manifest V1の時に存在しており、V2から廃止されたものらしいですね。

さて、疑問も解消できたので、本題に戻りましょう。
正直このままだと埒が明かないと思うので、直接間違いを正してあげましょう！

4. browser_actions キーじゃなくて、actionキーだと思います！

差分は以下

{
  ...
  - "browser_actions": {
  + "actions": {
  ...
}

actionだと思うって言ったのに、なんでsをつけてactionsにしてしまうんだ、、！
聞き分けが悪い子ですね。
もう一度訂正してみましょう

5. `actions` キーではなく、`action`キーだと思います

差分は以下

{
  ...
  - "actions": {
  + "action": {
  ...
}

おお、これでやっと上手く動作しそうですね！

ChatGPTの成果物

最終的な成果物を記載しておきます。

manifest.json

{
  "manifest_version": 3,
  "name": "Hello Popup",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
<head>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        padding: 1em;
      }
    </style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>