【初心者向け】Google Chrome拡張を3分で開発してみる

この記事ではGoogle Chrome拡張機能をこれから開発をしたい初心者のために3分で拡張機能を開発していきます。

とりあえずChrome拡張を簡単なものでいいから作って動かしたい人向けに記事になります。

それでは3分スタート！

目標物

Qiitaのサイトを閲覧すると「勉強してて偉い！」と褒めてくれるChrome拡張を開発したいと思います。

完成すると以下のようにQiitaに行くと褒めてくれます。（優しい世界）

manifest.json

今回の拡張機能は2つのファイルのみで構成されています。

しかもそれぞれのファイルの中身もほんの少ししか書かれていません。

まずはmanifest.jsonから。

manifest.jsonはChrome拡張における設定ファイルです。

拡張機能の名前やどのファイルを読み込むかなどの様々な設定ができます。

今回は以下のように書きました。

{
    "name": "sample",
    "description": "praise me",
    "version": "0.1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "https://qiita.com/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

content.js

そして次は実際にWebページにどのような機能を追加するかを書くcontent.jsを見てみましょう。

window.alert('勉強してて偉い！');

たった1行のみです。（Javascript ってすごい！）

あとはGoogleChromeの設定→その他のツール→拡張機能に移動したらデベロッパーモードをONにしてパッケージ化されてない拡張機能を読み込むでフォルダごと選択してください。

読み込めたらQiitaのどのページでもいいので移動してみて正しく動作することを確認してください。

おわりに

3分で開発できたかどうかはわかりませんが、かなり早くしかも簡単に拡張機能を作ることができたのではないでしょうか。

オリジナルの拡張機能を作ると結構楽しいのでぜひ作ってみてください。

おわり。