$30 off During Our Annual Pro Sale. View Details »

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

a774 nn
June 06, 2023
460

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

a774 nn

June 06, 2023
Tweet

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