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
430
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
99
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
820
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
390
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
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Faster Mobile Websites
deanohume
305
30k
It's Worth the Effort
3n
183
28k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Unsuck your backbone
ammeep
669
57k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Automating Front-end Workflow
addyosmani
1366
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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 ΛՃͯ͑͠Δ४උΛ͍ͯ͠Δ