はじめに
chrome extensionsはけっこう前から作っていたんですが、
せっかくなので作り方の流れとひな形を残しておくメモ。
結構いまさら感もあるネタですね。
ながれ
1は手抜きでwikiさんにでもお任せしますw
1. chrome extensionsとは
参考サイトのまんま載せます
日本語版での正式名称は「拡張機能」、いわゆるChrome版アドオン。
参考:エクステンション - Google Chrome まとめWiki
絵でみるとこんな感じのヤツですね
chrome extensionsのGetting Started的な
- What are extensions?
https://developer.chrome.com/extensions- Developer's Guide
https://developer.chrome.com/extensions/devguide
2. chrome extensions作る
いきなり作ってみる
つくる概要
作る上での流れは簡単でこれだけです。
- 適当なところにディレクトリ作る
- 中にファイル作る
- manifest.json
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の
≡（設定）アイコンをクリックしてその他のツール>拡張機能を選択します
拡張機能タブが開くので
パッケージ化されてない拡張機能を読み込むボタンをクリックします
作ったchrome-extensions-sampleディレクトリを選んだ状態で、
選択ボタンをクリックします。これで読み込みは終わりです。
読み込まれるとこんな感じで追加されます。
今回は説明を省きますが、manifest.jsonに追加したicon19.pngとicon48.pngが表示されてます
使ってみるということなので右上のアイコンをクリックしてみます。
こんな感じでポップアップが表示されました。
これはデフォルトで出るわけではなく今回サンプル用にHTMLで組んだものです。
参考
いくつかメモったのでこちらも参考に
おわり
今回は導入の流れと、自分用としてもひな形サンプルとして残しておきたかったのでこんな形でメモってみました！
