【Chrome拡張機能】javascriptを読み込ませる方法

2022年3月21日2023年3月6日

satoshiii

対象読者

拡張機能について知りたい
拡張機能でjsって使えるか知りたい

何が書いてる？

jsを読み込ませる方法

Chrome拡張機能では、

セキュリティの関係でポップアップで表示されたHTMLに
直接JavaScriptを記述することはできません。

じゃあ、どうすればいいか？

JavaScriptを読み込ませる方法

外部ファイルとして、JavaScriptを読み込ませれば可能になります。

作成ファイルと解説

JavaScriptファイルを読み込ませて、ポップアップ内の<p>タグをタップするとアラート表示させる拡張機能を作成します。

manifestファイル

ブラウザアクションを使用します。

{
  "manifest_version": 2,
  "name": "Chrome Ex",
  "version": "1",
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Helloを表示する"
  }
}

書き方の詳細は、こちらの記事を参考にしてください。

2022年3月21日【Chrome拡張機能】ブラウザアクション

HTMLファイル

自作したmyscript.jsを5行目で、外部ファイルとして読み込みませます。

JavaScriptで読み込ませるために、pタグにidも指定しています。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8" />
<head>
    <title>ああああ</title>
    <script type="text/javascript" src="myscript.js"></script>
</head>

<body>

<p id="hello">Hello!こんにちわ</p>

</body>
</html>

JavaScriptファイル

詳細は省きますが、HTMLファイルを読み込んで<p>タグがクリックされた時にアラートを出します。

window.onload = function() {
     var el = document.getElementById("hello");
     el.addEventListener("click", function(){
          alert("外部JavaScriptファイル");
     }, false);
};