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
[MIERUNE] rubyのChrome拡張機能の開発について
Search
a774 nn
June 06, 2023
0
910
[MIERUNE] rubyのChrome拡張機能の開発について
a774 nn
June 06, 2023
Tweet
Share
More Decks by a774 nn
See All by a774 nn
Developing Chrome Extension with ruby.wasm
logiteca7
2
3.1k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Speed Design
sergeychernyshev
32
1.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing for Performance
lara
610
69k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
330
21k
The Invisible Side of Design
smashingmag
301
51k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
RubyでChrome拡張開発 澤井優真 1
目次 •自己紹介 •Chrome拡張機能がどのように動くか •Chrome拡張機能の説明 2
自己紹介 •北海道情報大学 3年 twitter: @3yUma_rb github: @aaaa777 興味のある分野: ネットワーク、セキュリティ 3
my avatar
ruby.wasmとは • WebAssembly上で実行できるRuby • ブラウザ上で実行できる 例: ruby-wasm-wasi/example/lucky.html 4 ↓ 1.
Click! ↑ 2. your luck!
Chrome拡張機能とは • ブラウザを便利にするための機能 • 例: Google翻訳 • ドラッグ部分を翻訳してくれる • アイコンクリックで翻訳ボックス表示
• JavaScriptとHTMLで作られる • インストールが簡単 • ほとんどのブラウザが対応 6
Chrome拡張機能の構成ファイル • Manifest.json • Chrome拡張の設定ファイル • Content Script • 特定のページでJSを読み込む機能
• Popup • ロゴクリック時のHTML表示機能 • Background(Service Worker) • バックグラウンドJS実行機能 and more… 7 拡張機能サンプル
どうすればRubyで動く? • manifest.jsonがそれぞれのイベントごとにファイルを読み込む • JS部分をruby.wasmで実装してみよう! 8
デモ: ruby.wasmのChrome拡張 demo extension on github: aaaa777/ruby-chrome-extension- demo 9
11 https://drive.google.com/file/d/1xb69MJu7W2yA MAgOn0A6pMEv6E7Cqr- c/view?usp=share_link デモ映像はこちら
ruby.wasmを利用した拡張機能の実装 • manifest.json - content-script.umd.jsを読み込む - これがruby.wasmのエントリー • content-script.umd.js -
rubyVMの初期化 - Fetch API越しにコード実行 • content-script.rb - DOM操作とリスナの登録 12
何を学んだか • Rubyで書きたい? • Rubyで書く必要がない • なぜJSを書いているのだ • 楽しくない •
JSが嫌いだ 素のJSで書いたほうがマシ 13 ↑ 面白くない!
どうすれば良くなる? 14
A. フレームワークを作ろう! • JSとruby.wasm実行 ファイルをまとめる • ロジック部分をapp.rb で記述 フレームワーク部分 15
フレームワークの名前 unloosen (ʌ̀nlúːsən) (発音揺れ防止) 16
デモ: クイックスタート 17
19 https://drive.google.com/file/d/1zHFjmMuZcwfHj I3X5nyYH8cnKJDFkDC1/view?usp=sharing デモ映像はこちら
デモ解説 • popup • element取得 • addEventListener('click') 20
コードの比較 21 JS ruby.wasm(unloosen) ruby.wasm
Try Unloosen! available on github/npm npm: unloosen-ruby-loader github: aaaa777/unloosen 22
bug reports, fork, requests are welcome!