1. chrome extensionを
作ってみよう

2. 資料の構成
1. chrome extensionとは
2. ファイルの構成
3. 簡単なものを作ってみよう(content scriptでalert)
4. 用語説明
5. chrome extensionの構成・概念
6. ちょっといいやつ作ってみよう(background page使って
popup表示)

3. chrome extensionとは
• 高機能なブックマークレット
• html, css, jsを使って、ページの解析などができます
• chrome APIを用いて、ブラウザの設定を変更するAPIもあります
!
• 英語: https://developer.chrome.com/extensions/index
• 日本語: http://dev.screw-axis.com/doc/chrome_extensions/

4. ファイルの構成
• extension用フォルダを作って、manifest.jsonとその他
ファイルを配置する
• manifest.json
• 設定ファイル。どのJS読み込む？のほか、ファイルを公
開するときに必要な、アイコン・名前・説明などを記載
• jsファイル
• icon画像

5. {
"manifest_version":2,
"name": "Seo Previewer",
"version": "1.3",
"description": "Show Seo Tags",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["jquery-1.10.2.min.js", "contentScript.js"]
}
]
}

6. 用語説明
• content script
• まさにブックマークレット。閲覧しているページ
に勝手に要素を突っ込んでJSを動かす。例えば
content script内でconsole.logするとブラウザ
のdebugツール内のコンソールタブにメッセージ
がでる

7. 簡単なものを作ってみよう
• content scriptを使ってconsole.logを出してみる

8. content scriptだけではでき
ないこと
• content scriptは閲覧しているページへの埋め込み
なので、ページの挙動を壊してしまう
• ブックマークレット以上のことはできない

9. backgroundページ
• 通信を司る非表示のページのこと
• content scriptに書くとページに読み込んじゃうので、ページ
を破壊することが多々
• popupは完全に別ページ
• content scriptでとったものを、popupに表示などやりたけ
れば、その通信を行う必要があるので、それをbackground
pageに記述する
• 他にもextension同士の通信などもできるらしい

10. {
"manifest_version":2,
"name": "Seo Previewer",
"version": "1.3",
"description": "Show Seo Tags",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["jquery-1.10.2.min.js", "contentScript.js"]
}
],
"background": {
"scripts": ["jquery-1.10.2.min.js", "eventPage.js"],
"persistent": false
},
"browser_action": {
"default_icon": "favicon.png"
}
}

11. 用語説明
• content script
• まさにブックマークレット。閲覧しているページに勝手に要素を突っ込んでJSを動かす。
例えばcontent script内でconsole.logするとブラウザのdebugツール内のコンソールタ
ブにメッセージがでる
• browser action
• アドレスバーの右に出てくるアイコンのやつ
• popup
• browser actionをクリックしたら出てくるバルーン
• background page
• content scriptとpopup、他extensionなど通信を司る。railsのcontrollerみたいなもん

12. background pageを使った
extensionを作ってみよう
• content scriptで取得した要素をpopupに表示してみる
• chrome.browserAction.setPopup({popup:
show.html"})
• chrome.tabs.sendMessage(tabs[0].id, {model:
"SeoPreview", method: find }, callback)
!
• https://developer.chrome.com/extensions/api_index

13. 公開する
• https://chrome.google.com/webstore/detail/
seo-previewer/
ehddoakgfehpkahfcnknofmimkhcomln?hl=ja
!
• $5かかる
• 更新すると、利用者のパッケージも勝手に更新され
る