Slide 1

Slide 1 text

Chrome֦ுͷ࡞Γํ 2013/12/19 M3 Tech Talk #16 தଜوࢤ

Slide 2

Slide 2 text

Chrome Extensions ChromeΛ֦ு͢Δิॿπʔϧ HTMLͱJavaScriptͰ࡞੒͢Δ ! ެࣜαΠτΛࢀߟʹ ʮGetting Started tutorialʯͱ
 ʮRead the Overviewʯʹ
 ໨Λ௨͢ͱ͍͍ 2012೥8݄͝Ζʹmanifest V2ʹͳͬ ͨͷͰωοτهࣄ͸
 ݹ͍৔߹΋͋Δ http://developer.chrome.com/ extensions/

Slide 3

Slide 3 text

Կ͕Ͱ͖Δ͔ ϒϥ΢βʢJavaScriptʣͱͯ͠Ͱ͖Δ͜ͱͳΒେମͰ͖Δ JavaScript΍CSSͰݟͨ໨Λม͑Δ XHttpRequestͰ௨৴͕Ͱ͖Δ ීஈͷϒϥ΢δϯάͱಉ͡CookieΛ࢖͏ ΞϓϦઐ༻αʔό͔Β৘ใऔಘʗอଘ ChromeͷػೳΛ࢖͏ λϒ/΢Πϯυ΢ૢ࡞ɺϒοΫϚʔΫૢ࡞ɺσεΫτοϓ௨஌ bookmarksɺhistoryɺnewtabΛಠࣗϖʔδʹมߋ

Slide 4

Slide 4 text

࡞Γํ

Slide 5

Slide 5 text

browser action contents script popup background page page action option page ओͳػೳͷ໊শ

Slide 6

Slide 6 text

֓ཁ manifest.jsonʹ֦ுͷΞϓϦઃఆΛఆٛ͢Δ ΞϓϦ໊ɺΞΠίϯɺόʔδϣϯɺݖݶఆٛͳͲΛهࡌ͢Δ ֤ػೳʹରԠ͚ͮΔϑΝΠϧΛఆٛ͢Δ ԼهͷURLͰ<֦ுݻ༗ID>͕υϝΠϯͱͳΔWebΞϓϦͩͱࢥ͑͹͍͍ chrome-extension://<֦ுݻ༗ID>/ʙ.html JQueryɺAngular.jsͳͲ֤छJSϥΠϒϥϦ͕࢖͑Δ ཪଆͰ։͔ΕΔbackgroundϖʔδͰϝΠϯॲཧΛߦ͏ persistentύϥϝʔλʹैͬͯ̎ͭͷಈ࡞Ϟʔυ͕͋Δ ΞϓϦͷઃఆΛߦ͏ը໘Λoptionϖʔδͱͯ͠࡞੒͢Δ

Slide 7

Slide 7 text

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"] }

Slide 8

Slide 8 text

backgroundϖʔδ ΠϕϯτۦಈϞʔυʢEvent Pagesʣ ઃఆͨ͠ΠϕϯτͷൃՐ࣌ʹىಈʢϖʔδ͕։͔ΕΔʣ Ұఆ࣌ؒͰϓϩηε͕ऴΘΔ (ϖʔδ͕ด͡ΒΕΔ) ม਺͕ফ͑ΔͷͰదٓlocalStorageʹอଘ PCϦιʔεͷઅ໿ͷͨΊجຊతʹΠϕϯτۦಈϞʔυΛ࢖͏ ! ৗறϞʔυʢBackground Pagesʣ ৗʹϓϩηε͕ੜ͖͍ͯΔ

Slide 9

Slide 9 text

Πϕϯτ 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); }

Slide 10

Slide 10 text

σʔλͷอଘ 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 );

Slide 11

Slide 11 text

࣮ߦํ๏

Slide 12

Slide 12 text

࣮ߦํ๏ 1. σϕϩούʔϞʔυΛON 2. ֦ுͷσΟϨΫτϦΛબ୒ 3. backgroundϖʔδͷDevToolΛ։͘

Slide 13

Slide 13 text

Chrome ΢ΣϒετΞͰެ։

Slide 14

Slide 14 text

Chrome΢ΣϒετΞͰެ։ https://chrome.google.com/webstore/ developer/dashboard

Slide 15

Slide 15 text

Chrome΢ΣϒετΞ GoogleͷΞΧ΢ϯτ͕͋Ε͹ར༻Ͱ͖Δ ॳճʹख਺ྉͱͯ͠US$5.00ͷࢧ෷͍͕ඞཁ 1ΞΧ΢ϯτͰ20ݸ·ͰΞϓϦΛެ։Ͱ͖Δ ΞϓϦ͝ͱʹɺετΞͰͷݕࡧՄ/ෆՄΛઃఆͰ͖Δ
 ʢURLΛ஌͍ͬͯΔਓͷΈʹެ։Λ͢Δʣ

Slide 16

Slide 16 text

࠷௿ݶ༻ҙ͢Δ΋ͷ ΞϓϦΛѹॖͨ͠ZIPϑΝΠϧ manifestͷnameɺdescriptionɺversion͕ετΞͰ΋࢖ΘΕΔ version͸ɺΞϓϦΛߋ৽͢Δͱ͖ʹඞͣ਺஋͕૿͍͑ͯΔ͜ͱ͕ٻΊΒΕΔ 128x128ͷΞΠίϯ ਤܗʹؔͯ͠نఆ͕͋Δ ਤܗΛ96x96ͷେ͖͞ʹऩΊͯɺճΓ16px͸ಁ໌ʹ͢Δ ͳͲ ϓϩϞʔγϣϯը૾(εΫϦʔϯγϣοτ) ̍ຕ 1280x800 ·ͨ͸ 640x400 ! ஫ҙ: نఆ΍ඞཁͳ΋ͷ͸࣌ʑมΘΓɺϝʔϧͰमਖ਼ࢦ͕ࣔಧ͘

Slide 17

Slide 17 text

͓·͚

Slide 18

Slide 18 text

ΞϓϦͷ͓͢͢ΊϑΝΠϧߏ ੒ ࣮ࡍͷΞϓϦͷσΟϨΫτϦΛ
 ̍ஈਂ͓ͯ͘͘͠ 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

“࣭໰ΛͲ͏ͧ”