Chromeの拡張機能を作る

ブラウザのChromeでは拡張機能が配布されていたり、使えたりします。

拡張機能でできることの例としては、範囲選択したページ上の文字列をワンクリックで翻訳したり、動画の音声を左右にふれるスライダーを追加したりと様々です。

今回の記事では拡張機能を作るための一歩として、指定のページを開いた時に独自のCSS、JavaScriptを実行するところまでを簡単にご紹介します。

もし特定のサイト向けの成果物を公開して配布する場合、サイトが指定する規約などに反さないよう注意してくださいね。

必要なファイルを準備する

作業用のフォルダを作成し、以下のファイルをその中に格納します。

・manifest.json　(設定ファイル)
・script.js　(指定のサイトで実行する)
・style.css　(指定のサイトで適用する)

script.jsとstyle.cssは必要なほうだけで十分です。ファイル名もこの二つに関しては自由に決めていただいて構いません。ただ今後の説明は上記のファイル名として説明しますので、適所読み替えながら進めてくださいね。

manifest.json

設定ファイルは以下のように記述します。他にも設定ファイルで書ける内容はいろいろあるので、調べてみてくださいね。

{
    "name": "拡張機能の名前",
    "version": "1.0", // 拡張機能のバージョン
    "description": "拡張機能の説明",
    "manifest_version": 2, // 設定ファイルのバージョン
    "content_scripts": [{
        "matches": ["https://google.com/*"], // 対象のURL
        "css": [ "style.css" ]
        "js": [ "script.js" ]
    }]
}

matchesに書いているURLに「*」を書くと、それ以降は何の文字列でも入っていいと言うような指定ができます。

これが書けたら必要なCSS、JavaScriptを書くと拡張機能自体は完成です。

Chromeで読み込む

Chromeを開いて右上にある設定のボタンから、その他のツール＞拡張機能を押して拡張機能のページを開きます。

ページの右上にあるデベロッパーツールのボタンをオンにして、パッケージ化されていない拡張機能を読み込むをクリックし、先ほど作成したファイルが入っているフォルダを選択します。

あとは指定したページを開いて動作を確認してみましょう。