Chromeの拡張機能を使って共同運営マガジンのランキングを生成ＡＩに作らせる（２）
本稿は次の投稿の続編です。
前回は次のような（能天気な）フレーズを書きましたが…
そこで、今回と次回の２回で、前回の記事の「迷惑をかけずに共同運営マガジンの情報をゲット」の手仕事を、ブラウザーに押し付ける拡張機能を生成ＡＩに作ってもらうことにしました。じぃじが試してみたところ、動いてるところが実感できて結構感動ものでした。是非お試しを！！
この投稿後の１ヶ月間、実はのたうち回っていました😛
正直「プロンプトがまともに描ければ動くコードがサクッとできる」と考えていたじぃじが愚かでした。確かにプロンプトに書いた（ような）コードは生成されるのですが…細かいところがダメダメなんですね。プロンプトでの表現を調整しながら何度と無くトライしたのですが欲しいコードは仕上がらない。生成されたコードを見るとちょっと書き換えれば済むことなんですが、その「ちょっと書き換え」をプロンプトで指示しようとするとメッチャ大変でねぇ。
ということで…
今回はノーコードのアプローチを断念して、ChatGPTが生成してくれたコードを「ちょっと書き換え」て仕上げたいと思います。
まずは前回のおさらいから
そもそも前々回の記事で「NOTEのAPIを頻繁に呼び出すとエラーになる」と説明したことから、運営に迷惑をかけずに共同運営マガジンの情報を取得する手段として「（１）APIの呼び出しはブラウザーに任せて、（２）共同運営マガジンの情報をファイルに保管する」という２段構えの方法を捻り出しました。
前回の記事では（１）の部分に相当する次のプロンプトで書いてみました。
次のような Chrome の拡張機能を作って
* 複数のURLが記述されているCSVファイルを受け付ける
* CSVファイルの各行ごと順次次の処理を行う
+ １カラム目の文字列をチェックしURLでなければメッセージを表示して処理をスキップする
+ 新しいタブを開いて１カラム目のURLのコンテンツを表示する
+ URLの表示が完全に終了してから次のタブを作成するようにするで、ChatGPTにこのプロンプトをコピペすれば、Chromeの拡張機能の４つのコード（manifest.json、popup.html、popup.js、background.js）がサクッと生成されました。ファイルに格納されている URL を１つずつ取り出しながらタブを開いていく比較的簡単な処理でした。（詳しくは前回の記事をご覧ください）
プロンプトで記述する今回の処理は
今回は（２）に相当する処理を次のプロンプトで記述しました。
次のような Chrome の拡張機能を作って
* 現在のウィンドウの全てのタブを走査して次の処理を同期的に実行する
+ タブが「新しいタブ」の場合はスキップする
+ タブが表示しているURLをリストに追加する
+ タブが表示しているコンテンツをテキストとしてローカルファイルに保存する
+ 保存に失敗した場合は実行停止する
+ 保存に成功した場合はタブをクローズする
* 各タブのURLを集めたリストをCSVファイルとして保存このプロンプトをChatGPTにコピペすると次の４つのコードが生成されます。まずは manifest.json です。
{
"manifest_version": 3,
"name": "Tab Content Saver",
"version": "1.0",
"permissions": [
"tabs",
"activeTab",
"scripting",
"downloads"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"host_permissions": [
"<all_urls>"
]
}次は popup.html。
<!DOCTYPE html>
<html>
<head>
<title>Tab Content Saver</title>
<style>
body {
min-width: 200px;
text-align: center;
font-family: Arial, sans-serif;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Save Tabs</h2>
<button id="save-tabs">Save and Close All Tabs</button>
<!-- 外部スクリプトを読み込む -->
<script src="popup.js"></script>
</body>
</html>さらに popup.js 。
document.getElementById('save-tabs').addEventListener('click', async () => {
chrome.runtime.sendMessage({ action: "saveTabs" });
});最後にbackground.js。
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "saveTabs") {
// タブの保存処理をここで実行
saveTabs();
sendResponse({ status: "Tabs saved and closed" });
}
return true; // 非同期のレスポンスを返すため
});
// タブを保存する処理
async function saveTabs() {
// タブの情報を取得
let tabs = await chrome.tabs.query({ currentWindow: true });
let urlList = [];
for (let tab of tabs) {
if (tab.url === 'chrome://newtab/' || tab.url === '') {
// 新しいタブの場合はスキップ
continue;
}
try {
// タブの内容を取得
const tabContent = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => document.documentElement.innerText // ページの全テキストを取得
});
const content = tabContent[0].result;
const filename = `tab-content-${tab.id}.txt`;
// コンテンツをファイルに保存 (chrome.downloads API を使用)
chrome.downloads.download({
url: 'data:text/plain;charset=utf-8,' + encodeURIComponent(content),
filename: filename
});
// URLをリストに追加
urlList.push(tab.url);
// タブを閉じる
await chrome.tabs.remove(tab.id);
} catch (error) {
console.error(`Error saving tab ${tab.id}:`, error);
break; // エラーが発生した場合、処理を停止
}
}
// URLリストをCSV形式で保存
if (urlList.length > 0) {
const csvContent = urlList.join('\n');
chrome.downloads.download({
url: 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent),
filename: 'tab-urls.csv'
});
}
}この４つのコードにより Chrome の拡張機能 "Tab Content Saver" が実現されます…が、実はコードをそれなりに動作させるためには ChatGPT と少々のやり取りする必要がありました。上記のコードはやり取りの結果を反映したものですが、コードの使い方も含め、詳しくはこちらをご覧ください。
日夜進化していると言われる生成ＡＩでも、やはり要求が少し難しくなってくると正しく動くコードを１発で生成するのは難しいようですねぇ。
生成されたコードを（止む無く）手で直す
ここから先は
¥ 300
この記事が参加している募集
この記事が気に入ったらチップで応援してみませんか？