single.php

Chrome 拡張機能で”sidepanel.close”の実行時に”No matching signature.”エラーになる場合の対処法

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.” エラーになる人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です