Chrome Extension ( manifest version 3 ) message passing

拡張機能読込方法は下記参照 ⇒ Chrome Extension: Load unpacked extension
Devtools起動方法は下記参照 ⇒ Chrome Extension: Inspect background script

拡張機能を読み込んだ後、
background.jsのDevtoolsのConsoleを開き、
https://chromedriver.chromium.org/downloads
などを適当に開き、
content-script.jsのDevtoolsのConsoleを開く。

※メッセージで送信可能なのは JSON ifiable object とのこと。

Simple one-time requests

background.js

console.log('Hello, I am background scripts');

// Simple one-time requests ( background.js => content-script )
const chromeTabsSendMessage = async () => {
  const tabs = await chrome.tabs.query({ url: ['http://*/*', 'https://*/*'] });
  tabs.forEach((tab) => {
    chrome.tabs.sendMessage(tab.id, '[background.js => content-script] From tabs.sendMessage.');
  });
};

// Simple one-time requests ( content-script => background.js )
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(request);
  chromeTabsSendMessage();
});

content-script.js

console.log('Hello, I am content scripts');

// Simple one-time requests ( background.js => content-script )
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(request);
});

// Simple one-time requests ( content-script => background.js )
chrome.runtime.sendMessage('[content-script => background.js] From runtime.sendMessage.');

manifest.json

{
  "manifest_version": 3,
  "name": "HelloConnect",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

Long-lived connections

background.js

console.log('Hello, I am background scripts');

// Long-lived connections ( background.js => content-script )
const chromeTabsConnectPortPostMessage = async () => {
  const tabs = await chrome.tabs.query({ url: ['http://*/*', 'https://*/*'] });
  tabs.forEach((tab) => {
    const port = chrome.tabs.connect(tab.id);
    port.postMessage(
      '[background.js => content-script] From chrome.tabs.connect + port.postMessage.',
    );
    port.onMessage.addListener((request) => {
      console.log(request);
    });
  });
};

// Long-lived connections ( content-script => background.js )
chrome.runtime.onConnect.addListener((port) => {
  port.postMessage(
    '[background.js => content-script] From chrome.runtime.onConnect.addListener + port.postMessage.',
  );
  port.onMessage.addListener((request) => {
    console.log(request);
  });
  chromeTabsConnectPortPostMessage();
});

content-script.js

console.log('Hello, I am content scripts');

// Long-lived connections ( background.js => content-script )
chrome.runtime.onConnect.addListener((port) => {
  port.postMessage(
    '[content-script => background.js] From chrome.runtime.onConnect.addListener + port.postMessage.',
  );
  port.onMessage.addListener((request) => {
    console.log(request);
  });
});

// Long-lived connections ( content-script => background.js )
const port = chrome.runtime.connect();
port.postMessage(
  '[content-script => background.js] From chrome.runtime.connect + port.postMessage.',
);
port.onMessage.addListener((request) => {
  console.log(request);
});

manifest.json

{
  "manifest_version": 3,
  "name": "HelloConnect",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}