BrowserExtension四方山話 #yapc8oji

Slide 1

Slide 1 text

Browser Extension ࢛ํࢁ࿩ Pasta-K [email protected] [email protected] [email protected]

Slide 2

Slide 2 text

͜Μʹͪ͸

Slide 3

Slide 3 text

@pastakɹ

Slide 4

Slide 4 text

@pastakɹ • ژ౎͔Βདྷ·ͨ͠ • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React • Ruby on Rails • Browser Extension

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

http://blogja.gyazo.com/entry/135895105588

Slide 7

Slide 7 text

Gyazo Features

Slide 8

Slide 8 text

ؔ࿈ը૾ݕࡧ Ivy Search

Slide 9

Slide 9 text

OCR

Slide 10

Slide 10 text

ը૾ฤूػೳ

Slide 11

Slide 11 text

ڞ༗ίϨΫγϣϯ

Slide 12

Slide 12 text

https://chrome.google.com/webstore/detail/gyazo/ ffdaeeijbbijklfcpahbghahojgfgebo

Slide 13

Slide 13 text

https://addons.mozilla.org/ﬁrefox/addon/gyazo-ofﬁcial/

Slide 14

Slide 14 text

We are hiring!! • ݄ؒ1000ສUU 6600ສPV / month • JavaScript / Ruby on Rails / Golang • iOS / Mac / Windows App • Kyoto or Everywhere • Tokyo, Yokohama, Hokkaido • USA, Australia https://www.wantedly.com/companies/nota

Slide 15

Slide 15 text

ຊ೔ͷ ্ژ໨త

Slide 16

Slide 16 text

ϒϥ΢β֦ு։ൃ ༑ୡཉ͍͠

Slide 17

Slide 17 text

༑ͩͪʹ ͳͬͯ͘Εʂʂ

Slide 18

Slide 18 text

ຊ೔ͷ͓඼ॻ͖ • ϒϥ΢β֦ு͓͞Β͍ • Chrome Extensionʹ͍ͭͯ • WebExtensionݱঢ়֬ೝ • ։ൃTipsখ࿩ू

Slide 19

Slide 19 text

ຊ೔ͷొ৔͠ͳ͍ϒϥ΢β֦ு • Internet Explorer • Safari

Slide 20

Slide 20 text

ϒϥ΢β֦ு ͓͞Β͍

Slide 21

Slide 21 text

ϒϥ΢β֦ுͬͯԿʁʁ

Slide 22

Slide 22 text

ϒϥ΢β֦ுͬͯԿʁʁ • ϒϥ΢βʹΠϯετʔϧ͢Δͱ

Slide 23

Slide 23 text

ϒϥ΢β֦ுͬͯԿʁʁ • ϒϥ΢βʹΠϯετʔϧ͢Δͱ • ৭Μͳػೳ͕૿͑ͯศརͳ΍ͭ

Slide 24

Slide 24 text

ϒϥ΢β֦ுͬͯԿʁʁ • ϒϥ΢βʹΠϯετʔϧ͢Δͱ • ৭Μͳػೳ͕૿͑ͯศརͳ΍ͭ • DeveloperTool, Utility, Downloader etc…

Slide 25

Slide 25 text

ϒϥ΢β֦ுͬͯԿʁʁ • ϒϥ΢βʹΠϯετʔϧ͢Δͱ • ৭Μͳػೳ͕૿͑ͯศརͳ΍ͭ • DeveloperTool, Utility, Downloader etc… • Adblock, Greasemonkey, Firebug, ͸ͯͳϒ οΫϚʔΫ, Evernote, Pocket, Gyazo…

Slide 26

Slide 26 text

ϒϥ΢β֦ு͜Ε·Ͱ • Chrome, Opera • JS + CSS + HTML Ͱ࡞੒Մೳ • Firefox • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm) ͋͋ • Safari • JS + CSS + HTML Ͱ࡞੒Մೳ • ୠ͠ɺAPI͸Chromeͱେ͖͘ҟͳΔ

