Firefox/Chrome拡張機能のポップアップ内ではOnclickは働かないので他の方法を使おう

概要

拡張機能アイコン(ツールバーにあるやつ)をクリックして出てくるポップアップは、browser_action内のdefault_popupにHTMLファイルを指定することによって作る。

manifest.json

"browser_action":{
    "default_icon": {
        "48" : "48.png"
    },
    "default_popup": "popup.html"
}

だがこのHTMLファイル内においては、Onclickは使えない。
ポップアップ内において、インラインのJavaScriptは許可されていないのだ。

対処法

DOMContentLoadedを使う。
まずHTMLファイル内のOnclickを動作させたかったタグにIDを割り振る。
以下に例を示す。

<!--置換前-->
<a Onclick="hoge()">hoge</a>

<!--置換後-->
<a id="hoge">hoge</a>

JavaScriptのコードは外部ファイル(ここではhoge.jsとする)に以下のように書く。HTMLファイル内に<script src="hoge.js"></script>を書くのを忘れないよう注意。

hoge.js

document.addEventListener("DOMContentLoaded", function(){
    var hoge = document.getElementById("hoge");
    hoge.addEventListener("click", function(){
        // ここに処理を書く
    });
});

ちなみにこのJSファイルはmanifest.json内のcontent_scriptsに書かなくても動く。

参考

https://stackoverflow.com/questions/13591983/onclick-or-inline-script-isnt-working-in-extension
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy