デバイスソフトウエア開発部の板谷です。
最近Chrome拡張機能の改修業務を担当する機会がありました。
Chrome拡張機能の開発経験はなく、時間がかかりそうだと思っていたところGoogleが開発した生成AI『Gemini』で業務を効率化することができたので本記事で紹介しようと思います。
はじめに
改修を任されたものは全社的に使用されている業務効率化ツールでした。
依頼内容が
「Manifest V2がサポート対象外になるので、V3へマイグレーションしてほしい」
というもの。
…何やら難しそうな作業です。
ひとまず、Chrome拡張機能とManifest V2・V3について調べてみます。
Chrome拡張機能って？
Chrome拡張機能は、Chromeブラウザの機能を拡張し、より便利にカスタマイズできる小さなプログラムです。
JavaScript、HTML、CSSファイルと、拡張機能の設定やメタデータを記述するmanifest.jsonという設定ファイルで構成されており、インストールすることで様々な機能を追加できます。
Manifest V2・V3って？
manifest.jsonという設定ファイルのバージョンのことで、現在の主流はManifest V3です。
Manifest V2は段階的に廃止されており、サポート終了が迫っている状況でした。
引き続き拡張機能を使用するには、Manifest V3への移行が必須になります。
Geminiと一緒にマイグレーションしてみよう
改修業務を担当する少し前、弊社が利用しているGoogle WorkspaceにGoogleが開発した生成AI『Gemini』が導入されました。
企業向けの契約のため入力した情報を学習しないとのことで、改修対象のソースコードを渡すこともできます。
私の所属するチームでも使用率が高まっていたため、この波にのって私も使ってみることにしました。
公式のChrome Developersサイトにある「Manifest V3への移行ガイド」とGeminiを片手に改修作業を進めていきます。
使用してみた所感
作業効率があがったなと個人的に感じた点は2つありました。
Geminiとのやり取りも合わせて紹介します。
※プロンプトに入力したソースコードは本記事向けに編集しています。
1.実現したいことに対して具体例を出してくれる
マイグレーション作業のひとつに、廃止されたChrome拡張機能のAPIの置き換えがあります。
例えば、chrome.extensionにはgetBackgroundPageメソッド。
現在の拡張機能内で実行されているバックグラウンドページのJavaScriptのwindowオブジェクトを返すものですが、Manifest V3では廃止されてしまうため修正が必要でした。
getBackgroundPageメソッドを使用している周辺のソースコードを読み進めた結果、
「こうしたい」というイメージはできても具体例にどう修正すれば実現できるか？まではぱっと思いつきません。
理解を助けてくれる・修正案のベースになるようなサンプルコードがあればと思い、Geminiに質問することにしました。
修正したいソースコードを添えて、Geminiのプロンプトに次のように入力します。
Chrome拡張機能の質問です。
現在、Manifest V2で開発されたアプリケーションをManifest V3にマイグレーションする作業を進めています。
下記のソースコードをchrome.extension.getBackgroundPage()を使用しないManifest V3向けの実装に修正してください。
|
1 2 3 |
chrome.extension.getBackgroundPage().setData(_text.val(), function(){ alert("入力フォームにペーストしました"); }); |
Geminiの回答がこちら。
修正後のソースコードを提示し、修正内容の説明もしてくれます。（解説は長くなるため割愛）
今回の例だと、getBackgroundPageメソッドでバックグラウンドのwindowオブジェクトを取得してバックグラウンドが持つメソッドを実行していた箇所をメッセージパスを通じて実行するように修正する必要がありました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 修正後のソースコード $("#effectBtm").click(function() { chrome.runtime.sendMessage( action: "setData", formData: _text.val() }, function(response) { if (response && response.success) { alert("データをセットしました。"); } else { console.error("データの送信に失敗しました:", response ? response.error : "不明なエラー"); // エラー処理を追加 } }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// サービスワーカー (background.js など) のコード例: chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.action === "setData") { setFormData(request.formData, sendResponse); return true; // 非同期応答を返す場合はtrueを返す } }); function setData(formData, sendResponse) { // dataを使用して必要な処理を行う（例：ローカルストレージに保存） chrome.storage.local.set({ formData: formData }, function() { if (chrome.runtime.lastError) { sendResponse({ success: false, error: chrome.runtime.lastError.message }); } else { sendResponse({ success: true }); } }); } |
Geminiにはソースコードの一部しか渡していないため、実際の実装に合わせて微調整する必要がありますが修正のベースになるサンプルコードとしては十分です。
修正方法がわかったので、似たような処理になっている部分は時間をかけずに修正することができました。
2.エラーの解析・解決をサポートしてくれる
エラーメッセージとソースコードを渡すことで、原因の解析と解決策を提案してくれます。
デバッグ中に発生したエラーメッセージと該当箇所のソースコードをGeminiに渡します。
ManifestVのバックグラウンドスクリプトの以下のソースコードで「Unchecked runtime.lastError: Extensions using event pages or Service Workers cannot pass an onclick parameter to chrome.contextMenus.create. Instead, use the chrome.contextMenus.onClicked event.」というエラーがでました。解決策を教えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
chrome.contextMenus.create({ id: "checkTable", title: "テーブルをチェックする", contexts:["editable","page"], onclick: function(info, tab) { var obj = { "action": "checkTable" }; chrome.tabs.sendRequest(tab.id, obj,function(response){ returnFunc(response.value); }); } }); |
質問すると、Geminiから原因・解決策のコードと説明・注意点などが返ってきました。
長かったので要約すると、
・Manifest V3で導入されたService Workerではonclickプロパティを使用できないことが原因。
・chrome.contextMenus.onClickedイベントを使用してコンテキストメニューがクリックされたときのイベントをキャッチすることで解決できる。
ということでした。
Geminiで便利だなと思ったポイントは、回答の中で分からなかったことを質問するとそれ以前のやり取りでGeminiに渡した情報も考慮して回答してくれる点でした。
これは個人差があるかもしれませんが、プロンプトは会話っぽく書くことができるので質問したい内容を言語化しやすかったです。
おわりに
今回はChrome拡張機能のシステム改修をGeminiで効率化できた時の所感を紹介しました。
プロンプトを工夫すればもっと的確な回答を得ることができたり、Geminiにコーディングそのものを任せることもできるらしいです。
自分の業務に活かすことで生成AIの進歩を実感できました。
これからもGeminiを始めとるする生成AIを活用して業務効率化を図っていきたいと思います。
また、エコモットでは一緒にモノづくりをしていく仲間を随時募集しています。弊社に少しでも興味がある方はぜひ下記の採用ページをご覧ください。
