Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing Chrome Extension with ruby.wasm

Developing Chrome Extension with ruby.wasm

Ruby3.2 supports WASM and can run ruby.wasm on the browser. As a way to incorporate it into a working application, I came up with the idea of building a Ruby framework for Chrome extensions. I will present its mechanism and goals.

a774 nn

May 12, 2023
Tweet

More Decks by a774 nn

Other Decks in Programming

Transcript

  1. Developing Chrome Extension
    with ruby.wasm
    Yuma Sawai
    1

    View Slide

  2. Agenda
    •About me
    •How Chrome Extension work with ruby.wasm
    •Chrome Extension Framework introduction
    •Impressions of participating as a speaker
    2

    View Slide

  3. About me
    •Hokkaido Joho Univ. B3
    twitter: @3yUma_rb
    github: @aaaa777
    •Interested in Network and Security
    •Participating Hardening Decade 2022
    • Hardening Designers Conference 2023@5/18
    3
    my avatar

    View Slide

  4. About ruby.wasm
    • Ruby executable on WebAssembly
    • Running ruby on browser!
    ex: ruby-wasm-wasi/example/lucky.html
    4
    ↓ 1. Click!
    ↑ 2. your luck!

    View Slide

  5. Ruby.wasm is here, but how do we use it?
    • There are still few applications using ruby.wasm. why?
    • There are **NO** articles using gems in ruby.wasm
    • vfs is very useful but there is **NO** article to pack gems.
    • irb.wasm can load gem easily but it patched own.
    • Ruby on browser script can execute ruby, but it can't do more than that.
    I think the development environment of library is not perfect yet
    I believe easier development leads to more developers
    • Aiming to make easy developing ruby.wasm!
    • And deepen knowledge through chrome extension development
    5

    View Slide

  6. About Chrome extension
    • Makes Browser more useful
    • ex: Google Translation Extension
    • Translates the dragged part.
    • Pops up when you press the icon.
    • Using JavaScript and HTML
    • Easy installation
    • Most of browser supports
    6

    View Slide

  7. How Chrome Extension works?
    • Manifest.json
    • Chrome Extension configuration file
    • Content Script
    • Load JS on specified page(url match)
    • Popup
    • Show HTML page when icon is clicked
    • Background(Service Worker)
    • Run JS while browser is running
    and more…
    7
    directory structure example

    View Slide

  8. How I replaced it with ruby.wasm
    • Determines which file manifest.json reads for each event
    • These files can be written with ruby.wasm!
    8

    View Slide

  9. Demo: Simple Extension with ruby.wasm
    demo extension on github:
    aaaa777/ruby-chrome-extension-demo
    9

    View Slide

  10. 10
    https://drive.google.com/file/d/1xb69MJu7W2yA
    MAgOn0A6pMEv6E7Cqr-c/view?usp=share_link
    demo video available at:

    View Slide

  11. How ruby.wasm chrome extension works
    • manifest.json
    - Load content-script.js
    - This is ruby.wasm entrypoint
    • content-script.umd.js
    - Init rubyVM
    - Eval code via Fetch API
    • content-script.rb
    - Control DOM
    11

    View Slide

  12. What I learnt from implementing extension
    • Want to write ruby?
    even like this code?
    • Doesn't have to be Ruby
    • Why do I have to write JS
    • I don't enjoy writing
    • I hate JS
    =It's better to write plain JS
    12
    ↑ not fun!

    View Slide

  13. How to make it easier?
    13

    View Slide

  14. Answer: Make a framework!
    • Bundle JS files and
    ruby.wasm
    • All scripts in app.rb
    Frameworked area
    14

    View Slide

  15. The framework name
    unloosen
    (ʌ̀nlúːsən)
    15

    View Slide

  16. Demo: QuickStart
    16

    View Slide

  17. 17
    https://drive.google.com/file/d/1zHFjmMuZcwfHjI
    3X5nyYH8cnKJDFkDC1/view?usp=sharing
    demo video available at:

    View Slide

  18. Demo explanation
    • when popup
    • get element
    • addEventListener 'click' button
    18

    View Slide

  19. Unloosen key features
    1. Files in one code
    2. Remote require
    3. Live reload
    4. Simple Syntax
    5. All you need is only browser
    19

    View Slide

  20. 1. Files in one code
    • No need to manage
    separate files for
    each event.
    • Define URL match
    on Application side.
    • Libraries are packed
    already.
    20
    Unloosen extension files common extension files
    files only you manage!→

    View Slide

  21. 2. Remote require
    • in chrome extension, using fetch() to access local resource
    • access url format: "chrome-ext:///"
    • I want to add "chrome-ext:///" to $LOADPATH😢
    override require (Main singleton method)
    21
    problem
    • Dependencies not resolved
    usage

    View Slide

  22. 2. Remote require
    • override require_relative, too.
    • GET relative to script URL
    • see also: lib/unloosen/utils/require_remote.rb
    22

    View Slide

  23. 3. Live reload
    • Since using require_remote, changes are applied by reloading
    • In case of using VFS, need pack every time
    • Load library via fetch API
    • This is helpful for developing library
    23

    View Slide

  24. 4. Simple syntax
    • document, console, alert… defined in toplevel scope.
    • patched JS::Object#method_missing
    24
    • Almost became a JS syntax
    • see also: unloosen/utils/js.rb

    View Slide

  25. 5. All you need is only browser
    Common extension
    • I want to change the code a little!
    • clone repo but I cant edit minified JS file…
    • need dev environment to rebuild
    Unloosen
    • Files you prepare
    • prebuilt Unloosen JS files
    • json files of config
    • application ruby script
    • resources
    25

    View Slide

  26. How framework works?
    This is
    when content_script loaded.
    26

    View Slide

  27. Compare Other Frameworks
    note: But Unloosen takes about 300+MB memories each RubyVM.
    Plasmo Unloosen
    language React(JS) Ruby
    complie/build required not necessary
    functions many simple
    27

    View Slide

  28. Next features
    •Write article, documents
    •VFS online gem bundle site
    •Auto generate manifest.json
    •Cross build MV2 and MV3
    •API for indexedDB, LocalStorage
    28

    View Slide

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

    View Slide

  30. Impressions of participating
    as a speaker
    30

    View Slide

  31. Impressions
    • Difficult part in development
    • It is difficult to decide the specification of the library
    • Give me feedback!
    • How I became a Speaker
    • After seeing @kateinoigakukun last year, I thought I'd like to participate
    here someday.
    • It has come true.
    • I never thought I'd be standing here last year.
    • So let's try things that you wanna.
    31

    View Slide