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.
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 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!
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
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
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
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
logiteca7
youtalk
skanehira
ivargrimstad
slsops
mkeeda
gmvalentino8
hazumirr
terhechte
tapompom
suzukihoge
hschwentner
eileencodes
nonsquared
addyosmani
morganepeng
aleyda
carmenintech
garrettdimon
cherdarchuk
philhawksworth
mza
lara
sstephenson