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

Transcript

1. RubyでChrome拡張開発
   澤井優真
   1
   

   View Slide

2. 目次
   •自己紹介
   •Chrome拡張機能がどのように動くか
   •Chrome拡張機能の説明
   2
   

   View Slide

3. 自己紹介
   •北海道情報大学 3年
   twitter: @3yUma_rb
   github: @aaaa777
   興味のある分野：
   ネットワーク、セキュリティ
   3
   my avatar
   

   View Slide

4. ruby.wasmとは
   • WebAssembly上で実行できるRuby
   • ブラウザ上で実行できる
   例: ruby-wasm-wasi/example/lucky.html
   4
   ↓ 1. Click!
   ↑ 2. your
   luck!
   

   View Slide

5. Chrome拡張機能とは
   • ブラウザを便利にするための機能
   • 例: Google翻訳
   • ドラッグ部分を翻訳してくれる
   • アイコンクリックで翻訳ボックス表示
   • JavaScriptとHTMLで作られる
   • インストールが簡単
   • ほとんどのブラウザが対応
   6
   

   View Slide

6. Chrome拡張機能の構成ファイル
   • Manifest.json
   • Chrome拡張の設定ファイル
   • Content Script
   • 特定のページでJSを読み込む機能
   • Popup
   • ロゴクリック時のHTML表示機能
   • Background(Service Worker)
   • バックグラウンドJS実行機能
   and more…
   7
   拡張機能サンプル
   

   View Slide

7. どうすればRubyで動く？
   • manifest.jsonがそれぞれのイベントごとにファイルを読み込む
   • JS部分をruby.wasmで実装してみよう!
   8
   

   View Slide

8. デモ: ruby.wasmのChrome拡張
   demo extension on github:
   aaaa777/ruby-chrome-extension-
   demo
   9
   

   View Slide

9. 11
   https://drive.google.com/file/d/1xb69MJu7W2yA
   MAgOn0A6pMEv6E7Cqr-
   c/view?usp=share_link
   デモ映像はこちら
   

   View Slide

10. ruby.wasmを利用した拡張機能の実装
    • manifest.json
    - content-script.umd.jsを読み込む
    - これがruby.wasmのエントリー
    • content-script.umd.js
    - rubyVMの初期化
    - Fetch API越しにコード実行
    • content-script.rb
    - DOM操作とリスナの登録
    12
    

    View Slide

11. 何を学んだか
    • Rubyで書きたい？
    • Rubyで書く必要がない
    • なぜJSを書いているのだ
    • 楽しくない
    • JSが嫌いだ
    素のJSで書いたほうがマシ
    13
    ↑ 面白くない！
    

    View Slide

12. どうすれば良くなる？
    14
    

    View Slide

13. A. フレームワークを作ろう！
    • JSとruby.wasm実行
    ファイルをまとめる
    • ロジック部分をapp.rb
    で記述
    フレームワーク部分
    15
    

    View Slide

14. フレームワークの名前
    unloosen
    (ʌ̀nlúːsən)
    (発音揺れ防止)
    16
    

    View Slide

15. デモ: クイックスタート
    17
    

    View Slide

16. 19
    https://drive.google.com/file/d/1zHFjmMuZcwfHj
    I3X5nyYH8cnKJDFkDC1/view?usp=sharing
    デモ映像はこちら
    

    View Slide

17. デモ解説
    • popup
    • element取得
    • addEventListener('click')
    20
    

    View Slide

18. コードの比較
    21
    JS
    ruby.wasm(unloosen)
    ruby.wasm
    

    View Slide

19. Try Unloosen!
    available on github/npm
    npm: unloosen-ruby-loader
    github: aaaa777/unloosen
    22
    bug reports, fork, requests are welcome!
    

    View Slide