Background script と Contents scriptの連携

概要

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

Background scriptとContent scriptの連携について記載します。

使用する場面

たとえばメニューが押されたときにWebページのコンテンツを操作したいときや、コンテンツでコピーした情報をバックグラウンドで扱いたいときです。

クリップボード機能へアクセスするときなど。

連携方法

browser.tabs.sendMessageとbrowser.runtime.onMessageを使います。

構文	使う場所	リンク
browser.tabs.sendMessage	Background script	tabs.sendMessage()
browser.runtime.onMessage	Background script Content script	runtime.onMessage

使用例

BackgroundからContent

メニューを作り、そのメニューがクリックされたときにContent Scriptへ遷移してコンソールにメッセージを出力します。

Content Script

function onMyMessage() {
  console.log("get message !");
}

browser.runtime.onMessage.addListener(onMyMessage);

Content Scriptはbrowser.runtime.onMessage.addListenerで呼び出されたときの処理を指定します。

Background Script

function onError(error) {
  console.error(`Error: ${error}`);
}

browser.menus.create(
  {
    id: "sample",
    title: "sample menu",
    contexts: ["page"],
  }
);

function send(tabs) {
  for (const tab of tabs) {
    browser.tabs
      .sendMessage(tab.id, {})
      .catch(onError);
  }
};

browser.menus.onClicked.addListener((info, tab) => {
  console.log("clicked");
  if (info.menuItemId === "sample") {    
    browser.tabs
      .query({
        currentWindow: true,
        active: true,
      })
      .then(send)
      .catch(onError);
  }
});

browser.tabs.queryでブラウザのタブを取得します。これはbrowser.tabs.sendMessageでタブが必要になるためです。

function send(tabs)内がContent Scriptへ送信している処理です。

ContentからBackground

Webページ上でダブルクリックすると通知します。

Content Script

window.addEventListener("dblclick", send);

function send() {
  browser.runtime.sendMessage("クリック！");
}

ダブルクリックイベントを取得して、send関数を呼びます。

Background Script

browser.runtime.onMessage.addListener(notify);

function notify(message) {
  browser.notifications.create({
    type: "basic",
    title: message,
    message: ""
  });
}

notify関数で通知します。