Goで作るChrome Extensions / Fukuoka.go #21

https://fukuokago.connpass.com/event/344467/ でLTした時のスライドです。

Transcript

1. 1 Goで作るChrome Extensions ⼤浦 優太郎 EC事業部プロダクトチーム 2025.03.11 Fukuoka.go#21
2. 2 ⾃⼰紹介 EC事業部 プロダクトチーム 2022年 新卒⼊社 ⼤浦 優太郎 Oura Yutaro ロリポップ‧ムームードメイン事業部でロリポッ プ! for Gamersの⽴ち上げ‧開発‧運⽤に携わる。 1⽉から異動し、ECサイト構築サービス「カラー ミー」の開発に携わっている。浜松⽣まれ。ララン ドのラジオが好き。漫画も好き。 • X : @yukyan_p • Instagram: @yukyan_p
3. 3 アジェンダ 1. はじめに 1.1. モチベーション 2. Go x WASMでChrome Extensionを作りたい 3. Go x Native MessagingでExtensionsを作りたい 4. おわりに
4. 1. はじめに 4
5. 1. はじめに 5 モチベーション
6. 1. はじめに 6 • Goでなんでも作りたい！！！！ モチベーション
7. 1. はじめに 7 • Webサーバー • CLIアプリケーション Goでなんでも作りたい！
8. 1. はじめに 8 • Webサーバー • CLIアプリケーション • モバイルアプリ（gomobile） • IoT（gobot） Goでなんでも作りたい！
9. 1. はじめに 9 • Webサーバー • CLIアプリケーション • モバイルアプリ（gomobile） • IoT（gobot） • Chrome Extensions ⇦ …? Goでなんでも作りたい！
10. 1. はじめに 10 Chrome ExtensionsからGoのロジックを 呼び出す⽅法があるらしい！！
11. 1. はじめに 11 • Webサーバー • CLIアプリケーション • モバイルアプリ（gomobile） • IoT（gobot） • Chrome Extensions ⇦ New!! (ロジックを呼び出せる) Goでなんでも作りたい！
12. 2. Go x WASMで Chrome Extensionを作りたい 12
13. 13 • WebAssembly • Native Messaging GoでChrome Extensionsを作る 2. Go x WASMでChrome Extensionを作りたい
14. 14 • WebAssembly • Native Messaging GoでChrome Extensionsを作る 2. Go x WASMでChrome Extensionを作りたい
15. 2. Go x WASMでChrome Extensionを作りたい 15 > Go 1.11 で WebAssembly への実験的な移植が追加されました。Go 1.12 ではその⼀部 が改善され、Go 1.13 でさらなる改良が期待されていました。Go 1.21 では、新たに WASI システムコール API を対象としたポートが追加されました。(ChatGPTによる翻訳) Go Wiki: WebAssembly - The Go Programming Language Goは 1.11 からWebAssemblyをサポート
16. 2. Go x WASMでChrome Extensionを作りたい 16 > Manifest V3 拡張機能の content_security_policy 宣⾔に wasm-unsafe-eval を含める ことができるようになりました。この変更により、Manifest V3 拡張機能で WebAssembly を使⽤できるようになります。(Cloud Translation APIによる翻訳) What's new in Chrome extensions Chrome Extensionsは Manifest V3 でWebAssemblyをサポート
17. 2. Go x WASMでChrome Extensionを作りたい 17 GoがWebAssemblyをサポート + Chrome ExtensionsがWebAssemblyをサポート つまり、 GoでChrome Extensions を書ける!
18. 2. Go x WASMでChrome Extensionを作りたい 実際に作ってみた 英単語で絵⽂字を検索して置き換える拡張機能 turtle という絵⽂字を検索できるGoのパッケージを使⽤ 18
19. 2. Go x WASMでChrome Extensionを作りたい 実際に作ってみた 英単語で絵⽂字を検索して置き換える拡張機能 turtle という絵⽂字を検索できるGoのパッケージを使⽤ 19
20. 2. Go x WASMでChrome Extensionを作りたい 20 main.wasm backend.js import wasm_exec.js content.js call go func 実際に作ってみた Message passing js.Global .Set() 全体像
21. 2. Go x WASMでChrome Extensionを作りたい 21 main.wasm main.go GOOS=js GOARCH=wasm go build 実際に作ってみた wasmのビルド
22. 2. Go x WASMでChrome Extensionを作りたい main.wasm backend.js import wasm_exec.js call go func 実際に作ってみた js.Global .Set() wasm_exec.jsをbackend.jsがimportしている 22
23. 2. Go x WASMでChrome Extensionを作りたい 23 実際に作ってみた • wasm_exec.js ◦ GoのWASMをJSから扱うためのヘルパー関数を定義している ◦ $(go env GOROOT)/lib/wasm/wasm_exec.js にある
24. 2. Go x WASMでChrome Extensionを作りたい main.wasm backend.js call go function 実際に作ってみた js.Global .Set() backend.jsがGoの関数を呼び出している 24
25. 2. Go x WASMでChrome Extensionを作りたい 25 実際に作ってみた • syscall/js パッケージ ◦ js/wasmアーキテクチャを使⽤する際に、WebAssemblyのホスト環境へ のアクセスを提供してくれる ◦ DOM操作、JS関数の呼び出しなど ◦ js.Global.Set() ▪ JavaScriptのグローバルオブジェクトにGoの関数を設定することが できる
26. 2. Go x WASMでChrome Extensionを作りたい 26 main.go 実際に作ってみた Goの関数 `ProcessTextElements` をjsのグローバルオブジェクトに登録
27. 2. Go x WASMでChrome Extensionを作りたい 27 実際に作ってみた backend.js グローバルオブジェクトに登録してるので、そのまま呼び出せる
28. 2. Go x WASMでChrome Extensionを作りたい 28 すごい！ Goのロジックを使えて嬉しい！
29. 3. Go x Native Messagingで Chrome Extensionを作りたい 29
30. 30 • WebAssembly • Native Messaging GoでChrome Extensionsを作る 3. Go x Native MessagingでExtensionsを作りたい
31. 3. Go x Native MessagingでExtensionsを作りたい 31 • ユーザーのPCにインストールされたネイティブアプリケーションとChrome拡張機 能間でメッセージ交換を可能にする、Chrome Extensionsの機能 ◦ ネイティブアプリをネイティブメッセージングホストとして登録することで利 ⽤できるようになる Native Messagingとは?
32. 3. Go x Native MessagingでExtensionsを作りたい 32 • ユーザーのPCにインストールされたネイティブアプリケーションとChrome拡張機 能間でメッセージ交換を可能にする、Chrome Extensionsの機能 ◦ ネイティブアプリをネイティブメッセージングホストとして登録することで利 ⽤できるようになる → Goで書かれた ネイティブアプリケーションを呼び出せる！ Native Messagingとは?
33. 3. Go x Native MessagingでExtensionsを作りたい 33 実際に作ってみた GitHubのリポジトリページにエディタを開くボタンを設置する拡張機能
34. 3. Go x Native MessagingでExtensionsを作りたい 34 実際に作ってみた
35. 3. Go x Native MessagingでExtensionsを作りたい 35 実際に作ってみた
36. 3. Go x Native MessagingでExtensionsを作りたい 36 main(binary) backend.js content.js 実際に作ってみた repo info Cursor exec content.jsの情報をもとに実⾏ファイルからCursor(エディタ)を起動
37. 3. Go x Native MessagingでExtensionsを作りたい 37 main(binary) backend.js 実際に作ってみた backend.jsと実⾏ファイルがやり取り
38. 3. Go x Native MessagingでExtensionsを作りたい backend.js 実際に作ってみた 38
39. 3. Go x Native MessagingでExtensionsを作りたい 実際に作ってみた main.go 39
40. 4. おわりに 40
41. 4. おわりに 41 GoでChrome Extensionsを 実装できて嬉しい！！！！ （ロジックを呼び出すという形だが） まとめ
42. 4. おわりに 42 • WASMは注意点もあるが、DOM操作やJSの関数を使え て便利 ◦ mainパッケージしかコンパイルできない(Go 1.23.7 時点) ◦ コンテンツスクリプトからは基本呼べない • Content-Security-Policyの問題 まとめ
43. 4. おわりに 43 • Native Messaging は便利に使えそう ◦ 実⾏ファイルでできることだったら基本なんでもでき る、コマンドの実⾏など ◦ ブラウザからシームレスにオペレーションに⼊れる仕 組みを作って社内に配布したりもよさそう まとめ
44. 44 Thank you!
45. おまけ：注意事項 • Go 1.24.0 (GOOS=js, GOARCH=wasm)でWASMをビルドするとう まくいかない 😢 ◦ 外部パッケージの読み込みがコードに含まれている場合、う まくいかないことがある ◦ 1.23.7 では⼤丈夫なので、GOTOOLCHAIN=go1.23.7 をつける とよい ◦ 原因はわかっていない ここに注釈を⼊れることができます 45 45
46. おまけ：注意事項 • content.js から使うのは難しそう ◦ サイトで使うにはContent-Security-Policy(CSP)で script-src 'wasm-unsafe-eval' などでWASMの実⾏を明⽰的に許可する必要がある ◦ この設定がないサイトがほとんど ◦ background.jsのロジックをcontent.jsから呼ぶようにすると よい(Message passing) ここに注釈を⼊れることができます 46 46