How To Create Chrome Extensions

How To Create Chrome Extensions
M3 Tech Talk #16 2013/12/20 #m3dev

Transcript

1. Chrome֦ுͷ࡞Γํ 2013/12/19 M3 Tech Talk #16 தଜوࢤ
2. Chrome Extensions ChromeΛ֦ு͢Δิॿπʔϧ HTMLͱJavaScriptͰ࡞੒͢Δ ! ެࣜαΠτΛࢀߟʹ ʮGetting Started tutorialʯͱ
 ʮRead the Overviewʯʹ
 ໨Λ௨͢ͱ͍͍ 2012೥8݄͝Ζʹmanifest V2ʹͳͬ ͨͷͰωοτهࣄ͸
 ݹ͍৔߹΋͋Δ http://developer.chrome.com/ extensions/
3. Կ͕Ͱ͖Δ͔ ϒϥ΢βʢJavaScriptʣͱͯ͠Ͱ͖Δ͜ͱͳΒେମͰ͖Δ JavaScript΍CSSͰݟͨ໨Λม͑Δ XHttpRequestͰ௨৴͕Ͱ͖Δ ීஈͷϒϥ΢δϯάͱಉ͡CookieΛ࢖͏ ΞϓϦઐ༻αʔό͔Β৘ใऔಘʗอଘ ChromeͷػೳΛ࢖͏ λϒ/΢Πϯυ΢ૢ࡞ɺϒοΫϚʔΫૢ࡞ɺσεΫτοϓ௨஌ bookmarksɺhistoryɺnewtabΛಠࣗϖʔδʹมߋ
4. ࡞Γํ
5. browser action contents script popup background page page action option page ओͳػೳͷ໊শ
6. ֓ཁ manifest.jsonʹ֦ுͷΞϓϦઃఆΛఆٛ͢Δ ΞϓϦ໊ɺΞΠίϯɺόʔδϣϯɺݖݶఆٛͳͲΛهࡌ͢Δ ֤ػೳʹରԠ͚ͮΔϑΝΠϧΛఆٛ͢Δ ԼهͷURLͰ<֦ுݻ༗ID>͕υϝΠϯͱͳΔWebΞϓϦͩͱࢥ͑͹͍͍ chrome-extension://<֦ுݻ༗ID>/ʙ.html JQueryɺAngular.jsͳͲ֤छJSϥΠϒϥϦ͕࢖͑Δ ཪଆͰ։͔ΕΔbackgroundϖʔδͰϝΠϯॲཧΛߦ͏ persistentύϥϝʔλʹैͬͯ̎ͭͷಈ࡞Ϟʔυ͕͋Δ ΞϓϦͷઃఆΛߦ͏ը໘Λoptionϖʔδͱͯ͠࡞੒͢Δ
7. manifest.json ΞϓϦͷઃఆΛهड़͢Δ ΞϓϦ໊ɺόʔδϣϯɺ֓ཁɺ
 ΞΠίϯ backgroundͰ࢖͏ϑΝΠϧ optionͰ࢖͏ϑΝΠϧ ݖݶ(permissions) ࢖͏ػೳɺΞΫηε͢ΔURL browser_actionઃఆ contents scriptઃఆ etc... { "name": "My Extension", "version": "2.1", "description": "my extension.", "icons": { "128": "icon_128.png" }, ! "background": { "persistent": false,
 "scripts": [ "background.js", "jquery.js" ] }, ! "option_page" : "option.html", ! "permissions": ["tabs"] }
8. backgroundϖʔδ ΠϕϯτۦಈϞʔυʢEvent Pagesʣ ઃఆͨ͠ΠϕϯτͷൃՐ࣌ʹىಈʢϖʔδ͕։͔ΕΔʣ Ұఆ࣌ؒͰϓϩηε͕ऴΘΔ (ϖʔδ͕ด͡ΒΕΔ) ม਺͕ফ͑ΔͷͰదٓlocalStorageʹอଘ PCϦιʔεͷઅ໿ͷͨΊجຊతʹΠϕϯτۦಈϞʔυΛ࢖͏ ! ৗறϞʔυʢBackground Pagesʣ ৗʹϓϩηε͕ੜ͖͍ͯΔ
9. Πϕϯτ xxx.addListenerͰίʔϧόοΫΛઃఆ APIʹͯΠϕϯτΛઃఆ ΠϕϯτൃՐ࣌ͷྲྀΕ
 1. background.jsΛಡΈࠐΉ
 2. ಡΈࠐΉͳ͔ͰaddListnerΛઃఆ
 3. addListnerͰઃఆ͞ΕͨfunctionΛ࣮ߦ ࣮૷࣌ͷϙΠϯτ addListner͸BGϖʔδ͕ด͡Δͱফ͑Δ ઃఆ͞ΕͨΠϕϯτ͸
 ΞϯΠϯετʔϧ·Ͱ࢒ΔͬΆ͍ /* background.js */ ! // ΞϓϦΠϯεʔϧ࣌ chrome.runtime.onInstalled
 .addListener(onInit); ! // ΞϥʔϜىಈ࣌ chrome.alarms.onAlarm .addListener(onAlarm); ! function onInit() { // 5෼ִؒͰΞϥʔϜηοτ
 chrome.alarms.create( 'alerm', {periodInMinutes: 5}); save({hoge: 100}); } ! function onAlarm(alerm) { console.log(alerm, load().hoge); }
