概要
開いている全タブの内容を一つのテキストの集約して生成AIに渡したい。
前回はデバッグ機能とPythonで実現したが、テキスト化までの操作が多く面倒だった。
今回はChrome拡張として作成し、対象のウィンドウで操作するだけで取得できるようにする。
既にそういう拡張があると思われるが、自作すればコードがわかっていて安全だし、Chrome拡張を作る勉強になる。
この記事では拡張機能作成から読み込みまでの流れを解説する。
今回のコードでできること
Chromeで複数のタブを開いている状態で今回の拡張を実行すると
mdファイルがダウンロードされ、
Chromeの全タブのURL一覧とそのURLの内容がひとつのテキストにまとまっている。
拡張機能作成
フォルダ構成に合わせて各ファイルを用意する。
フォルダ構成
tab-to-markdown-extension/
├─ manifest.json
├─ popup.html
├─ popup.js
├─ content.js
└─ readability.js
manifest.json
{
"manifest_version": 3,
"name": "Tab to Markdown Exporter",
"version": "1.0",
"description": "Open tabs → extract content → export Markdown",
"permissions": [
"tabs",
"scripting",
"downloads"
],
"host_permissions": [
"<all_urls>"
],
"action": {
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
width: 240px;
font-family: sans-serif;
}
button {
width: 100%;
padding: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<button id="export">Export Tabs to Markdown</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
document.getElementById("export").onclick = async () => {
const tabs = await chrome.tabs.query({ currentWindow: true });
let md = "# Open Chrome Tabs (Markdown Converted)\n\n";
// =========================
// URL List
// =========================
md += "## URL List\n\n";
tabs.forEach((tab, i) => {
md += `${i + 1}. [${tab.title || "No Title"}](${tab.url}) \n`;
});
md += "\n\n---\n";
// =========================
// 各タブ本文取得
// =========================
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
if (!tab.url || !tab.url.startsWith("http")) continue;
try {
const [{ result }] = await chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ["readability.js", "content.js"]
});
md += `\n\n---\n`;
md += `## ${i + 1}. ${result.title}\n`;
md += `- URL: ${tab.url}\n\n`;
md += `### ▼ Markdown Content\n\n`;
md += result.markdown + "\n";
} catch (e) {
md += `\n\n---\n`;
md += `## ${i + 1}. ${tab.title}\n`;
md += `- URL: ${tab.url}\n\n`;
md += `**[ERROR]** ${e}\n`;
}
}
downloadMarkdown(md);
};
function downloadMarkdown(text) {
const blob = new Blob([text], { type: "text/markdown" });
const url = URL.createObjectURL(blob);
chrome.downloads.download({
url,
filename: "tabs_output.md",
saveAs: true
});
}
content.js
(() => {
const article = new Readability(document.cloneNode(true)).parse();
if (!article) {
return {
title: document.title,
markdown: "_本文を抽出できませんでした_"
};
}
const text = article.textContent
.split("\n")
.map(l => l.trim())
.filter(l => l.length > 0)
.join("\n\n");
return {
title: article.title || document.title,
markdown: text
};
})();
readability.js
以下のGithubを保存する。
以下のコマンドをコマンドプロンプトで実行すれば取得できる。
curl -O https://raw.githubusercontent.com/mozilla/readability/main/Readability.js
rename Readability.js readability.js
拡張機能読み込み
① chromeで拡張機能の画面に移動。以下のURLでも飛べる。
chrome://extensions/
② デベロッパーモードをON。
③ 「パッケージ化されていない拡張機能を読み込む」を選択。
④ 今回作成したフォルダ「tab-to-markdown-extension」を選択。
これで自作した拡張が追加される。