Chrome拡張機能を作ってみた

概要

とりあえずChromeの拡張機能を作って実行してみる。

難しそうなイメージだったが、実際にやってみると、今の自分のレベルでも思ったよりいろいろできそうだなと感じた。
特に新しい言語が必要なわけでもなく、基本的にはフロント開発と同様HTML、CSS、Javascriptで作成することができる。

とりあえず作ってみるもの

YouTubeを開くとアラートが出る拡張機能を作ってみる。
必要なファイルはmanifest.jsonとjsファイルの2つだけ。

manifest.json

manifest.jsonはChrome拡張機能での必須ファイル。
拡張機能で使用するスクリプトなどの情報を記載する。

作成したファイルは以下。
細かい説明は省くが、matchesに当てはまるサイト(今回だとYouTube)を開いたときに、指定したスクリプトが動作するようになっている。

manifest.json

{
    "manifest_version": 2,
    "name": "Youtube Alert",
    "version": "1.0",
    "description": "YouTubeを開くとアラートが出るだけの機能",
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    },
    "content_scripts": [{
        "matches": ["https://www.youtube.com/*"],
        "js": ["alert.js"]
    }]
}

jsファイル

使用するjsファイルは、manifestで指定した名前で作成する。

作成したファイルは以下。
単純にアラートを出すだけ。

alert.js

window.alert('You see Youtube!!');

実行方法

以下の手順で拡張機能を読み込み、使用できる状態にする。

1. Chromeを開く
2. 3点リーダーをクリックし、「その他のツール」→「拡張機能」を開く
3. デベロッパーモードを有効化する
4. 「パッケージ化されていない拡張機能を読み込む」をクリック
5. 対象のフォルダを開く
6. 対象の拡張機能を有効化する

動作確認

実際にYouTubeを開くと、アラートが表示される。

感想

思ったより簡単。
これからいろいろと作ってみる。