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.1k
Other Decks in Technology
See All in Technology
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
370
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
The Rise of LLMOps
asei
7
1.4k
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
990
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
Lexical Analysis
shigashiyama
1
150
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
940
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
110
Featured
See All Featured
Fireside Chat
paigeccino
34
3k
Automating Front-end Workflow
addyosmani
1366
200k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Rails Girls Zürich Keynote
gr2m
94
13k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
RailsConf 2023
tenderlove
29
900
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
YesSQL, Process and Tooling at Scale
rocio
169
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
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
“࣭ΛͲ͏ͧ”