Slide 1

Slide 1 text

Developing Chrome Extension with ruby.wasm Yuma Sawai 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 MAgOn0A6pMEv6E7Cqr-c/view?usp=share_link demo video available at:

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

How to make it easier? 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Demo: QuickStart 16

Slide 17

Slide 17 text

17 3X5nyYH8cnKJDFkDC1/view?usp=sharing demo video available at:

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

How framework works? This is when content_script loaded. 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Impressions of participating as a speaker 30

Slide 31

Slide 31 text

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