Chrome拡張機能のpopup.htmlでJavaScriptを動かしてみる

JavaScript

Chrome Extensionのpopup.htmlでJavaScriptを動かしてみる。

Scriptが直接書けない

manifest.json

{
  "name": "Sample Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "サンプルの拡張機能です。",
  "browser_action" : {
    "default_popup" : "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <script>
  alert('Hello, world!');
  </script>
</body>
</html>

だと、アイコンをクリックしても何も反応しない。

ポップアップを検証すると、

なんかセキュリティーポリシーのエラーがでる。

別ファイルにするとうまくいく

popup.htmlを下記のように修正し、

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

script.jsを追加する。

alert('Hello, world!');

アイコンをクリックすると、Hello, world!が表示される。