概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の16日目の記事です。

ブラウザ拡張機能から呼び出すページを作ります。

拡張機能用ページとは

拡張機能固有の設定や何らかの処理を行うためのページのことです。新しくWindowを作ったりタブを開いて表示します。

具体的なコード

ここではコンテキストメニューから新しいWindowを作ってみます。

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "the-town-sample-extpage@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();
    }
});

コンテキストメニューがクリックされたらcreatePage関数を呼び出します。内部でbrowser.windows.create()関数を使いWindowを作ります。

page.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="dark light">
  </head>

<body>
    <h1>拡張機能ページ</h1>
    <p>これはサンプルページです</p>
</body>

</html>

表示するページ用のHTMLファイルです。

拡張機能を読み込ませてコンテキストメニューをクリックすると、下記画像のようにポップアップが出ます。

参考

拡張機能ページ

windows.create()

windows.CreateType