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
570
[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
1
2k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
22
3k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Statistics for Hackers
jakevdp
790
220k
BBQ
matthewcrist
80
8.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
How to name files
jennybc
65
93k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
The Cult of Friendly URLs
andyhume
74
5.7k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
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!