10. σʔλͷอଘ localStorageʹอଘ͢Δ Ωʔ(จࣈྻ)ͱ஋(จࣈྻ)ͷରͰ
 σʔλΛอଘ͢Δ ֦ு͝ͱʹݸผͷอଘྖҬʹͳ͍ͬͯΔ optionɺpopupɺbackgroundͳͲͰڞ༗Ͱ͖Δ JSONจࣈྻʹͯ͠อଘ͢Δ
 ࢖͍ํ͕جຊ background΍optionͳͲͰڞ௨ͯ͠ΞΫηε͢Δ ͷͰಡΈॻ͖ϝιουΛڞ༗ιʔεʹ
 هࡌ͢Δ ! function save(opts) { localStorage.options = JSON.stringify(opts); } ! function load() { return JSON.parse(
 localStorage.options); } ! save({ hoge: 10, fuga: 20)); ! opts = load(); console.log( opts.hoge );
11. ࣮ߦํ๏
12. ࣮ߦํ๏ 1. σϕϩούʔϞʔυΛON 2. ֦ுͷσΟϨΫτϦΛબ୒ 3. backgroundϖʔδͷDevToolΛ։͘
13. Chrome ΢ΣϒετΞͰެ։
14. Chrome΢ΣϒετΞͰެ։ https://chrome.google.com/webstore/ developer/dashboard
15. Chrome΢ΣϒετΞ GoogleͷΞΧ΢ϯτ͕͋Ε͹ར༻Ͱ͖Δ ॳճʹख਺ྉͱͯ͠US$5.00ͷࢧ෷͍͕ඞཁ 1ΞΧ΢ϯτͰ20ݸ·ͰΞϓϦΛެ։Ͱ͖Δ ΞϓϦ͝ͱʹɺετΞͰͷݕࡧՄ/ෆՄΛઃఆͰ͖Δ
 ʢURLΛ஌͍ͬͯΔਓͷΈʹެ։Λ͢Δʣ
16. ࠷௿ݶ༻ҙ͢Δ΋ͷ ΞϓϦΛѹॖͨ͠ZIPϑΝΠϧ manifestͷnameɺdescriptionɺversion͕ετΞͰ΋࢖ΘΕΔ version͸ɺΞϓϦΛߋ৽͢Δͱ͖ʹඞͣ਺஋͕૿͍͑ͯΔ͜ͱ͕ٻΊΒΕΔ 128x128ͷΞΠίϯ ਤܗʹؔͯ͠نఆ͕͋Δ ਤܗΛ96x96ͷେ͖͞ʹऩΊͯɺճΓ16px͸ಁ໌ʹ͢Δ ͳͲ ϓϩϞʔγϣϯը૾(εΫϦʔϯγϣοτ) ̍ຕ 1280x800 ·ͨ͸ 640x400 ! ஫ҙ: نఆ΍ඞཁͳ΋ͷ͸࣌ʑมΘΓɺϝʔϧͰमਖ਼ࢦ͕ࣔಧ͘
17. ͓·͚
18. ΞϓϦͷ͓͢͢ΊϑΝΠϧߏ ੒ ࣮ࡍͷΞϓϦͷσΟϨΫτϦΛ
 ̍ஈਂ͓ͯ͘͘͠ binʹެ։༻ZIPΛอଘ resʹ֤छը૾ϑΝΠϧͷฤू༻ૉࡐΛ อଘ icon͸ϑΝΠϧ໊ͰαΠζ͕෼͔ΔΑ ͏ʹ͢Δ optionͱbackgroundͰڞ༗͢Δ
 ॲཧΛcommon.jsʹ࣮૷ my-extension/ icon48.png | icon128.png manifest.json common.js background.js option.js | option.html jquery.js | angular.js | backbone.js etc... ! bin/ my-extension.zip ! res/ icon.psd promotion_images.psd
19. Developer's Guide
 http://developer.chrome.com/extensions/devguide.html Browser UI Browser Actions Context Menus Desktop Notifications Omnibox Options Pages Override Pages Page Actions Browser Interaction Bookmarks Cookies Extending DevTools Events History Management Tabs Windows Implementation Accessibility Event Pages Content Security Policy Content Scripts Cross-Origin XHR Internationalization Message Passing Optional Permissions NPAPI Plugins Finishing Hosting Other Deployment Options
20. “࣭໰ΛͲ͏ͧ”