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
98
Promiseを実装してみよう
kumabook
0
310
bff_tips.pdf
kumabook
0
78
Tips of server-side rendering with react + redux
kumabook
0
76
プロトコルを使って複数サービスを跨いだmusic playerを実装する
kumabook
2
570
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
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
11k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
860
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.3k
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
300
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
120
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Jakarta EE Meets AI
ivargrimstad
0
500
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.5k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
400
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Building Adaptive Systems
keathley
43
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Music & Morning Musume
bryan
46
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Building an army of robots
kneath
306
45k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Facilitating Awesome Meetings
lara
54
6.5k
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