Chrome・Firefox拡張機能のブラウザアクションでポップアップあり・なしを共存する

2018/07/222020/10/07

やりたいこと

ブラウザアクションでポップアップを表示する
ブラウザアクションで単純クリックでアクションを実行する
上記の２つをオプションで切替可能にする

実施例

上記の拡張機能に機能を実装した。
オプション画面から設定することでブラウザアクションでポップアップ表示と単純クリックアクションを選択できる。

失敗談

ブラウザアクション時にクリックイベントを検出して動作するために、chrome.browserAction.onClicked.addListenerでクリックイベントを監視して実現する。この方法は、クリックイベントを検出できるかもしれないが、manifest.jsonからbrowser_action.default_popupの項目を削除しなくてはならず、ポップアップを表示できない。

~~求める結果は得られなかった。~~

追記
chrome.browserAction.setPopupとchrome.browserAction.onClicked.addListenerで実現可能でした。

chrome.browserAction.setPopupでポップアップあり・なしを制御する。ことで、ポップアップとonClickedに処理を振り分けることができます。

成功談

ブラウザアクションのポップアップ表示で、オプションを確認して単純クリックイベントの場合、イベントを実行後にwindow.close()でポップアップをクローズする。ポップアップ表示の場合は、ポップアップをクローズしなければ通常のポップアップ表示となる。

以下に例を示す。以下のコードは、browser_action.default_popupのhtmlファイルから呼び出されるスクリプト内に記載する。オプションは、内部ストレージに事前に値が設定されている前提とする。

// 内部ストレージからオプションを取得する
chrome.storage.local.get({browserAction_clickEvent: false}, function(item) {
  if (item.browserAction_clickEvent) {
    // アクション(ポップアップ表示なし時)
    onClickEvent();  // 実行したいアクション
    window.close();
  }
});

備考

htmlファイルの読み込み完了前にwindow.close()するため、ウィンドウをちらつくのが玉に瑕、『動作したよ！』的なメッセージを1秒程度表示すると違和感がなくなるのかな？

今まで最低でもアクションに２クリックが必要だった。だが、本機能の実現により、アクションを１クリックで実現できるようになった。筆者としてもとても満足している。