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.2k
Chrome Extensionを Firefoxにインストールする - WebExtension移植物語
pastak
May 08, 2016
Tweet
Share
More Decks by pastak
See All by pastak
Helpfeelがアクセシビリティにどのように取り組み始めて、どこまで来れたのか/Helpfeel Accessibility 2025-07
pastak
3
410
LT: JavaScript / HTML カルトクイズ
pastak
0
130
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
500
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
170
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
920
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
470
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4.6k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
770
手を動かして始めるアクセシビリティ改善
pastak
3
1.7k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
BBQ
matthewcrist
89
9.8k
How to Ace a Technical Interview
jacobian
279
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Statistics for Hackers
jakevdp
799
220k
Facilitating Awesome Meetings
lara
55
6.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Large-scale JavaScript Application Architecture
addyosmani
513
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 ΛՃͯ͑͠Δ४උΛ͍ͯ͠Δ