前回に引き続きChrome拡張機能を作ってみます。

今回はJavaScriptとCSSを実際に適応させてみます。

まずはmanifest.jsonに以下の記述を追加します。

"content_scripts": [
    {
      "matches": [
        "https://*/*"
      ],
      "css": [
        "css/mystyle.css"
      ],
      "js": [
        "js/action.js"
      ]
    }
  ]

content_scripts内に宣言されたものが拡張機能を適応した際に実行されます。

matchesは拡張機能を適応させるページを指定します。

これは、必須項目なのでここは記述をしないと拡張機能を適応した際にエラーが出てしまいます。

この場合はhttpsのページすべてで動作させる場合の記述です。

詳しくはこちらの公式ページに書いてあります。

CSSとJavaScriptについては実装したいファイルへのパスを記述しています。

例えばaction.jsに

alert('test action');

とだけ書いて拡張機能を適応させると、ページが開くたびにalertが表示されます。

CSSも同様に

body{
    background-color: red;
}

と書けば開いたページの背景色が赤に変わります。

ここまでで、簡単な拡張機能を作ることができました。

拡張機能はパソコン版のChromeでしか適応できないのでスマホでの動作を考えなくていいようです。

以上で、Chrome拡張機能に機能を持たせて動作するところまでできました。