Developing Chrome Extension with ruby.wasm Yuma Sawai 1

Agenda •About me •How Chrome Extension work with ruby.wasm •Chrome Extension Framework introduction •Impressions of participating as a speaker 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

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

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

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

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

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

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

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

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

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!

How to make it easier? 13

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

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

Demo: QuickStart 16

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

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

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

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!→

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

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

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

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

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

How framework works? This is when content_script loaded. 26

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

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

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

Impressions of participating as a speaker 30

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