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
160
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
100
Promiseを実装してみよう
kumabook
0
310
bff_tips.pdf
kumabook
0
79
Tips of server-side rendering with react + redux
kumabook
0
78
プロトコルを使って複数サービスを跨いだmusic playerを実装する
kumabook
2
580
merges sort
kumabook
0
79
lightweight introducing with reactive cocoa
kumabook
0
55
basic_sort
kumabook
0
72
git_peco_tips
kumabook
0
30
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Flutterと Vibe Coding で個人開発!
hyshu
1
270
私の後悔をAWS DMSで解決した話
hiramax
4
140
Langfuseと歩む生成AI活用推進
licux
3
300
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
980
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
Featured
See All Featured
A better future with KSS
kneath
239
17k
Code Reviewing Like a Champion
maltzj
525
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Optimizing for Happiness
mojombo
379
70k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
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