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
emacs helm likeな WebExtensions を作った話
Search
Hiroki Kumamoto
February 22, 2018
Programming
0
120
emacs helm likeな WebExtensions を作った話
tech talk about
https://github.com/kumabook/bebop/
Hiroki Kumamoto
February 22, 2018
Tweet
Share
More Decks by Hiroki Kumamoto
See All by Hiroki Kumamoto
How to implement timetable view on iOS
kumabook
0
71
Promiseを実装してみよう
kumabook
0
240
bff_tips.pdf
kumabook
0
42
Tips of server-side rendering with react + redux
kumabook
0
60
プロトコルを使って複数サービスを跨いだmusic playerを実装する
kumabook
2
440
merges sort
kumabook
0
71
lightweight introducing with reactive cocoa
kumabook
0
49
basic_sort
kumabook
0
66
git_peco_tips
kumabook
0
25
Other Decks in Programming
See All in Programming
Implementing Design Systems in Swift
seyfoyun
1
440
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
560
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
120
"config" ってなんだ? / What is "config"?
okashoi
0
250
Fast JSX: Don't clone props object #28768
yossydev
1
160
Try creating your own orderedmap
kazamori
1
170
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
440
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
74
5.2k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
The Cult of Friendly URLs
andyhume
74
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Facilitating Awesome Meetings
lara
43
5.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
Unsuck your backbone
ammeep
663
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Transcript
EMACS HELM LIKEͳ WEBEXTENSIONS Λ࡞ͬͨ@KUMABOOK WE’RE JAVASCRIPTERS@16TH
▸ Hiroki Kumamoto ▸ github, twitter @kumabook ▸ Software engineer
@ Spincoaster, Inc ▸ JavaScript, Swift, Ruby (rails), rust ࣗݾհ
TEXT ࠓ͢͜ͱ ▸ WebExtensionsͱ ▸ ࣗ࡞WebExtensions: bebopͷհ ▸ WebExtensionsͷϕετϓϥΫςΟε
TEXT WebExtensionsͱ ▸ ϒϥβͷػೳΛ֦ு͢Δͷ ▸ HTML+JavaScript+CSSͰ։ൃͰ͖Δ ▸ Ϋϩεϒϥβ ▸ extension
API ͕ඪ४༷ ▸ ϒϥβؒͷࠩҟ݁ߏ͋Δ
TEXT WebExtensionsͰͰ͖Δ͜ͱ ▸ WebϖʔδͷίϯςϯπΛมߋ ▸ AdBlock ▸ πʔϧόʔʹϝχϡʔɾΟδΣοτΛՃ ▸ QR
Code Image Generator
TEXT ࠓճ࡞ͬͨͷ ▸ Emacs helm on WebExtensions ▸ incremental completion
and selection narrowing framework ▸ Spotlightͱ͔pecoͱ͔ ▸ github.com/kumabook/bebop ▸ firefox bebop, chrome bebopͱ͔Ͱݕࡧ
TEXT ࠓճ࡞ͬͨͷ ▸ ΫΤϦͰީิΛߜΓࠐΜͰɺΞΫγϣϯΛ࣮ߦ ▸ ཤྺͷݕࡧɾআ ▸ ϒοΫϚʔΫͷݕࡧɾআ ▸ λϒͷҰׅআ
▸ Ϛεͳ͠Ͱ৭ʑͰ͖Δ
TEXT ࠓճ࡞ͬͨͷ ▸ Alternative to Vimperator ▸ mouseless browsing͕Ͱ͖ͨਆΞυΦϯ ▸
چΞυΦϯFirefox Quantum͔Β͓੦͖ʹ ▸ vimperatorຽ͕ଓग़ ▸ Related works: vim-vixen, tridactyl, Surfingkeys ▸ γϯϓϧʹཉ͍͠ػೳ͚ͩΛΓग़ͨ͠
TEXT WebExtensionsͷΞʔΩςΫνϟ
TEXT ΞʔΩςΫνϟ background script popup content script options ui ϝοηʔδύογϯά
TEXT ΞʔΩςΫνϟ ▸ ίϯϙʔωϯτʹΑͬͯͰ͖Δ͜ͱ͕ҧ͏ͷͰɺผίϯϙʔωϯ τʹॲཧΛҕৡ͢Δඞཁ͕͋Δ ▸ ίϯϙʔωϯτؒͷΓऔΓ ▸ ֤ίϯϙʔωϯτಠཱ࣮ͯ͠ߦɾ໊લۭؒผ ▸
֤ίϯϙʔωϯτؒͷΓऔΓϝοηʔδύογϯά ▸ PortͱݺΕ͍ͯΔ ▸ ඇಉظʹportʹϝοηʔδΛ͛߹͍ͳ͕Βॲཧ͕ਐΉ
TEXT ϕετϓϥΫςΟε ▸ WebExtensions։ൃͷ͠͞ ▸ ίʔϧόοΫhell ▸ ঢ়ଶཧͷ͠͞ ▸ react,
redux, redux-saga͕૬ੑΑ͔ͬͨ
TEXT react ▸ طଘͷίϯϙʔωϯτΛ࠶ར༻Ͱ͖Δ ▸ ϩʔΧϧ͔ΒεΫϦϓτΛಡΈࠐΉͷͰαΠζ͕Ͱ͔͍͜ͱ ؾʹͳΒͳ͍
TEXT redux ▸ popup ͱoptions uiͰreduxΛ༷ ▸ background script ͱcontent_scriptstateless
apiΛఏڙ ▸ options uiͱpopupؒstorage apiͰঢ়ଶΛڞ༗ ▸ options uiͱpopupഉଞత ▸ ด͡Δͱ͖ʹstateΛอଘͯ͠ɺ্ཱͪ͛Δͱ͖ʹϩʔυ͢Δ ▸ reduxͷinitial stateʹ͢Δ ▸ Storage apiڞ༗ͷඇಉظͳlocalStorage
TEXT Redux background script popup content script options ui STATELESSͳAPI
STORAGE APIͰ STATE ڞ༗ REDUX REDUX
TEXT redux-saga ▸ redux-sagaͷchannelΛ͏ ▸ ֎෦ͷΠϕϯτΛநԽͨ͠ͷ ▸ background scriptͷportͷϝοηʔδύογϯάΛϥοϓ ▸
ϝοηʔδͷܗࣜΛreduxͷactionͱಉ͡ܗࣜʹ͢Δ ▸ { type: String, payload: Any } ▸ ࣗಈతʹmessage͔Βactionʹม ▸ ಁաతʹbackground script͔ΒΞΫγϣϯΛdispatchͰ͖Δ
TEXT Redux background script popup REDUX-SAGA CHANNEL MESSAGE ACTION
TEXT ·ͱΊ ▸ WebExtensionsͷ։ൃʹ͍ͭͯͷ֓ཁ ▸ ࣗ࡞WebExtensions bebopͷհ ▸ ྑ͔ͬͨΒελʔΛΒ͑Δͱتͼ·͢ ▸
WebExtensions։ൃͰීஈͷWeb։ൃͷϑϨʔϜϫʔΫ ͑Δ ▸ react, redux, redux-saga