[MIERUNE] rubyのChrome拡張機能の開発について

Transcript

1. RubyでChrome拡張開発 澤井優真 1
2. 目次 •自己紹介 •Chrome拡張機能がどのように動くか •Chrome拡張機能の説明 2
3. 自己紹介 •北海道情報大学 3年 twitter: @3yUma_rb github: @aaaa777 興味のある分野： ネットワーク、セキュリティ 3 my avatar
4. ruby.wasmとは • WebAssembly上で実行できるRuby • ブラウザ上で実行できる 例: ruby-wasm-wasi/example/lucky.html 4 ↓ 1. Click! ↑ 2. your luck!
5. Chrome拡張機能とは • ブラウザを便利にするための機能 • 例: Google翻訳 • ドラッグ部分を翻訳してくれる • アイコンクリックで翻訳ボックス表示 • JavaScriptとHTMLで作られる • インストールが簡単 • ほとんどのブラウザが対応 6
6. Chrome拡張機能の構成ファイル • Manifest.json • Chrome拡張の設定ファイル • Content Script • 特定のページでJSを読み込む機能 • Popup • ロゴクリック時のHTML表示機能 • Background(Service Worker) • バックグラウンドJS実行機能 and more… 7 拡張機能サンプル
7. どうすればRubyで動く？ • manifest.jsonがそれぞれのイベントごとにファイルを読み込む • JS部分をruby.wasmで実装してみよう! 8
8. デモ: ruby.wasmのChrome拡張 demo extension on github: aaaa777/ruby-chrome-extension- demo 9
9. 11 https://drive.google.com/file/d/1xb69MJu7W2yA MAgOn0A6pMEv6E7Cqr- c/view?usp=share_link デモ映像はこちら
10. ruby.wasmを利用した拡張機能の実装 • manifest.json - content-script.umd.jsを読み込む - これがruby.wasmのエントリー • content-script.umd.js - rubyVMの初期化 - Fetch API越しにコード実行 • content-script.rb - DOM操作とリスナの登録 12
11. 何を学んだか • Rubyで書きたい？ • Rubyで書く必要がない • なぜJSを書いているのだ • 楽しくない • JSが嫌いだ 素のJSで書いたほうがマシ 13 ↑ 面白くない！
12. どうすれば良くなる？ 14
13. A. フレームワークを作ろう！ • JSとruby.wasm実行 ファイルをまとめる • ロジック部分をapp.rb で記述 フレームワーク部分 15
14. フレームワークの名前 unloosen (ʌ̀nlúːsən) (発音揺れ防止) 16
15. デモ: クイックスタート 17
16. 19 https://drive.google.com/file/d/1zHFjmMuZcwfHj I3X5nyYH8cnKJDFkDC1/view?usp=sharing デモ映像はこちら
17. デモ解説 • popup • element取得 • addEventListener('click') 20
18. コードの比較 21 JS ruby.wasm(unloosen) ruby.wasm
19. Try Unloosen! available on github/npm npm: unloosen-ruby-loader github: aaaa777/unloosen 22 bug reports, fork, requests are welcome!