読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

Chrome拡張の作り方

ブラウザ拡張

既存ウェブサービスを拡張するChrome拡張機能を作成してみました。
仕事を効率化する便利なウェブサービスは世の中にたくさんあるのですが、「もうちょっとカスタマイズしたいな」というシーンがけっこうあると思います。
そんなとき、拡張機能をささっと実装できると気持ち良いですよね。

Chrome拡張機能の仕組みと作成手順

HTML、CSSJavaScriptの知識があって、Chrome拡張の仕組みを理解すれば、簡単なものであれば、ささっと作成できます。といっても、仕組みもそんなややこしいものじゃありません。

参考資料

簡単に言えば、「manifest.jsonを含んだファイル一式をChromeの拡張ページにアップロード」すれば使えるようになります。もうちょっと詳細に書きます。

  1. ローカル開発環境で、HTML、CSSJavaScriptなどを使い、一旦作りたいものを作る
  2. フォーマットに従ってmanifest.jsonを作成する
  3. chromeで「chrome://extensions/」にアクセスし、「デベロッパーモード」にする
  4. manifest.jsonとファイル一式を含むフォルダをアップロードする(パッケージ化していれば、パッケージをアップロードする)

つまり、ブラウザを拡張する命令やデータ自体は、HTML、CSSJavaScriptなどで作成し、「拡張機能の名前や種類」はmanifest.jsonに記述します。

manifest.jsonの作成

manifest.jsonのフォーマットは公式ページで紹介されています。

基本これに従って記述すればOKですが、最低限記述するものとして、

"manifest_version": 2,
"name": "My Extension",
"version": "versionString"

と、あとは拡張の種類を記述します。代表的なものとしては、

  • Page Action ツールバーにアイコンを常駐させて、いつでも、その機能を発動する
  • Browser Action 特定のページでアイコンを出現させて、その機能を発動する
  • Content Scripts 特定のページで、その機能を自動実行する

などなど。

今回は、特定ページのスタイル変更やDOM操作をしたかったので、「Content Scripts」を使います。

ファイルとしては、CSSファイルとJavaScriptファイルが必要です。DOM操作はjQueryが便利なので、jQueryも用意します。
実際に作成したファイルとmanifest.jsonの中身はこんな感じです。

プロジェクトフォルダの中身

manifest.jsonの中身

{
  "manifest_version": 2,
  "name": "任意の拡張機能の名前",
  "version": "0.1",
  "description": "拡張機能の説明",
  "content_scripts": [
    {
      "matches": ["機能を発動させたいWebサイトのURL(正規表現も使える)"],
      "css": ["style.css"],
      "js": ["jquery-2.1.3.min.js", "script.js"]
    }
  ]
}

「matches」による特定ページの指定方法は、公式サイトで例が紹介されています。

拡張機能のテストと配布

ローカル開発環境で拡張機能が完成したら、テストします。
Chromeの拡張ページ「chrome://extensions/」にアクセスし、「デベロッパーモード」にして、「パッケージ化されていない拡張機能を読み込む...」でプロジェクトフォルダを読み込めば、拡張機能が使えるようになります。

詳細はドットインストールでご確認あれ(> <;)

自分のPCだけで拡張機能使いたい場合はこれで良いのですが、同じプロジェクトメンバーにも配布したい場合は、プロジェクトフォルダをパッケージ化します。
その場合は、「拡張機能のパッケージ化...」でプロジェクトフォルダを読み込みます。作成されたcrxファイルをメンバーに配布することで、拡張機能を共有することができるようになります。

こちらも詳細はドットインストールで(> <;)

ウェブストアへ公開する場合

拡張機能は、GoogleChromeウェブストアで配布することで、誰でも使うことができるようになります。Googleとしてもウェブストアでの公開を推奨しているようです。

今回は、特定ページのスタイル変更とDOM操作ということで、勝手に公開したら著作権的にマズいだろと思い、ウェブストアでの公開は断念しましたが、著作権の問題をクリアしたものを作成できれば、いつか公開したいなぁと思います。

ウェブストアへの公開手順