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
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
What’s new in Android development tools
yanzm
0
310
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
130
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Scaling GitHub
holman
460
140k
Speed Design
sergeychernyshev
32
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How GitHub (no longer) Works
holman
314
140k
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
“࣭ΛͲ͏ͧ”