概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の18日目の記事です。
簡単にデバッグログをページに出力する方法を記載します。
やること
拡張機能を作っているときにconsole.logで出力されるログを新しく作ったウィンドウに表示します。
具体的なコード
page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="dark light">
</head>
<body>
<h1>拡張機能ページ</h1>
<pre id="log"></pre>
<script src="log.js"></script>
</body>
</html>
log.js
const logElem = document.getElementById("log");
console.log = (msg) => (logElem.textContent = `${logElem.textContent}\n${msg}`);
setInterval(() => {
console.log("log");
}, 1000);
console.logをアロー関数でつないでlogElemのテキストコンテンツヘ出力するようにします。
logElemはlogというIDを持つDOM要素で、HTMLファイル内で作成しておきます。
ログを出力する処理としてsetIntervalを使っていますが、ここは各機能でデバッグしたいときにconsole.logを使うようにします。
あとは新しいウィンドウを作るように拡張機能の各ファイルを作ります。
manifest.json
{
"browser_specific_settings": {
"gecko": {
"id": "the-town-sample-consolelog@example.com"
}
},
"manifest_version": 3,
"name": "init-extention",
"version": "0.1",
"description": "コンソールログサンプル",
"icons": {
"48": "icons/icon-48.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"menus"
]
}
background.js
browser.menus.create(
{
id: "sample",
title: "sample menu",
contexts: ["page"],
}
);
function createPage() {
let createData = {
type: "popup",
url: "page.html",
width: 500,
height: 300,
};
let creating = browser.windows.create(createData);
}
browser.menus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "sample") {
createPage();
console.log("click");
}
});
まとめ
console.logで通常時はコンソールに出力し、デバッグしやすいようにウィンドウ内に表示させるのも良いなと思います。
既存コードでconsole.logを使っているものに対してデバッグするときに有用かなと感じます。
参考
画面キャプチャ API の使用
このドキュメント内に使い方がありました。