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
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
370
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
430
GitHub Copilot の概要
tomokusaba
1
150
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
220
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
140
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
180
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
210
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
160
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why Our Code Smells
bkeepers
PRO
337
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Documentation Writing (for coders)
carmenintech
72
4.9k
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
“࣭ΛͲ͏ͧ”