firefoxのアドオン開発、ツールバーからアラートを表示するには

###概要
firefoxでアドオン開発しているのですが、ツールバーからアラートを表示するという時点で躓いています。ツールバーをクリックするとポップアップが開かれて、そのポップアップに設置されたボタンを押すとalertが表示されるという仕組みです。

以下のコードをjsfiddle.netなどで使ってみるとalertは表示されるのですが、ポップアップを経由すると反応しません。以下のhtmlをmanifest.jsonからポップアップとして指定しています。

<html>
  
  <body>
    <button id="true" onclick="click_func()">true</button>
    
  </body>
  <script>
  function click_func(){
  window.alert("クリックされました");
  }
  </script>
</html>

このあたりのことは日本語の情報がそもそも少なくて、わからなかったです。
この解決策はわからないでしょうか？
また、このような場合のデバッグの方法はありますか？

よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

browserActionコンテキスト（ポップアップの実行ページ）ではインラインスクリプトが使えないから、実行したいスクリプトを.jsファイルに分けてscript要素のsrc属性に指定して読み込む必要があるよ。

js
1// popup.js
2document.addEventListener('DOMContentLoaded', (event)=>{
3    const button = document.querySelector('button#true');
4    button.addEventListener('click', click_func);
5}, {once: true);
6
7function click_func(){
8    alert("クリックされました");
9}

html
1<html>
2    <head>
3      <script src="./popup.js"></script>
4    </head>
5    <body>
6        <button id="true">true</button>
7    </body>
8</html>