Slide 27

Slide 27 text

ϒϥ΢β֦ு͜Ε͔Β • Chrome, Opera • JS + CSS + HTML Ͱ࡞੒Մೳ • Firefox • XUL + XPCOMΛ༻͍ͨ։ൃ ← ഇࢭ༧ఆ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm) • Chromeޓ׵ͷWebExtension ← NEW!!!!!!!! • Safari • JS + CSS + HTML Ͱ࡞੒Մೳ • ୠ͠ɺAPI͸Chromeͱେ͖͘ҟͳΔ ※༏ઌॱҐ͸ ߴ͘ͳ͍ͦ͏ͳͷͰ ͙͢ʹഇࢭ͸ͳͦ͞͏

Slide 28

Slide 28 text

ϒϥ΢β֦ு*͞Βʹ*͜Ε͔Β • Mozilla/MS/Operaͷ3ऀ͕֦ுػೳͷίΞAPIͷඪ४Խ ΛఏҊ • W3CͷBrowser Extension Community GroupͷϝʔϦ ϯάϦετʹ͓͍ͯɺϒϥ΢βͷ֦ுػೳʹ͓͚ΔίΞ API΍ϚχϑΣετɺύοέʔδΛඪ४Խ͢Δ͜ͱΛڞ ಉͰఏҊ • http://rockridge.hatenablog.com/entry/ 2016/05/05/110059 • https://github.com/browserext/browserext • https://twitter.com/browserext

Slide 29

Slide 29 text

https://developer.microsoft.com/en-us/microsoft-edge/extensions

Slide 30

Slide 30 text

https://developer.microsoft.com/en-us/microsoft-edge/extensions

Slide 31

Slide 31 text

Coming to MS Edge ? • ݱࡏϓϨϏϡʔͰ͍͔ͭ͘ެ։͞ΕͯΔ • ϥΠϯφοϓΛݟͯΔͱɺChrome Extension ޓ׵ͬΆ͍Α͏ʹݟ͑Δ • WGʹ΋ࢀՃ͍ͯ͠Δ͖ͬ͠ͱͦ͏ͳΓͦ͏ • “in the future users will be able to download extensions from the Windows Store.” • https://developer.microsoft.com/en-us/ microsoft-edge/platform/faq/#extensions

Slide 32

Slide 32 text

$ISPNF &YUFOTJPO

Slide 33

Slide 33 text

Chrome Extensionͱ͸ʁ • ։ൃ͸ JS / HTML / CSSͰߦ͏ • docs: https://developer.chrome.com/extensions • Background / content script / popup • ഑෍͸ Chrome Web Store • ແ৹ࠪ / ࠷ॳʹ$5ࢧ෷͏ ਤ͸ https://developer.chrome.com/extensions/overview ΑΓ

Slide 34

Slide 34 text

Chrome / Opera • Opera͸Chromiumϕʔεͷϒϥ΢βͳͷͰجຊతʹ͸ͦͷ·· ಈ࡞͢Δ • https://dev.opera.com/extensions/ • Chrome Web Store͔ΒOperaʹΠϯετʔϧՄೳʹ͢Δ ExtensionͳΜͯ΋ͷ΋͋Δ • Sidebar΍Speed DialͳͲҰ෦OperaͷΈͰ࢖͑ΔAPI΋͋Δ • https://dev.opera.com/extensions/apis/

Slide 35

Slide 35 text

8FC &YUFOTJPO PO'JSFGPY

Slide 36

Slide 36 text

Firefox Addonͷ͜Ε·Ͱ • XUL + XPCOMΛ༻͍ͨ։ൃ • Addon-SDKΛ༻͍ͨ։ൃ (crx / jpm) • ݩ “Jetpack” • JSͰखܰʹFirefox֦ுΛهड़Մೳʹ • ৄ͘͠͸ http://www.slideshare.net/pastak/ ﬁrefox-addon-sdk

Slide 37

Slide 37 text

