Google Chromeの拡張機能でサイドパネルが表示している時だけコンテンツとメッセージをやり取りする場合の手順について備忘録的に投稿しておきます。
Google Chrome サイドパネル
Chromeに実装されているサイドパネルを拡張機能から開くことができます。
拡張機能からサイドパネルを操作する詳しい手順は別記事をご覧ください。
ポートを使ってメッセージを送信
Service Workerとして動作している［background.js］ から、サイドパネルで表示しているコンテンツ［sidepanel.js］は、sendMessageイベントを利用して通信することができます。
しかし［sidepanel.js］などのコンテンツが有効（つまり、サイドパネルが開いている状態）になっている必要があります。
サイドパネルが表示されていない状態でメッセージを送信すると、次のエラーが発生します。
Could not establish connection. Receiving end does not exist.このような場合には、ポートを追加してサイドパネルの状態を取得してメッセージの送信が可能になります。
こんな感じでファイルを構成にします。
[SidePanel]
|-[icons]
| |-[icon-48.png]
| |-[icon-128.png]
|-[manifest.json]
|-[background.js]
|-[sidepanel.html]サイドパネル機能にアクセスするために、”permissions” に “sidePanel” を追加して表示するサイドパネルの画面ソースを “side_panel｜default_path” に記載します。
[manifest.json]
{
"name": "サイドパネル",
"manifest_version": 3,
"version": "0.1",
"permissions": ["activeTab", "scripting", "sidePanel"],
"action": {
"default_icon": "icons/icon-48.png"
},
"side_panel": {
"default_path": "sidePanel.html"
},
"icons": {
"48": "icons/icon-48.png",
"128": "icons/icon-128.png"
},
"background": {
"service_worker": "background.js"
}
}サイドパネルで表示する画面を［sidepanel.html］を編集して次のHTMLを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="sidepanel.js"></script>
</body>
</html>［sidepanel.js］を編集して次のコードを追加します。
const port = chrome.runtime.connect({ name: "sidepanel" });
let currentTabId = null;
port.onMessage.addListener(msg => {
if (msg.type === "INIT") {
currentTabId = msg.tabId;
render();
}
if (msg.type === "TAB_CHANGED") {
currentTabId = msg.tabId;
render();
}
});
// 初回ロード時に現在タブのデータ取得
async function init() {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
currentTabId = tab.id;
render();
}
init();
function render() {
list.innerHTML = "コンテンツを書きます";
}［background.js］を編集して、次のコードを追加します。
const panelPorts = new Set();
chrome.runtime.onConnect.addListener(async(port) => {
if (port.name !== "sidepanel") return;
panelPorts.add(port);
port.onDisconnect.addListener(() => {
panelPorts.delete(port);
});
const [tab] = await chrome.tabs.query({
active: true,
currentWindow: true
});
port.postMessage({
type: "INIT",
tabId: tab.id
});
});
function Hogehoge(tabId)
{
if(panelPorts)
{
for (const port of panelPorts) {
port.postMessage({
tabId
});
}
}
}以上の手順で、サイドパネルの状態を取得してメッセージのやり取りを行うことが可能でした。
まとめ
今回は、Google Chromeの拡張機能でサイドパネルが表示している時だけコンテンツとメッセージをやり取りする場合の手順について書きました。
ポートを利用して、サイドパネル機能が開いているのを確認できます。
Google Chromeの拡張機能でサイドパネルが開いている時にメッセージのやり取りがしたい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただきありがとうございます。