前回からの続き

前回から引き続き、 popup画面 の説明を行います。

実際によくある使い方

現在のURLを表示

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>

    <button id="showUrl">
      URL取得
    </button>

    <p id="result"></p>

    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.getElementById("showUrl").addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });
  document.getElementById("result").textContent = tab.url;
});

manifest.json

{
  "manifest_version": 3,
  "name": "URL Display Extension",
  "version": "1.0.0",
  "description": "ブラウザ拡張(URL表示)のサンプル",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

※　permissions で定義されている activeTab は、現在ユーザーが操作しているタブへ一時的にアクセスするための権限です。今回のサンプルでは、現在表示中ページの URL を取得するために利用しています。

👉 登録して、動作させてみると、ボタン押下により、URL取得され表示されます。

popup は普通のHTMLページ？

基本的には正解です。

Popup 内では

  • HTML
  • CSS
  • JavaScript

が普通に使えます。

例えば：

<input>

<select>

<button>

<table>

などのタグが普通に利用できます。ただし、 普通のWebページとは違います。 （ここは重要です。）

👉 Popup は 特殊な拡張機能ページ です。

例えば、popup.js 内では、下記の様な拡張APIが利用できます。

  • chrome.storage
  • chrome.tabs

Popupのライフサイクル

初心者が最も驚くポイントです。

👉 Popupは常に存在しているわけではありません。

アイコンクリック
↓
popup生成
↓
表示
↓
閉じる
↓
popup破棄

という動作になります。

つまり、popup.js の中で、

let count = 0;

としても、

Popupを閉じると消えてしまいます。

その為、

  • 設定値
  • テーマ
  • 入力内容

などの状態を保存したい場合は、 chrome.storage.local を利用する必要があります。

※　なお、Popup内では localStorage や sessionStorage も利用できます。ただし、拡張機能では chrome.storage の利用が推奨されるため、設定情報などは chrome.storage.local に保存するのが一般的です。

例

”theme”という名前で、値”dark”を保存

await chrome.storage.local.set({
  theme: "dark"
});

次回開いた時、

const result = await chrome.storage.local.get("theme");

で取得できます。

Popup と Background の違い

この２つは、よく混同されます。

項目 Popup Background
画面 あり なし
ユーザー操作 あり なし
表示中のみ動作 ○ ×
常時表示 × ×
UI作成 ○ ×

Popup は、ユーザー操作で使用するものです。

Background は裏方処理を担当します。ただし Manifest V3 では Service Worker として実装されるため、必要な時だけ起動し、処理が終わると停止します。

Popup と Content Script の違い

これもよく混同されます。

Popup は、拡張機能の画面です。Content Script は、Webページ内で動く JavaScript で全くの別物です。

Popup
↓
ボタンクリック
↓
Content Scriptへ命令
↓
ページ書き換え

という構成がよく使用される為、popup と Content Script を同一視したり、PopupからページのDOMを直接操作できるのでは、といった勘違いがしばしば見受けられます。

例えば、popup.jsの中で、

document.querySelector("h1")

と書いた場合、ここでいう document は、現在開いているWebページではなく、 popup.html の document を示します。

👉 その為、ページの中身を操作したい場合は、 Content Script による操作が必要となります。

Content Scriptは、popup.js とは、まったく異なるスクリプトで、manifest.json でも、全く別に定義されます。

ファイル構成例

my-extension という、独自の拡張を作成する場合、 popup.html とpopup.js は、background.js や content.js と同列にありながら、全く異なるものとして存在します。

my-extension/
├─ manifest.json
├─ popup.html
├─ popup.js
├─ popup.css
├─ background.js
├─ content.js
└─ icons/

👉 拡張機能によっては、これらの全てのファイルが必要ではありませんが、各ファイルの役割を明確にし、各ファイル間が連携しあって、拡張機能を実現するという設計が重要になります。

まとめ

Popup は、ブラウザ拡張の「顔」となる画面です。

  • popup.html → 画面を作る
  • popup.js → 処理を書く
  • manifest.json → Popupを登録する

という役割になります。