WebExtensionొ৔ • 2015೥8݄຤ ChromeExtensionޓ׵ͷWebExtension ܗࣜͷ֦ுΛαϙʔτ͢Δͱൃද • Firefox v46Ͱ Alpha Releaseʹ • 2016-08-02ͰStableʹͳΔ v48 Ͱ Stable Releaseͷ ༧ఆ • σεΫτοϓ޲͚ͷΈͳΒͣɺ Android൛΋ରԠର ৅ʂʂʂʂʂʂʂʂ • ͢ͰʹAMO͔ΒͷΠϯετʔϧͳͲ͸Մೳʹͳͬͯ ͍Δ

Slide 38

Slide 38 text

࠷৽ঢ়گ • ॾʑ΍ͬͯ͘ΕΔίϚϯυϥΠϯπʔϧ web-ext ొ ৔ • Build, Signɺauto run • https://blog.mozilla.org/addons/2016/04/29/ webextensions-in-ﬁrefox-48/ • Optionϖʔδαϙʔτ׬ྃ • chrome.*APIΛݺ΂ͳ͍όά͕͋Δʁ • ։ൃதΞυΦϯͷreload • TabMixPlusͳͲஶ໊ͳAddon༻ͷAPIΛ४උ͍ͯ͘͠

Slide 39

Slide 39 text

ϋΠϒϦουΞυΦϯ • ௿ϨΠϠʔAPIͳͲΛར༻͍ͨ͠ΞυΦϯͳͲʹ޲͚ͯͷ ஈ֊తॲஔʢ࠶ىಈෆཁΞυΦϯͰ͋Δඞཁ͕͋Δʣ • Addon SDKͰ࡞ͬͨΞυΦϯ͔ΒWeb Extensionͷػೳ Λݺͼग़ͯ͠ར༻Ͱ͖Δ • chrome.runtime.sendMessageܦ༝Ͱ΍ΓͱΓ͢Δ • API͕શͯἧͬͨ࣌఺ͰwebextensionσΟϨΫτϦҎ֎ Λഁغ͢Δ͜ͱͰҠߦ׬ྃͱͰ͖Δ • ݱࡏઈࢍ࣮૷த https://bugzilla.mozilla.org/show_bug.cgi?id=1252215

Slide 40

Slide 40 text

