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
Chrome Extensionを Firefoxにインストールする - WebExtension移植物語
Search
pastak
May 08, 2016
2
2.9k
Chrome Extensionを Firefoxにインストールする - WebExtension移植物語
pastak
May 08, 2016
Tweet
Share
More Decks by pastak
See All by pastak
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
1.9k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
510
手を動かして始めるアクセシビリティ改善
pastak
3
1.4k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.7k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
0
1k
コミュニティが持続可能であるために考えておきたいこと/How to kill your community
pastak
0
2.8k
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
pastak
31
12k
ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon
pastak
3
3.5k
150人のOB会の主催をやった話 #yapcfukuoka #yapcjapan
pastak
0
2.4k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Visualization
eitanlees
136
14k
Facilitating Awesome Meetings
lara
42
5.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
How to name files
jennybc
65
93k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Scaling GitHub
holman
457
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Transcript
Chrome ExtensionΛ FirefoxʹΠϯετʔϧ͢Δ Pasta-K
[email protected]
͜Μʹͪ
Πϯλʔωοτ׆ಈ twitter.com/pastak id: Pasta-K pastak.hatenablog.com pastak-diary.hatenadiary.com github.com/pastak
None
None
࠷ॳʹͪ͜ΒΛ ޚཡ͍ͩ͘͞ ※͜͜ͰFirefox BetaΛ্ཱͪ͛ͯσϞΛ͢Δ
None
(ZB[P"EEPO GPS'JSFGPY $PNJOH4PPO
(ZB[P"EEPO GPS'JSFGPY IUUQTBEEPOTNP[JMMBPSH BEEPOHZB[PPGpDJBM ※Firefox 47.0a1Ҏ্ରԠ
8FC&YUFOTJPO
'JSFGPYʹ ΠϯετʔϧՄೳ ʹͳͬͨ৽ͨͳ ΞυΦϯͷܗࣜ
$ISPNF &YUFOTJPOͱ ΄΅ޓੑ͕͋Δ
$ISPNF&YUFOTJPOͷ ࢿ࢈Λͦͷ··׆༻ͯ͠ ϢʔβʔΛ͛ΒΕΔ
Firefoxͷϒϥβ֦ுܗࣜ • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm)
• ChromeExtensionޓͷίʔυܗࣜ • Web Extensionʂ
࠷৽ͷݱঢ় • Firefox v46 (ݱࡏͷStable) Ͱalphaʹͳͬͨ • 2016-08-02ʹstableೖΓ͢Δ༧ఆͷFirefox v48Ͱstable ʹͳΔඪ
• chrome -> browser • addon.mozilla.org ʹΞοϓϩʔυ͢Δ͜ͱͰॺ໊Մೳʹ • ΞοϓϩʔυΛͬͯ͘ΕΔίϚϯυϥΠϯπʔϧ web-ext ͋Δ • ະ࣮ͷAPI͔ͳΓݮ͖ͬͯͨ • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions/Chrome_incompatibilities
࠷৽ͷݱঢ় • https://blog.mozilla.org/addons/2016/04/29/ webextensions-in-firefox-48/ • Optionϖʔδαϙʔτྃ • chrome.*APIΛݺͳ͍όά͕͋Δʁ • Firefox
48 AndroidͰαϙʔτ༧ఆ • ։ൃதΞυΦϯͷreload • https://github.com/mozilla/web-ext • https://github.com/mdn/webextensions- examples
٢ใ
.P[JMMB.4 0QFSBͷऀ͕ ֦ுػೳͷίΞ"1* ͷඪ४ԽΛఏҊ
• ʰW3CͷBrowser Extension Community GroupͷϝʔϦϯάϦετʹ͓͍ͯɺϒϥ βͷ֦ுػೳʹ͓͚ΔίΞAPIϚχϑΣε τɺύοέʔδΛඪ४Խ͢Δ͜ͱΛڞಉͰఏ Ҋͨ͠ɻʱ • http://rockridge.hatenablog.com/entry/
2016/05/05/110059 • https://dev.opera.com/blog/better- extensions-ecosystem/ • https://github.com/browserext/browserext • https://twitter.com/browserext
NBOJGFTUKTPO ඇޓ
manifest.jsonඇޓ • ͍͔ͭ͘ͷະ࣮Ωʔ • ͍͔ͭ͘ͷະ࣮ϓϩύςΟ • ChromeExtensionͰ(ݱঢ়)invalidͳ applicationΩʔ
manifest.jsonඇޓ • ͍͔ͭ͘ͷະ࣮Ωʔ • ͍͔ͭ͘ͷະ࣮ϓϩύςΟ • ChromeExtensionͰ(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ
manifest.jsonඇޓ • ͍͔ͭ͘ͷະ࣮Ωʔ • ͍͔ͭ͘ͷະ࣮ϓϩύςΟ • ChromeExtensionͰ(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ
Chromeʹ ΠϯετʔϧෆՄ
ݱঢ়྆ํͰಈ͘ NBOJGFTUKTPO ࡞Εͳ͍
None
NBOJGFTUKTPO ͳΜͱ͔ͯ͘͠ΕΔ܅ ࡞ͬͨ
8FC&YUFOTJPO .BOJGFTU 'PSNBUUFS
https://github.com/pastak/wemf
What’s wemf • ඞؚͣ·Ε͍ͯΔ͖ΩʔͱରԠ͢ΔΛՃ • ෆ͍ͯ͠ΔΩʔ͕͋Δ߹ package.json ͳͲ͔Βੜͭ͠ ͭɺରΠϯλʔϑΣΠεͰੜ͠·͢ •
ະରԠͷΩʔΛআ • ݱঢ়ະରԠͷΩʔ͕͋ΔͱΠϯετʔϧʹࣦഊ͢ΔͷͰɺͦͷ Α͏ͳΩʔΛআ͠·͢ɻ • ະରԠͷΩʔϫʔυͷ༻Λ௨ • web_accessible_resourcesͰϫΠϧυΧʔυ͕͑ͳ͍ͳͲ͕ ͋ΔͷͰɺͦͷΑ͏ͳΩʔϫʔυΛؚΜͰ͍Δ߹আͤͣ ʹ௨͠·͢ɻ
None
ຊʹ$ISPNF &YUFOTJPO ͕ͦͷ·· ಈ͘ͷʁʁʁ
ײ֮తʹׂ ͘Β͍ͷ &YUFOTJPO γϡοͱҠ২Մೳ
ײ֮తʹׂ ͘Β͍ͷ &YUFOTJPO γϡοͱҠ২Մೳ $ISPNF4UPSFͰ ެ։͞Ε͍ͯΔͷͷ͏ͪ ͦͷ··'JSFGPY%FTLUPQͰ ಈ͘ͷ IUUQXXXBSFXFXFCFYUFOTJPOTZFUDPN
DISPNF
Ҡ২ͷ͛ʹ ͳΓͦ͏ͳࣄ
Ҡ২ͷ࣌ʹ֬ೝ͍ͨ͜͠ͱ • JS / CSS / HTML ͷͦΕͧΕ࣮ରԠঢ়گ • -webkit-*ͬͯͳ͍ʁ
• JSͷAPICSSͷৼΔ͍ຊʹಉ͡ʁ • http://caniuse.com/ • chrome.*API ͷରԠঢ়گ • http://www.arewewebextensionsyet.com/ • APIͷҰཡ / ؔ࿈ bugzillaͷࢀর / filterͱ͔͕͋ͬͯศར • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions/Chrome_incompatibilities
ಛʹؾΛ͚͍ͭͨະ࣮API • chrome.notifications.update • chrome.runtime.onStartup • chrome.runtime.onInstalled • chrome.storage.sync •
chrome.tabs.sendRequest • chrome.tabs.getSelected • chrome.tabs.* ͷdeprecatedͱ͞Ε͍ͯΔAPI
࣮ࡍʹ ͬͯΈͨ
HJUIVCDPNIBUFOB IBUFOBCPPLNBSL HPPHMFDISPNF FYUFOTJPO
Ռ
HJUIVCDPNQBTUBL IBUFOBCPPLNBSL HPPHMFDISPNF FYUFOTJPOQVMM ※͜͜ͰFirefox BetaʹΠϯετʔϧ͢Δͱ͜Ζ͔ΒσϞ
࡞ۀEJGG
None
• src/firefox/manifest.json +78 • src/firefox/config.js +3 • src/firefox/_locales/ja/messages.json +8 •
src/firefox/_locales/en_US/messages.json +8 • Rakefile +3 -1 • .gitignore +1 • ۭߦɾߦεϖʔεܗͳͲ +15 -22
• src/firefox/manifest.json +78 • src/firefox/config.js +3 • src/firefox/_locales/ja/messages.json +8 •
src/firefox/_locales/en_US/messages.json +8 • Rakefile +3 -1 • .gitignore +1 • ۭߦɾߦεϖʔεܗͳͲ +17 -24 ࣮࣭: +46 -17
ͬͨ͜ͱ
ͯϒ֦ுʹࡍͯͬͨ͜͠ͱ • chrome.tabs.getSelected • Chrome33͔ΒdeprecatedʹͳͬͯΔ • ·ͩChromeͰҰԠಈ࡞͢ΔAPI • chrome.tabs.queryͰॻ͖͑Δ
ͯϒ֦ுʹࡍͯͬͨ͜͠ͱ • chrome.runtime.onInstalled • Web Extensionʹະ࣮ͳAPI • https://bugzilla.mozilla.org/show_bug.cgi? id=1252871 •
ͱΓ͋͑ͣ try {…} catch (e) {…} Ͱғ͓ͬͯ͘ • αϙʔτࡁʹͳΔͱಈ࡞͢ΔΑ͏ʹͳΔ
ͯϒ֦ுʹࡍͯͬͨ͜͠ͱ • Web SQL෦ΛదʹϞοΫͯ͠͝·͔͢ • ϒοΫϚʔΫͷݕࡧͳͲʹWeb SQLΛͬͯ ͍ͨͷͰͦͷ෦ΛଞͷదͳAPIͳͲͰॻ͖ ͑ΔͷϋʔυͳͷͰɺͱΓ͋͑ͣϞοΫ͠ ͯಈ͘Α͏ʹ࣋ͪࠐΉ
ͯϒ֦ுʹࡍͯͬͨ͜͠ͱ • CSSΛ΄Μͷͪΐͬͱඍௐ
Ҡ২ྃ
ग़དྷͳ͍͜ͱ
• Πϯετʔϧ࣌ʹར༻نΛදࣔͰ͖ͳ͍ • ݕࡧʹWebSQLΛར༻͍ͯ͠ΔͷͰɺҠ২ෆՄೳ • ΠϯετʔϧޙʹϩάΠϯ͢ΔͱϢʔβʔใͷɹ ࠶औಘ͕Βͳ͍ • ϙοϓΞοϓͷදࣔαΠζ͕ෆ҆ఆ •
ઃఆը໘දࣔෆՄ • XUL൛ͷΑ͏ʹπʔϧόʔͳͲͷࡉ͔ͳػೳՃ ෆՄೳ
·ͱΊ
·ͱΊ • ࠓ·ͰChrome ExtensionOperaʹՃ͑ͯɺFirefoxͷϢʔβʔʹ ΄΅ಉ͡ίʔυͰExtensionΛఏڙग़དྷΔΑ͏ʹͳͬͨ • MSఏҊʹ͍ͬͯΔͷͰɺকདྷతʹMS EdgeؒೖΓ͠ ͦ͏ʁ •
SafariͲ͏ͳΔʁʁ • ֤ϕϯμʔͷಠ֦ࣗுೝΊΒΕ͍ͯΔͷͰɺͲ͜·ͰฏԺͳڥ ʹͳΔ͔ࠓޙ࣍ୈ • ͢ͰʹOperasidebarΛ࣮͍ͯ͠Δ • MozillaϢʔβʔͷଟ͍ز͔ͭͷAddon͕ҠߦͰ͖ΔΑ͏ʹAPI ΛՃͯ͑͠Δ४උΛ͍ͯ͠Δ