Google Chromeの拡張機能で、スクリプトからサイドパネルを閉じるために “sidepanel.close” を実行時する際に “No matching signature.” エラーになる場合がありました。JavaScriptからサイドパネルを閉じる方法について備忘録的に投稿しておきます。
サイドパネルを閉じるには windowId が必要
例えば、こんな感じでブラウザーに表示した拡張機能のアイコンをクリックすると、サイドパネルが開きます。
chrome.action.onClicked.addListener(async (tab) => {
await chrome.sidePanel.open({ tabId: tab.id });
});
しかし、サイドパネルを閉じるために次のコードを実行すると
chrome.action.onClicked.addListener(async (tab) => {
await chrome.sidePanel.open({ tabId: tab.id });
});
[Uncaught (in promise) TypeError]エラーになります。
Uncaught (in promise) TypeError: Error in invocation of sidePanel.close(sidePanel.CloseOptions options, optional function callback): No matching signature.
リファレンスを読むと、引数なしでも使用できそうな記載があります。しかし、私の環境で実行すると[Uncaught (in promise) TypeError]エラーが発生します。
await chrome.sidePanel.close();
色々試してみた結果、安定してサイドパネルが閉じてくれるのは windowId を使った場合でした。
await chrome.sidePanel.close({ windowId: tab.windowId });
次のコードで、拡張機能のアイコンをクリックして、サイドパネルの開閉をスクリプトから実行できました。
let sidepanelport = null;
// アイコンクリックでサイドパネルを表示
chrome.action.onClicked.addListener(async (tab) => {
if (isSidePanelOpen() == false) {
await chrome.sidePanel.open({ tabId: tab.id });
}
else {
await chrome.sidePanel.close({ windowId: tab.windowId });
}
});
chrome.runtime.onConnect.addListener((port) => {
if (port.name === "sidepanel") {
sidepanelport = port;
port.onDisconnect.addListener(() => {
sidepanelport = null;
});
}
});
function isSidePanelOpen() {
return sidepanelport !== null;
}
まとめ
今回は、Google Chromeの拡張機能で、スクリプトからサイドパネルを閉じるために “sidepanel.close” を実行時する際に “No matching signature.” エラーになる場合がありました。JavaScriptからサイドパネルを閉じる方法について書きました。
最新版のChromeでは、sidepane.close を引数なしで実行すると[Uncaught (in promise) TypeError]エラーになりました。
background.js など ServiceWorker からサイドパネルを閉じる場合には、windowId を引数にして sidepanel.close を実行する必要があります。
Google Chromeの拡張機能で、スクリプトで sidepanel.close を実行する際に “No matching signature.” エラーになる人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただきありがとうございます。
