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に詳しい方が見ればもっと面白い物が思いつくかと存じます。是非自由に拡張機能を作ってみられては如何でしょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA