Chrome拡張機能を作ってみた

はじめに

便利な機能が多いChromeブラウザの拡張機能ですが、自作出来る事をご存じでしょうか。公開するには料金(5$位)と審査が必要ですがローカルで利用する分には作り放題です。そしてChrome拡張は実は優れたフレームワークになっていて簡単に便利な拡張機能が作れたりします。今回は当サイトにアクセスした時のみアラートウィンドウが出る拡張機能を作ってみたいと思います。

必要な物

• マニフェストファイル
  • Chromeに登録するのに必要
• 実行スクリプト
  • アラートウィンドウを出すJavaScript
• アイコン画像
  • 128×128

今回必要な物は上記の物です。

開発

ディレクトリ構成は以下の通りです。分かりやすくするため全部同階層にしています。

$ tree --charset=C
.
|-- alert.js
|-- icon_128.png
`-- manifest.json

では作ってみましょう。

{
    "manifest_version": 2,
    "name": "MomoAlert",
    "version": "1.0",
    "description": "Alert Extensions",
    "icons": {
        "128": "icon_128.png"
    },
    "content_scripts": [
        {
            "matches": [ "http://momozo.tech/*", "https://momozo.tech/*" ],
            "js": [ "alert.js" ]
        }
    ]
}

• “manifest_version”:
  • 特に理由が無ければ2
• “name”:
  • 拡張機能の名前
• “version”:
  • 改修予定は無いので取り合えず1.0
• “description”:
  • 概要説明文
  • 公開する場合概要ページにも載る文言(だったと思います)
• “icons”:
  • アイコン画像(正方形のみ)
• “content_scripts”:
  • “matches”:
    • URL正規表現
  • “js”:
    • 実行プログラム

alert("アラート");

登録

• Chromeブラウザ起動
• 拡張機能設定ページ移動
• ディベロッパモードON
• パッケージ化されていない拡張機能を読み込む
• フォルダを開く

この状態で当サイトにアクセスしてみて下さい。アラートが表示されれば成功です。

終わりに

今回作った物は大した物ではありませんが、jsやWebに詳しい方が見ればもっと面白い物が思いつくかと存じます。是非自由に拡張機能を作ってみられては如何でしょう。