(ZB[Pͷ ϒϥ΢β֦ு

Slide 41

Slide 41 text

https://chrome.google.com/webstore/detail/gyazo/ ffdaeeijbbijklfcpahbghahojgfgebo

Slide 42

Slide 42 text

https://addons.mozilla.org/ﬁrefox/addon/gyazo-ofﬁcial/

Slide 43

Slide 43 text

8FC&YUFOTJPO ͷԸܙͰͭͷ ιʔείʔυ͔Β ੜ੒͍ͯ͠Δ

Slide 44

Slide 44 text

ͦΖͦΖ ΍͍͖ͬͯͨ͘ ͳ͖ͬͯ·ͨ͠ ͔ʁ

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

ຊ౰ʹ$ISPNF &YUFOTJPO ͕ͦͷ·· ಈ͘ͷʁʁʁ

Slide 47

Slide 47 text

ײ֮తʹ͸ׂ ͘Β͍ͷ &YUFOTJPO͸ γϡοͱҠ২Մೳ

Slide 48

Slide 48 text

ײ֮తʹ͸ׂ ͘Β͍ͷ &YUFOTJPO͸ γϡοͱҠ২Մೳ $ISPNF4UPSFͰ ެ։͞Ε͍ͯΔ΋ͷͷ͏ͪ ͦͷ··'JSFGPY%FTLUPQͰ ಈ͘΋ͷ͸ IUUQXXXBSFXFXFCFYUFOTJPOTZFUDPN DISPNF

Slide 49

Slide 49 text

Ҡ২ͷ࣌ʹ֬ೝ͍ͨ͜͠ͱ • JS / CSS / HTML ͷͦΕͧΕ࣮૷ରԠঢ়گ • JSͷAPI΍CSSͷৼΔ෣͍͸ຊ౰ʹಉ͡ʁ • http://caniuse.com/ • chrome.*API ͷରԠঢ়گ • http://www.arewewebextensionsyet.com/ • APIͷҰཡ / ؔ࿈ bugzilla΁ͷࢀর / ﬁlterͱ͔͕ ͋ͬͯศར • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions/Chrome_incompatibilities

Slide 50

Slide 50 text

NBOJGFTUKTPO ඇޓ׵໰୊

Slide 51

Slide 51 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ

Slide 52

Slide 52 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ

Slide 53

Slide 53 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ Chromeʹ ΠϯετʔϧෆՄ

Slide 54

Slide 54 text

ݱঢ়྆ํͰಈ͘ NBOJGFTUKTPO ͸࡞Εͳ͍

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

NBOJGFTUKTPO ͳΜͱ͔ͯ͘͠ΕΔ܅ ࡞ͬͨ

Slide 57

Slide 57 text

8FC&YUFOTJPO .BOJGFTU 'PSNBUUFS

Slide 58

Slide 58 text

https://github.com/pastak/wemf

Slide 59

Slide 59 text

What’s wemf • ඞؚͣ·Ε͍ͯΔ΂͖ΩʔͱରԠ͢Δ஋Λ௥Ճ • ෆ଍͍ͯ͠ΔΩʔ͕͋Δ৔߹͸ package.json ͳͲ͔Βੜ੒ͭ͠ ͭɺର࿩ΠϯλʔϑΣΠεͰੜ੒͠·͢ • ະରԠͷΩʔΛ࡟আ • ݱঢ়ະରԠͷΩʔ͕͋ΔͱΠϯετʔϧʹࣦഊ͢ΔͷͰɺͦͷ Α͏ͳΩʔΛ࡟আ͠·͢ɻ • ະରԠͷΩʔϫʔυͷ࢖༻Λ௨஌ • web_accessible_resourcesͰϫΠϧυΧʔυ͕࢖͑ͳ͍ͳͲ͕ ͋ΔͷͰɺͦͷΑ͏ͳΩʔϫʔυΛؚΜͰ͍Δ৔߹͸࡟আͤͣ ʹ௨஌͠·͢ɻ

Slide 60

Slide 60 text

ͱ͜Ζ͕Ͳ͍ͬ͜

Slide 61

Slide 61 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ Chromeʹ ΠϯετʔϧෆՄ

Slide 62

Slide 62 text

manifest.jsonඇޓ׵໰୊ • ͍͔ͭ͘ͷະ࣮૷Ωʔ • ͍͔ͭ͘ͷະ࣮૷ϓϩύςΟ • ChromeExtensionͰ͸(ݱঢ়)invalidͳ applicationΩʔ Firefoxʹ ΠϯετʔϧෆՄ Chromeʹ ΠϯετʔϧෆՄ ㊗ΞυΦϯͷID͕ແͯ͘΋ ςετͰ͖ΔΑ͏ʹ͢Δ࢓૊Έ͕ೖͬͨɻ

Slide 63

Slide 63 text

8FC &YUFOTJPO ࣄ࢝Ί

Slide 64

Slide 64 text

ͱʹ͔͘ಈ͔ͯ͠Έ͍ͨਓ޲͚ • https://github.com/mdn/webextensions-examples • αϯϓϧ͍ͬͺ͍͋ΔͷͰద౰ʹམͱ͖ͯͯ͠Πϯετʔ ϧͯ͠ΈΔ • νϡʔτϦΞϧ • https://developer.mozilla.org/en-US/Add-ons/ WebExtensions • https://developer.chrome.com/extensions/getstarted

Slide 65

Slide 65 text

Exports Chrome Extension 1. manifest.json ฤू͢Δ • wemf ࢖͏ͱγϡοͱग़དྷΔ͸ͣ 2. ඇޓ׵CSS / JS ରࡦ 3. Πϯετʔϧͯ͠ಈ͔ͯ͠ΈΔ 4. ڍಈͷո͍͠෦෼Λ try-catch ͢Δ • bugzilla ͱ͔ͱ͔ʹ৘ใͳ͍͔ݟΔ • NightlyͰࢼͯ͠ΈΔ • Ͳ͏͠Α͏΋ແͦ͞͏ͳΒbugzilla

Slide 66

Slide 66 text

Exports Chrome Extension • ͸ͯͳϒοΫϚʔΫChrome֦ுͰ΍ͬͯΈͨ https://speakerdeck.com/pastak/chrome-extensionwo- ﬁrefoxniinsutorusuru-webextensionyi-zhi-wu-yu

Slide 67

Slide 67 text

࡞ۀEJGG

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

• 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

Slide 70

Slide 70 text

Slide 71

Slide 71 text

΍ͬͨ͜ͱ

Slide 72

Slide 72 text

͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • chrome.tabs.getSelected • Chrome33͔ΒdeprecatedʹͳͬͯΔ • ·ͩChromeͰ͸ҰԠಈ࡞͢ΔAPI • chrome.tabs.queryͰॻ͖׵͑Δ

Slide 73

Slide 73 text

͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • chrome.runtime.onInstalled • Web Extensionʹະ࣮૷ͳAPI • https://bugzilla.mozilla.org/show_bug.cgi? id=1252871 • ͱΓ͋͑ͣ try {…} catch (e) {…} Ͱғ͓ͬͯ͘ • αϙʔτࡁʹͳΔͱಈ࡞͢ΔΑ͏ʹͳΔ

Slide 74

Slide 74 text

͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • Web SQL෦෼Λద౰ʹϞοΫͯ͠͝·͔͢ • ϒοΫϚʔΫͷݕࡧͳͲʹWeb SQLΛ࢖ͬͯ ͍ͨͷͰͦͷ෦෼Λଞͷద౰ͳAPIͳͲͰॻ͖ ׵͑Δͷ͸ϋʔυͳͷͰɺͱΓ͋͑ͣϞοΫ͠ ͯಈ͘Α͏ʹ࣋ͪࠐΉ

Slide 75

Slide 75 text

͸ͯϒ֦ுʹࡍͯ͠΍ͬͨ͜ͱ • CSSΛ΄Μͷͪΐͬͱඍௐ੔

Slide 76

Slide 76 text

Ҡ২׬ྃ

Slide 77

Slide 77 text

ग़དྷͳ͍͜ͱ

Slide 78

Slide 78 text

• Πϯετʔϧ࣌ʹར༻ن໿ΛදࣔͰ͖ͳ͍ • ݕࡧʹWebSQLΛར༻͍ͯ͠ΔͷͰɺҠ২ෆՄೳ • ΠϯετʔϧޙʹϩάΠϯ͢ΔͱϢʔβʔ৘ใͷɹ ࠶औಘ͕૸Βͳ͍ • ϙοϓΞοϓͷදࣔαΠζ͕ෆ҆ఆ • ઃఆը໘දࣔෆՄ • XUL൛ͷΑ͏ʹπʔϧόʔͳͲͷࡉ΍͔ͳػೳ௥Ճ ͸ෆՄೳ

Slide 79

Slide 79 text

Case of Gyazo Extension • ͸ͯͳϒοΫϚʔΫChrome֦ுͷྫͱ΄΅ಉ͡ • Firefox ඇରԠͷCSSͳͲΛͳΜͱ͔͢Δ • JSͷৼΔ෣͍ͷࠩ෼Λٵऩ • AMOͷϨϏϡʔ௨աରࡦ • innerHTMLͰࡶʹྲྀ͠ࠐΜͰ͍ͨͱ͜ΖͳͲΛஸೡʹ ͢Δ • messaging APIͳͲͷόά͕࣏Δ v47 ͕ betaೖΓ͢Δ λΠϛϯάͰެ։ • ReleaseೖΓͨ͠λΠϛϯάͰgyazo.com͔Β༠ಋ https://github.com/gyazo/gyazo-browser-extension/pull/151/

Slide 80

Slide 80 text

Case of Gyazo Extension • ࢖͑ͳ͍(ະ࣮૷) / όΪʔͳAPIΛճආ • Clipboard / Context Menu / Storage.sync etc • Clipboard͸·ͩ͜Ε͔Βʁ • Context Menu͸imageͷ਺͚ͩitemΛaddͯ͠͠ ·͏όά͕͕͋ͬͨv49Ͱमਖ਼ • Storage.sync΋͜Ε͔Β • Storage.localͳΒ࢖͑Δ • Firefox SyncͷΞΧ΢ϯτͱ૊Έ߹Θͤͯɺ΍ͬ ͍ͯ͘ʁ https://github.com/gyazo/gyazo-browser-extension/pull/151/

Slide 81

Slide 81 text

ͦͷଞͷ ࡉ΍͔ରԠ 5JQT঺հ

Slide 82

Slide 82 text

ϒϥ΢β֦ுϦϦʔεࣗಈԽ • Chrome Web Store͸API͕͋ΔͷͰϦϦʔε ࣗಈԽ͕Մೳ • JSͰϞδϡʔϧॻ͍ͯ npm/chrome- webstore-manager Ͱެ։ͯ͠Δ • AMO΋Sign༻ͷΤϯυϙΠϯτͳͲ͸͋Δ

Slide 83

Slide 83 text

GitHubͰPRΛ merge refresh token Kick! extension.zip ΛPOST upload & publish ݁ՌΛ௨஌ %#ʹ UPLFOΛೖΕΔʂ ։ൃऀ

Slide 84

Slide 84 text

GitHubͰPRΛ merge refresh token Kick! extension.zip ΛPOST upload & publish ݁ՌΛ௨஌ %#ʹ UPLFOΛೖΕΔʂ ։ൃऀ

Slide 85

Slide 85 text

https://github.com/pastak/chrome-extension-release-heroku

Slide 86

Slide 86 text

IFSPLVEFQMPZ ϘλϯҰൃͰ ଈ͝ར։࢝༻Մೳ

Slide 87

Slide 87 text

Staging Build • CI্ͰͦΕͧΕBuild & Signͯ͠ɺGitHubͷ DeployAPIͰ௨஌ • ࣮ࡍʹࣾ಺ͳͲͰࢼͯ͠໯ͬͨޙʹެ։

Slide 88

Slide 88 text

Install Staging Build • Chrome Extension͸खݩͰSignՄೳ • Πϯετʔϧ͸Ұ౓ϩʔΧϧΛܦ༝͢Δඞཁ͕͋Δ • Web Extension͸AMOΛܦ༝ͯ͠Sign • SignAPIΛར༻͢Δͱ਺ेඵͰSign͞Εͯμ΢ϯϩʔυ༻URL ͕ൃߦ͞ΕΔ • ຊ൪༻ͱ͸ҧ͏idΛ෇͚͓ͯ͘ඞཁ͕͋Δ • Version΋ຖճ্͕Βͳ͍ͱ͍͚ͳ͍ • ͜ͷล͸Build࣌ʹྑ͍ײ͡ʹ • Version Λ YY.MM.DD.HHmm ͱ͔ʹ͢Δͱvalid׌ͭྑ ͍ײ͡ʹͳΔʁ

Slide 89

Slide 89 text

ΤϥʔϝοηʔδϋϯυϦϯά • ChromeͩͱɺChrome Web Store΍GoogleͷϩάΠϯ ϖʔδͳͲʹcontent scriptΛinjection͠Α͏ͱ͢Δͱ ʰ~~cannot be scriptedʱͱ͍͏message͕ඈΜͰ͘Δ • Firefox͸࣮૷͕ҧ͍ͦ͏ͳͷͰɺྑ͍ײ͡ʹ͍ͯ͠ ͘ඞཁ͕͋Γͦ͏ • ͦͷΑ͏ͳϖʔδͰ͸ injectionग़དྷͳ͍ͷͰɺϘλϯ Λdisableʹ͢Δ

Slide 90

Slide 90 text

chrome.tabs.captureCurrentTab • RetinaσΟεϓϨΠͳͲͷHigh DPI؀ڥରࡦ • GyazoExtensionͰ͸window.devicePixelRatioͳͲΛ ར༻ͯ͠αΠζΛॖখͨ͠Γ͍ͯ͠Δ • ChromeͱFirefoxͰ͸औಘͰ͖Δը૾ͷαΠζ͕ҟͳΔ • Chrome: ࣮ϐΫηϧ਺ͷΩϟϓνϟ • Firefox: දࣔϐΫηϧαΠζͷΩϟϓνϟ • Retinaͷ৔߹ɺFirefoxͰऔಘͰ͖ΔΩϟϓνϟͷ ը૾ͷԣ/ॎ෯͸Chromeͷ1/2ʹͳΔ

Slide 91

Slide 91 text

moz-extension://ͷѻ͍ • chrome-extension:// ΋ಉ౳ʹѻ͓͏ͱ͍͏issue ͕͋Δ͜ͱʹ͸͋Δ • CSSͷதͰ__MSG_@@extension_id__Λల։͠ ͨΓग़དྷͳ͍ • HTML಺ʹmoz-extension:// ͷը૾ͳͲΛల։ ͢ΔͱCSPʹҾ͔͔ͬΔ • Blob΋ಉ༷ͷ໰୊Λ๊͍͑ͯΔ

Slide 92

Slide 92 text

·ͱΊ

Slide 93

Slide 93 text

·ͱΊ • Chrome ExtensionͱFirefoxͷWeb Extension͸ͦΕͳ Γʹޓ׵͕͋Δ • ·ͩWebExtensionʹ͸ະ࣮૷ͩͬͨΓ଍Γͳ͍෦෼ ͕͋ΔͷͰɺͦͷ͋ͨΓ͸ͲΜͲΜࢦఠ͍ͯ͘͠ͱ ྑͦ͞͏ • ϒϥ΢β֦ு͕͋Δ͔Βͦ͜ఏڙͰ͖Δମݧ͕͋Δ ͸ͣͳͷͰɺͦͷลΓ͕1ͭͷن֨ͷதͰఏڙͰ͖Δ ͷ͸ྑ͍͜ͱ • Edge͸ޙ௥͍ͦ͠͏ɻSafari͸Ͳ͏ͳΔʁʁ

Slide 94

Slide 94 text

͜ͷൃදͰ ڵຯΛ࣋ͬͨ ͋ͳͨʂʂʂ

Slide 95

Slide 95 text

ϒϥ΢β֦ு ։ൃ༑ͩͪʹ ͳΓ·͠ΐ͏

Slide 96

Slide 96 text

http://www.irasutoya.com/2015/04/blog-post_642.html http://www.irasutoya.com/2013/08/blog-post_2234.html http://www.irasutoya.com/2013/07/blog-post_2112.html

Slide 97

Slide 97 text

ͦΕͱ ౤ථ΋པΉ https://vote.yapcasia8oji-2016mid.hachiojipm.org/talk/64/vote_form

Slide 98

Slide 98 text

৘ใऩूϦϯΫू • https://blog.mozilla.org/addons/ • Mozilla Addonϒϩάʹఆظతʹ৘ใࡌΔ • http://www.arewewebextensionsyet.com/ • ࣮૷ঢ়گ΍όάͳͲΛͬ͟ͱҰཡͰ͖Δ • https://developer.mozilla.org/en-US/Add-ons/WebExtensions • MDNͷ։ൃऀ޲͚υΩϡϝϯτ • https://bugzilla.mozilla.org/buglist.cgi? component=WebExtensions&product=Toolkit&bug_status=_ _open__&list_id=13093986 • WebExtensionؔ࿈ͷissueҰཡ