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

More Decks by a774 nn

Other Decks in Programming


  1. Agenda •About me •How Chrome Extension work with ruby.wasm •Chrome

    Extension Framework introduction •Impressions of participating as a speaker 2
  2. 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
  3. About ruby.wasm • Ruby executable on WebAssembly • Running ruby

    on browser! ex: ruby-wasm-wasi/example/lucky.html 4 ↓ 1. Click! ↑ 2. your luck!
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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!
  10. Answer: Make a framework! • Bundle JS files and ruby.wasm

    • All scripts in app.rb Frameworked area 14
  11. 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
  12. 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!→
  13. 2. Remote require • in chrome extension, using fetch() to

    access local resource • access url format: "chrome-ext://<id>/<path>" • I want to add "chrome-ext://<id>/" to $LOADPATH😢 override require (Main singleton method) 21 problem • Dependencies not resolved usage
  14. 2. Remote require • override require_relative, too. • GET relative

    to script URL • see also: lib/unloosen/utils/require_remote.rb 22
  15. 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
  16. 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
  17. 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
  18. 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
  19. Next features •Write article, documents •VFS online gem bundle site

    •Auto generate manifest.json •Cross build MV2 and MV3 •API for indexedDB, LocalStorage 28
  20. 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