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
3k
Chrome Extensionを Firefoxにインストールする - WebExtension移植物語
pastak
May 08, 2016
Tweet
Share
More Decks by pastak
See All by pastak
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
410
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
73
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
780
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
370
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
3.7k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
650
手を動かして始めるアクセシビリティ改善
pastak
3
1.6k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.8k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
0
1.1k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Facilitating Awesome Meetings
lara
50
6.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
What's in a price? How to price your products and services
michaelherold
243
12k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Language of Interfaces
destraynor
154
24k
A Philosophy of Restraint
colly
203
16k
Ruby is Unlike a Banana
tanoku
96
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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 ΛՃͯ͑͠Δ४උΛ͍ͯ͠Δ