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にインストールする - WebExtensi...
Search
pastak
May 08, 2016
2
3.1k
Chrome Extensionを Firefoxにインストールする - WebExtension移植物語
pastak
May 08, 2016
Tweet
Share
More Decks by pastak
See All by pastak
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
440
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
110
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
830
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
400
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
680
手を動かして始めるアクセシビリティ改善
pastak
3
1.6k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.9k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
0
1.2k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Bash Introduction
62gerente
610
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Faster Mobile Websites
deanohume
305
30k
A better future with KSS
kneath
238
17k
Code Reviewing Like a Champion
maltzj
521
39k
Music & Morning Musume
bryan
46
6.3k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
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 ΛՃͯ͑͠Δ४උΛ͍ͯ͠Δ