tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【chrome extensions】Google Chrome拡張機能の作り方① - 導入編からのひな形も置いておく

はじめに

chrome extensionsはけっこう前から作っていたんですが、
せっかくなので作り方の流れとひな形を残しておくメモ。
結構いまさら感もあるネタですね。

ながれ

  1. chrome extensionsとは
  2. chrome extensions作る
  3. chrome extensions使う

1は手抜きでwikiさんにでもお任せしますw

1. chrome extensionsとは

参考サイトのまんま載せます

日本語版での正式名称は「拡張機能」、いわゆるChrome版アドオン。
参考:エクステンション - Google Chrome まとめWiki

絵でみるとこんな感じのヤツですね f:id:tweeeety:20150304223040p:plain

chrome extensionsのGetting Started的な

2. chrome extensions作る

いきなり作ってみる

つくる概要

作る上での流れは簡単でこれだけです。

  1. 適当なところにディレクトリ作る
  2. 中にファイル作る
manifest.jsonについて

参考サイトから引用します

manifest.jsonという設定ファイルがChrome拡張機能を作る上で必須になります。
manifest.jsonには、アイコンの表示や拡張機能の名前といったものから、 どのURLにアクセスした時に有効にさせるかや ブラウザのどの情報にアクセス可能であるか 等の設定を記述します。
参考→1.1.拡張機能の基礎知識

実際につくってみる

最低限上記のものだけで作れるんですが、
それだけだと作った感じや動きを目でみることもできないので今回は下記のサンプルにしました。

自分はchrome_extensionsというディレクトリを作ってその中にchrome-extension-sampleというディレクトリを作りました。
中身の構成はこんな感じです。

# pwd
/Users/hoge/chrome_extensions

# tree chrome-extension-sample
chrome-extension-sample/
├── background.js
├── content.js
├── icon19.png
├── icon48.png
├── jquery-1.10.2.min.js
├── manifest.json
├── manifest.json.bk
├── popup.css
├── popup.html
└── popup.js

ちょっと動かしてみるのにこんなにファイルがいらないんですが、
どうせならひな形にもしたかったのでこの構成にしました。

実際のサンプルもあげておきます
https://github.com/tweeeety/chrome-extensions-sample

3. chrome extensions使う

さっそく使ってみます。使うというかまずは読み込みですね。

  • chrome(設定)アイコンをクリックしてその他のツール > 拡張機能を選択します f:id:tweeeety:20150304223055p:plain

  • 拡張機能タブが開くのでパッケージ化されてない拡張機能を読み込むボタンをクリックします f:id:tweeeety:20150304223109p:plain

  • 作ったchrome-extensions-sampleディレクトリを選んだ状態で、選択ボタンをクリックします。これで読み込みは終わりです。 f:id:tweeeety:20150304223121p:plain

  • 読み込まれるとこんな感じで追加されます。
    今回は説明を省きますが、manifest.jsonに追加したicon19.pngとicon48.pngが表示されてます f:id:tweeeety:20150304223132p:plain

  • 使ってみるということなので右上のアイコンをクリックしてみます。
    こんな感じでポップアップが表示されました。
    これはデフォルトで出るわけではなく今回サンプル用にHTMLで組んだものです。 f:id:tweeeety:20150304223141p:plain

参考

いくつかメモったのでこちらも参考に

おわり

今回は導入の流れと、自分用としてもひな形サンプルとして残しておきたかったのでこんな形でメモってみました!