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!