Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How To Create Chrome Extensions
Search
namu
December 20, 2013
Technology
3
2.3k
How To Create Chrome Extensions
How To Create Chrome Extensions
M3 Tech Talk #16 2013/12/20 #m3dev
namu
December 20, 2013
Tweet
Share
More Decks by namu
See All by namu
analyze_logs_by_rake
namutaka
1
2.2k
Other Decks in Technology
See All in Technology
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
330
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
OPENLOGI Company Profile
hr01
0
67k
What’s new in Android development tools
yanzm
0
310
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
A designer walks into a library…
pauljervisheath
207
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Transcript
Chrome֦ுͷ࡞Γํ 2013/12/19 M3 Tech Talk #16 தଜوࢤ
Chrome Extensions ChromeΛ֦ு͢Δิॿπʔϧ HTMLͱJavaScriptͰ࡞͢Δ ! ެࣜαΠτΛࢀߟʹ ʮGetting Started tutorialʯͱ ʮRead
the Overviewʯʹ Λ௨͢ͱ͍͍ 20128݄͝Ζʹmanifest V2ʹͳͬ ͨͷͰωοτهࣄ ݹ͍߹͋Δ http://developer.chrome.com/ extensions/
Կ͕Ͱ͖Δ͔ ϒϥβʢJavaScriptʣͱͯ͠Ͱ͖Δ͜ͱͳΒେମͰ͖Δ JavaScriptCSSͰݟͨΛม͑Δ XHttpRequestͰ௨৴͕Ͱ͖Δ ීஈͷϒϥδϯάͱಉ͡CookieΛ͏ ΞϓϦઐ༻αʔό͔Βใऔಘʗอଘ ChromeͷػೳΛ͏ λϒ/Πϯυૢ࡞ɺϒοΫϚʔΫૢ࡞ɺσεΫτοϓ௨ bookmarksɺhistoryɺnewtabΛಠࣗϖʔδʹมߋ
࡞Γํ
browser action contents script popup background page page action option
page ओͳػೳͷ໊শ
֓ཁ manifest.jsonʹ֦ுͷΞϓϦઃఆΛఆٛ͢Δ ΞϓϦ໊ɺΞΠίϯɺόʔδϣϯɺݖݶఆٛͳͲΛهࡌ͢Δ ֤ػೳʹରԠ͚ͮΔϑΝΠϧΛఆٛ͢Δ ԼهͷURLͰ<֦ுݻ༗ID>͕υϝΠϯͱͳΔWebΞϓϦͩͱࢥ͍͍͑ chrome-extension://<֦ுݻ༗ID>/ʙ.html JQueryɺAngular.jsͳͲ֤छJSϥΠϒϥϦ͕͑Δ ཪଆͰ։͔ΕΔbackgroundϖʔδͰϝΠϯॲཧΛߦ͏ persistentύϥϝʔλʹैͬͯ̎ͭͷಈ࡞Ϟʔυ͕͋Δ ΞϓϦͷઃఆΛߦ͏ը໘Λoptionϖʔδͱͯ͠࡞͢Δ
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"] }
backgroundϖʔδ ΠϕϯτۦಈϞʔυʢEvent Pagesʣ ઃఆͨ͠ΠϕϯτͷൃՐ࣌ʹىಈʢϖʔδ͕։͔ΕΔʣ Ұఆ࣌ؒͰϓϩηε͕ऴΘΔ (ϖʔδ͕ด͡ΒΕΔ) ม͕ফ͑ΔͷͰదٓlocalStorageʹอଘ PCϦιʔεͷઅͷͨΊجຊతʹΠϕϯτۦಈϞʔυΛ͏ ! ৗறϞʔυʢBackground
Pagesʣ ৗʹϓϩηε͕ੜ͖͍ͯΔ
Πϕϯτ xxx.addListenerͰίʔϧόοΫΛઃఆ APIʹͯΠϕϯτΛઃఆ ΠϕϯτൃՐ࣌ͷྲྀΕ 1. background.jsΛಡΈࠐΉ 2. ಡΈࠐΉͳ͔ͰaddListnerΛઃఆ 3. addListnerͰઃఆ͞ΕͨfunctionΛ࣮ߦ
࣮࣌ͷϙΠϯτ addListnerBGϖʔδ͕ด͡Δͱফ͑Δ ઃఆ͞ΕͨΠϕϯτ ΞϯΠϯετʔϧ·ͰΔͬΆ͍ /* 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); }
σʔλͷอଘ localStorageʹอଘ͢Δ Ωʔ(จࣈྻ)ͱ(จࣈྻ)ͷରͰ σʔλΛอଘ͢Δ ֦ு͝ͱʹݸผͷอଘྖҬʹͳ͍ͬͯΔ optionɺpopupɺbackgroundͳͲͰڞ༗Ͱ͖Δ JSONจࣈྻʹͯ͠อଘ͢Δ ͍ํ͕جຊ backgroundoptionͳͲͰڞ௨ͯ͠ΞΫηε͢Δ ͷͰಡΈॻ͖ϝιουΛڞ༗ιʔεʹ
هࡌ͢Δ ! 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 );
࣮ߦํ๏
࣮ߦํ๏ 1. σϕϩούʔϞʔυΛON 2. ֦ுͷσΟϨΫτϦΛબ 3. backgroundϖʔδͷDevToolΛ։͘
Chrome ΣϒετΞͰެ։
ChromeΣϒετΞͰެ։ https://chrome.google.com/webstore/ developer/dashboard
ChromeΣϒετΞ GoogleͷΞΧϯτ͕͋Εར༻Ͱ͖Δ ॳճʹखྉͱͯ͠US$5.00ͷࢧ͍͕ඞཁ 1ΞΧϯτͰ20ݸ·ͰΞϓϦΛެ։Ͱ͖Δ ΞϓϦ͝ͱʹɺετΞͰͷݕࡧՄ/ෆՄΛઃఆͰ͖Δ ʢURLΛ͍ͬͯΔਓͷΈʹެ։Λ͢Δʣ
࠷ݶ༻ҙ͢Δͷ ΞϓϦΛѹॖͨ͠ZIPϑΝΠϧ manifestͷnameɺdescriptionɺversion͕ετΞͰΘΕΔ versionɺΞϓϦΛߋ৽͢Δͱ͖ʹඞ͕ͣ૿͍͑ͯΔ͜ͱ͕ٻΊΒΕΔ 128x128ͷΞΠίϯ ਤܗʹؔͯ͠نఆ͕͋Δ ਤܗΛ96x96ͷେ͖͞ʹऩΊͯɺճΓ16pxಁ໌ʹ͢Δ ͳͲ ϓϩϞʔγϣϯը૾(εΫϦʔϯγϣοτ) ̍ຕ
1280x800 ·ͨ 640x400 ! ҙ: نఆඞཁͳͷ࣌ʑมΘΓɺϝʔϧͰमਖ਼ࢦ͕ࣔಧ͘
͓·͚
ΞϓϦͷ͓͢͢ΊϑΝΠϧߏ ࣮ࡍͷΞϓϦͷσΟϨΫτϦΛ ̍ஈਂ͓ͯ͘͘͠ 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
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
“࣭ΛͲ͏ͧ”