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
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
困難を「一般解」で解く
fujiwara3
7
1.6k
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
180
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
860
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
140
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
340
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
200
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
350
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.3k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Bash Introduction
62gerente
611
210k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Code Reviewing Like a Champion
maltzj
521
39k
Practical Orchestrator
shlominoach
186
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
4 Signs Your Business is Dying
shpigford
183
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
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
“࣭ΛͲ͏ͧ”