ChatGPTにChrome拡張を作ってもらった

Mar 19, 2023 23:00 · 2858 words · 6 minute read AI Chrome ChatGPT

ChatGPTなどのAI系サービスが大注目されています。
「ChatGPT」「Bing AI」「Bard」「Notion AI」などなど、続々と発表されるAI系サービスのニュースを目にした方も多いのでは無いでしょうか。

今回、「いつか作りたいな」と思いつつも後回しになっていたChrome拡張機能をChatGPTに作ってもらったので、うまくいかなかった点や今後の活用案をブログに残しておこうと思います。

目次

ChatGPTとは

ChatGPTは、OpenAI社が開発しているAIチャットシステムです。 テキストで質問を渡すと、AIが自然な文章で回答を生成します。 回答内容はAIの学習済みデータと利用者のインプットしたデータから生成されており、学習時点以降に発表されたデータには対応していません。

2023年3月時点では、GPT-3・GPT-4という言語モデルを採用しており、人間が作ったような自然な文章を作れます。
GPT-3では、約45TBの大規模なテキストデータを使って約1750億個のパラメータを作成しているそうです。 学習したデータを使い、特定の単語の次に来る単語を高い精度で予測することで自動的に文章を作成しているのだとか。
GPT-4では言語処理の能力が大幅に向上しています。更に、テキストデータだけでなく画像データも扱えるようになりました。

個人的には、昔から人工知能の分野で言われていた「エキスパートシステム」のインプットとアウトプット部分が超絶進化したもの、という印象をもっています。

人工知能の歴史やエキスパートシステムの解説は、この本が面白かったです。

人工知能は人間を超えるか ディ-プラ-ニングの先にあるもの /ＫＡＤＯＫＡＷＡ/松尾豊
posted with カエレバ
楽天市場
Amazon

賢いだけじゃないChatGPTの魅力

ただ賢いだけでなく、微妙に”ヌケている”ところも人々を惹きつけているのではないでしょうか。 ChatGPTは、正しい情報の中にしれっとそれっぽい嘘を紛れ込ませます。 間違いを指摘すると「すみません。先程の回答に間違いがありました。」と謝りつつも、次の回答でも結局間違っていることも。

例えば、
「神戸でランチに行きます。おすすめの店を教えて下さい。予算は1000円です。」
と質問すると、非常に本物っぽいお店の紹介文とともに架空の店舗名とURLを回答しました。

「その店は存在しません。もう一度確認してください」と伝えると、今度は実在する別の店の食べログURLを回答します。 万能ではないことが垣間見えて少し安心したりもしますが、改善されるのも時間の問題でしょう。

柔軟なインプットとアウトプット

インプットに対して、かなり柔軟に対応をしてくれるのも興味深い点です。
これまでは簡単なデータ作成や形式の変更などを書き捨てスクリプトを作って対応していましたが、これからはChatGPTにお願いしてもいいかもしれません。

例: ChatGPT/GPTでTypeScriptを逐次実行させる (zenn.dev)

ChatGPTはプログラムも書けるので、ちょっとした書き捨てスクリプトはChatGPTに作ってもらうような使い方もできるでしょう。

作ってもらったChrome拡張機能

今回ChatGPTに作ってもらった拡張機能がこちら。

kapiecii/copy-url-link: Copy the URL of the current tab in the browser in link format. (github.com)

Microsoft Edgeの「ブラウザのアドレスバーのURLをコピーするとテキストリンク形式でクリップボードに保存される」という機能を代替する拡張機能です。 Chromeに拡張機能として読み込み、拡張機能のアイコンをクリックすると現在表示しているタブのリンクを表示します。

manifest.json

{
  "manifest_version": 3,
  "name": "copy-url-link",
  "version": "1.0",
  "description": "Copy URL in link format",
  "icons": {
    "16": "icon.png",
    "32": "icon_32.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>copy-url-link</title>
  <style>
    body {
      width: 500px;
      font-size: 11pt;
    }
  </style>
</head>
<body>
  <h1>current page URL link:</h1>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

popup.js

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  let tab = tabs[0];
  let title = tab.title;
  let url = tab.url;
  document.getElementById('url').innerHTML = '<a href="' + url + '">' + title + '</a>';
});

AIにプログラムを作ってもらう難しさ

ChatGPTに伝えた仕様の初版がこちら。

Chromeブラウザの拡張機能のJavaScriptのコードを書いてください。

仕様

  1. 「Ctrl + l」でアドレスバーをアクティブにします
  2. 「Ctrl + c」でURLをコピーします
  3. コピーしたURLをhtmlの<title>タグのテキストのテキストリンクとしてクリップボードに保存します

この内容でもそれっぽいソースコードを出力してくれましたが、「Chrome APIの使い方の誤り」や「JavaScriptの文法エラー」、「manifest.jsonの誤り」がありました。

「JavaScriptの文法エラー」や「manifest.jsonの誤り」は「OOというエラーが出ます。修正してください」と伝えると、ある程度修正してくれます。 しかし、Chrome APIの使い方についてはChatGPTにお願いしただけでは修正できませんでした。

「プログラミング言語の一般的なエラーはある程度修正できるが、特定環境のエラー修正は難しそう」という印象です。

ChatGPTへの依頼文を何度か修正し、最終的には下記の仕様を伝えました。

Chrome拡張機能を作ります。 現在表示しているタブのURLと<title>の内容を使います。 拡張機能のアイコンをクリックするとpopup.htmlを開き、popup.htmlで現在のページタイトルをリンク形式で表示します。 リンクのURLは現在表示しているタブのURLです。

javascriptとmanifest.jsonを書いてください。 manifest version3を使ってください。

実装するファイル名や使う関数をある程度明確に伝えつつ、実装内容をシンプルにすると成功率が高まりそうです。

ただ、それでもなお完璧に希望通りのプログラムが出力されるわけではないので、最終的には自分でHTML、JavaScript、CSSを微調整しました。

最後に

今回の試行を通して、仕様を意図したとおりにAIに伝える難しさを感じました（AIに限った話ではなく、人間に伝えるときも同じことが言えますが）。

とはいえ、ちょっとしたプログラムであれば8割くらいの完成度で出力してくれそうです。 AIが出力したプログラムをベースに人間が最後の仕上げをすることで、簡単なスクリプトを手早く作れるかもしれません。

というわけで、今の時点ではAIは人間のエンジニアの仕事を奪うわけではなさそうです。 むしろ人間の業務効率化を加速するのではないでしょうか。

また、AIはしれっと間違った内容を返すので、パフォーマンスやセキュリティの要件がシビアなシステムに使うのも、まだまだ怖いです。 継続して改善運用が必要なシステムの対応も、AIには難しいでしょうね。

Chat AIの面白い使い方が日々生み出されているので、このビッグウェーブを一緒に楽しみたいと思います。

tweet Share