第2回 framgia × loupe 勉強会 「chrome extensionいじってみた話」
TRANSCRIPT
Chrome Extension いじってみた話
Framgia × LOUPE 勉強会 #2 2015．08．24．
Engineer at LOUPE, Inc. Takuya Mukohira (mktakuya)
Chrome Extension
Chrome
Extension
Chrome
Extension
↑ Webブラウザ
↓ 拡張機能
便利なブラウザChromeを
思い通りに拡張する方法
Chrome Extensionは 大きく分けて 3種類
大きく分けて3種類
• Browser Action
• Page Action
• Context Menu
Browser Action
Page Action
Context Menu
最小限の Chrome Extension
最小限の Chrome Extension
• iconを用意する
• manifest.jsonを書く
最小限の ChromeExtension
{ "name": "First App", "version": "0.1", "manifest_version": 2,
"description": "My First Chrome Extension",
"browser_action": { "default_icon": "icon.png" } }
• manifest.json
• 設定ファイル
• Chrome APIを使用する時の権限や、読み込む外部ファイルなども設定する。
動かしてみる
• Chromeの拡張機能ページを開くchrome://extensions
• デベロッパーモードに✔を入れる。
• 「パッケージ化されていない拡張機能を読み込む」で作成した拡張機能を読み込む。
Demo
Browser Actionを作ってみる
Browser Actionを作ってみる
• popup.htmlを書く。
• Browser Actionを作る時に必要なHTMLファイル
• アイコンをクリックすると出てくる画面
• 小さなWebページと考えて良い
Browser Actionを作ってみる
{ "name": "omairi-anytime", "version": "0.1", "manifest_version": 2,
"description": "いつでもお参り",
"browser_action": { "default_icon": "icon.png", "default_title": "Omairi Anytime", "default_popup": "popup.html" } }
• 何をするにもまずはmanifest.json
• manifest.jsonにbrowser_actionの記述を追加
• default_popupで“popup.html”を指定。
Browser Actionを作ってみる
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body style="min-width: 250px"> <h2>Omairi Anytime</h2> <img src="./jinja.png" alt="jinja">
</body> </html>
• 普通のHTMLで記述
Demo
Bootstrapも使える
Demo
Context Menuをいじってみる
Chrome API• タブやブックマーク、
cookieやコンテキストメニューなど、Chromeで扱うほとんどのものを操作できる。
• 詳しくは→ https://developer.chrome.com/extensions
Context Menuをいじってみる
• manifest.jsonにpermission設定を追加
• 今回はtabを操作するので、tabsを追加
{ "name": "SENSEI NOTE Search", "version": "0.1", "manifest_version": 2,
"description": "右クリックメニューからSENSEI NOTE検索",
"permissions": [ "tabs", "http://*/*", "contextMenus" ],
"icons": { "128": "icons/128.png", "16": "icons/16.png", "32": "icons/32.png", "48": "icons/48.png" },
"background": { "scripts": ["background.js"] } }
Context Menuをいじってみる
• background.jsを書く。
• background.jsChromeが起動している間ずっと動いているスクリプト
chrome.contextMenus.create({ "title": "「%s」をSENSEI NOTEで検索", "type": "normal", "contexts": ["selection"], "onclick": function(info) { var url = ‘https://senseinote.com/search?word=' url += encodeURIComponent(info.selectionText); chrome.tabs.create({ url: url }); } });
Demo
Chrome Web Storeで公開できる
• chrome://extensions でExtensionをパッケージ化
• Chrome ウェブストア Developer Dashboardへ https://chrome.google.com/webstore/developer/dashboard
• ＄5 課金
• 公開
https://github.com/mktakuya/senseinote-search
https://chrome.google.com/webstore/detail/sensei-note-search/enoecblednfpnefbhfllbnknfeldcaio
SENSEI NOTENotify
Demo
まとめ• Chrome Extensionは普段ぼくたちが触る技術で
簡単に作れる！
• 作ったExtensionはぜひ Chrome ウェブストアで公開しよう！
Chrome Extension いじってみた話
Framgia × LOUPE 勉強会 #2 2015．08．24．
Engineer at LOUPE, Inc. Takuya Mukohira (mktakuya)
～END～