RubyでChrome拡張開発澤井優真1
View Slide
目次•自己紹介•Chrome拡張機能がどのように動くか•Chrome拡張機能の説明2
自己紹介•北海道情報大学 3年twitter: @3yUma_rbgithub: @aaaa777興味のある分野:ネットワーク、セキュリティ3my avatar
ruby.wasmとは• WebAssembly上で実行できるRuby• ブラウザ上で実行できる例: ruby-wasm-wasi/example/lucky.html4↓ 1. Click!↑ 2. yourluck!
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-demo9
11https://drive.google.com/file/d/1xb69MJu7W2yAMAgOn0A6pMEv6E7Cqr-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
19https://drive.google.com/file/d/1zHFjmMuZcwfHjI3X5nyYH8cnKJDFkDC1/view?usp=sharingデモ映像はこちら
デモ解説• popup• element取得• addEventListener('click')20
コードの比較21JSruby.wasm(unloosen)ruby.wasm
Try Unloosen!available on github/npmnpm: unloosen-ruby-loadergithub: aaaa777/unloosen22bug reports, fork, requests are welcome!