RubyKaigi 2023 参加記 #2 - Develop chrome extension with ruby.wasm (Day1)

こんにちは！

2022 年にWantedly に新卒入社し、DX Squad でエンジニアをしている大森です。

今回は、日本最大の Ruby に関するカンファレンスである RubyKaigi に Wantedly がスポンサードし、いくつかの講演を聴講しています。Wantedly はスポンサーブースを設けていて、アンケートに答えてくださった方にはRubyKaigi 2023 のために描き下ろした技術書をお渡ししており、Twitterをフォローしてくださった方には過去のTechBookなどを配布しています。

本記事では、1日目の発表である Develop chrome extension with ruby.wasm (Day1) について紹介させていただきます。

Develop 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.

https://rubykaigi.org/2023/presentations/3yUma%E2%82%8Brb.html#day1

この発表では、Ruby で chrome 拡張を実装するためのフレームワークの紹介と、そのデモが行われました。

Develop chrome extension with ruby.wasm (Day1)

RubyKaigi 公式ページ: https://rubykaigi.org/2023/presentations/3yUma₋rb.html#day1

この発表は、北海道大学の Sawai さんの発表でした。Sawai さんは、去年の RubyKaigi の Keynote を聞いて登壇してみたいと思ったそうです。結果今年登壇されているというのは、とても素晴らしい KaigiEffect だと思い刺激を受けました。

ちなみに、去年の WebAssembly に関する keynoteのまとめも書いています。興味を持たれた方は読んでみてください。

RubyKaigi 2022 参加記 #1 - Ruby meets WebAssembly(Day1 Keynote) | Wantedly Engineer Blog

こんにちは！2022 年にWantedly に新卒入社し、DX Squad でエンジニアをしている大森です。今回は、日本最大の Ruby に関するカンファレンスである RubyKaigi に Wantedly がスポンサードし、いくつかの講演を聴講しています。Wantedly はスポンサーブースを設けていて、Twitterをフォローしてくださった方には技術書や開発に役立つ Engineering Handbook をプレゼントしています！ Wantedly では Ruby が多く使われており、Ruby

https://www.wantedly.com/companies/wantedly/post_articles/430691

ruby.wasm を使ってアプリケーションを書きたい

去年の Keynote は、 WebAssembly 上で Ruby を動かすことができるようになった、という発表でした。この発表の後、WebAssembly 上で Ruby を動かすアプリケーションが増えるかな、と思っていたのですが、実際にはそうはならなかったと Sawai さんは考えています。

Sawaiさんは、あまり出てこなかった原因を WebAssembly で Ruby を動かすまでのハードルの高さが原因ではないかと考察しています。

この課題を解決する一環として、Ruby で Chrome拡張を書くためのフレームワークである、unloosen の実装が行われました。

GitHub - aaaa777/unloosen

Unloosen is Chrome extension framework! download libraries In this time, download loader-content-script.esm.js and module-content-script.esm.js and place same dir. load extension In your browser, toggle on developer mode and select load unpackaged extensi

https://github.com/aaaa777/unloosen

unloosen のよいところ

chrome 拡張を実装するときに unloosen を利用するメリットとして、5つ挙げられていました。

管理すべきファイルが少なくなる
- unloosen がフレームワークとして動作するため、自分で管理するべきファイルが少なくなる
拡張機能の読み込み方法の更新 (Remote Require)
- unloosen を使って書いた chrome 拡張のコードの読み込みに Fetch を利用するようにパッチを当て、 require が利用できるようにした
Live Reload
- Chrome 拡張はソースを変更すると基本的に更新が必要であるが、上述した Remote Require を利用することでライブリロードが実現できた。
Simple Syntax
- 機能が少ないので構文がシンプル
- top level に document や console などを読み込んでいるので、それらがかんたんに利用可能
ブラウザのみで動作 (All you need is only browser)
- 拡張機能を clone してきて、Ruby のコードを編集するだけで利用可能

デモ

デモが公開されていたので、実際に試してみました。

GitHub - aaaa777/ruby-chrome-extention-demo

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/aaaa777/ruby-chrome-extention-demo

ソースコードのダウンロード
chrome extension として登録
- 「パッケージ化されていない拡張機能を読み込む」から、拡張機能として追加

動作確認
- http://www.example.com にアクセス

ライブリロードの確認
- Ruby のコード上で色を変更

- ブラウザを更新すると、背景色が赤から青に変わっている

他の chrome 拡張のためのフレームワーク

他の chrome 拡張のためのフレームワークとしては、https://github.com/PlasmoHQ/plasmo があります。

GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework

Production Cloud: We've built a cloud offering for browser extensions called Itero. Check it out if you want instant beta testing and more awesome features. The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build

https://github.com/PlasmoHQ/plasmo

Plasmo は React を用いて chrome 拡張を書くことができます。また、多機能であるとも語られていました。しかし、拡張機能として利用する前に build が必要です。

unloosen は Ruby で書くことができ、少機能なのでシンプルで、 build が不要であることがメリットです。しかし、Ruby の vm をたてるために 300MB ぐらいメモリを消費するのがネックだと語られていました。