概要

これは初心者のブラウザ拡張機能 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時間前のものが出力されます。

history.search()

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>

履歴を表示する画面です。

参考

history.search()

【JavaScript】event.preventDefault()が何をするのか