Chrome および Firefox 拡張機能で JavaScript を正常に実行するにはどうすればよいですか?

Chrome/Firefox 拡張機能での JavaScript 実行の課題

Chrome および Firefox 拡張機能では、インライン スクリプトまたは onClick イベントを通じて JavaScript を実行すると問題が発生する可能性があります。これは、これらのプラットフォームによって課された制限により発生します。

インライン JavaScript の禁止

Chrome 拡張機能は、インライン JavaScript の使用を明示的に禁止しています。代わりに、スクリプトを外部ファイルとして個別に含める必要があります。

onClick イベントの制限

Firefox WebExtensions もインライン onClick イベントを禁止します。イベント リスナーは、addEventListener メソッドを使用して要素に接続する必要があります。

onClick イベントの回避策

拡張機能で onClick イベントを機能させるには、次の手順に従います。

1. イベントをトリガーする要素に ID を割り当てます (例: ).
2. 外部スクリプト ファイル (popup.js など) で、次のコードを使用します。

document.addEventListener('DOMContentLoaded', function() {
  var link = document.getElementById('link');
  link.addEventListener('click', function() {
    // onClick event logic here
  });
});

3. スクリプト ファイルを次のように含めます。 HTML ファイル内の別のスクリプト タグ:

これらを実装することにより、回避策を使用すると、Chrome および Firefox 拡張機能のインライン JavaScript および onClick イベントの制限を克服できます。

以上がChrome および Firefox 拡張機能で JavaScript を正常に実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。