概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の21日目の記事です。
ブラウザの履歴を拡張機能で表示してみます。
やること
右クリックでコンテキストメニューから新しいウィンドウを呼び出します。
そのなかでボタンを押すと直近24時間の履歴が表示されるようにします。
出力イメージ
具体的なソースコード
manifest.json
{
"browser_specific_settings": {
"gecko": {
"id": "the-town-sample-history@example.com"
}
},
"manifest_version": 3,
"name": "init-extention",
"version": "0.1",
"description": "履歴サンプル",
"icons": {
"48": "icons/icon-48.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"menus",
"history"
]
}
履歴へアクセスするためにpermissionsにhistoryを追加します。
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) => {
console.log("clicked");
if (info.menuItemId === "sample") {
createPage();
}
});
こちらはコンテキストメニューを追加しています。新しいウィンドウを開く処理です。
history.js
const logElem = document.getElementById("log");
console.log = (msg) => (logElem.textContent = `${logElem.textContent}\n${msg}`);
function onGot(historyItems) {
for (const item of historyItems) {
console.log(item.url);
console.log(new Date(item.lastVisitTime));
}
}
function onClick(e) {
e.preventDefault();
browser.history.search({ text: "" }).then(onGot);
}
document.querySelector("form").addEventListener("submit", onClick);
履歴へアクセスするためにbrowser.history.searchを使います。表示したいだけなので詳細は触れませんが、特に指定しなければ24時間前のものが出力されます。
page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="dark light">
</head>
<body>
<h1>拡張機能ページ</h1>
<p>これはサンプルページです</p>
<form>
<button type="submit">履歴表示</button>
</form>
<pre id="log""></pre>
<script src="history.js"></script>
</body>
</html>
履歴を表示する画面です。