Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Goで作るChrome Extensions / Fukuoka.go #21
Search
yukyan
March 11, 2025
Programming
2
2.8k
Goで作るChrome Extensions / Fukuoka.go #21
https://fukuokago.connpass.com/event/344467/
でLTした時のスライドです。
yukyan
March 11, 2025
Tweet
Share
More Decks by yukyan
See All by yukyan
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
270
Other Decks in Programming
See All in Programming
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.2k
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
1.4k
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
560
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
300
파급효과: From AI to Android Development
l2hyunwoo
0
130
Cursor/Devin全社導入の理想と現実
saitoryc
24
18k
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
180
The Evolution of the CRuby Build System
kateinoigakukun
0
720
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
110
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
310
Unlock the Potential of Swift Code Generation
rockname
0
270
Featured
See All Featured
Navigating Team Friction
lara
185
15k
Docker and Python
trallard
44
3.3k
Statistics for Hackers
jakevdp
798
220k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
For a Future-Friendly Web
brad_frost
177
9.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Rails Girls Zürich Keynote
gr2m
94
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Transcript
1 Goで作るChrome Extensions ⼤浦 優太郎 EC事業部プロダクトチーム 2025.03.11 Fukuoka.go#21
2 ⾃⼰紹介 EC事業部 プロダクトチーム 2022年 新卒⼊社 ⼤浦 優太郎 Oura Yutaro ロリポップ‧ムームードメイン事業部でロリポッ
プ! for Gamersの⽴ち上げ‧開発‧運⽤に携わる。 1⽉から異動し、ECサイト構築サービス「カラー ミー」の開発に携わっている。浜松⽣まれ。ララン ドのラジオが好き。漫画も好き。 • X : @yukyan_p • Instagram: @yukyan_p
3 アジェンダ 1. はじめに 1.1. モチベーション 2. Go x WASMでChrome
Extensionを作りたい 3. Go x Native MessagingでExtensionsを作りたい 4. おわりに
1. はじめに 4
1. はじめに 5 モチベーション
1. はじめに 6 • Goでなんでも作りたい!!!! モチベーション
1. はじめに 7 • Webサーバー • CLIアプリケーション Goでなんでも作りたい!
1. はじめに 8 • Webサーバー • CLIアプリケーション • モバイルアプリ(gomobile) •
IoT(gobot) Goでなんでも作りたい!
1. はじめに 9 • Webサーバー • CLIアプリケーション • モバイルアプリ(gomobile) •
IoT(gobot) • Chrome Extensions ⇦ …? Goでなんでも作りたい!
1. はじめに 10 Chrome ExtensionsからGoのロジックを 呼び出す⽅法があるらしい!!
1. はじめに 11 • Webサーバー • CLIアプリケーション • モバイルアプリ(gomobile) •
IoT(gobot) • Chrome Extensions ⇦ New!! (ロジックを呼び出せる) Goでなんでも作りたい!
2. Go x WASMで Chrome Extensionを作りたい 12
13 • WebAssembly • Native Messaging GoでChrome Extensionsを作る 2. Go
x WASMでChrome Extensionを作りたい
14 • WebAssembly • Native Messaging GoでChrome Extensionsを作る 2. Go
x WASMでChrome Extensionを作りたい
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をサポート
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をサポート
2. Go x WASMでChrome Extensionを作りたい 17 GoがWebAssemblyをサポート + Chrome ExtensionsがWebAssemblyをサポート
つまり、 GoでChrome Extensions を書ける!
2. Go x WASMでChrome Extensionを作りたい 実際に作ってみた 英単語で絵⽂字を検索して置き換える拡張機能 turtle という絵⽂字を検索できるGoのパッケージを使⽤ 18
2. Go x WASMでChrome Extensionを作りたい 実際に作ってみた 英単語で絵⽂字を検索して置き換える拡張機能 turtle という絵⽂字を検索できるGoのパッケージを使⽤ 19
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() 全体像
2. Go x WASMでChrome Extensionを作りたい 21 main.wasm main.go GOOS=js GOARCH=wasm
go build 実際に作ってみた wasmのビルド
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
2. Go x WASMでChrome Extensionを作りたい 23 実際に作ってみた • wasm_exec.js ◦
GoのWASMをJSから扱うためのヘルパー関数を定義している ◦ $(go env GOROOT)/lib/wasm/wasm_exec.js にある
2. Go x WASMでChrome Extensionを作りたい main.wasm backend.js call go function
実際に作ってみた js.Global .Set() backend.jsがGoの関数を呼び出している 24
2. Go x WASMでChrome Extensionを作りたい 25 実際に作ってみた • syscall/js パッケージ
◦ js/wasmアーキテクチャを使⽤する際に、WebAssemblyのホスト環境へ のアクセスを提供してくれる ◦ DOM操作、JS関数の呼び出しなど ◦ js.Global.Set() ▪ JavaScriptのグローバルオブジェクトにGoの関数を設定することが できる
2. Go x WASMでChrome Extensionを作りたい 26 main.go 実際に作ってみた Goの関数 `ProcessTextElements`
をjsのグローバルオブジェクトに登録
2. Go x WASMでChrome Extensionを作りたい 27 実際に作ってみた backend.js グローバルオブジェクトに登録してるので、そのまま呼び出せる
2. Go x WASMでChrome Extensionを作りたい 28 すごい! Goのロジックを使えて嬉しい!
3. Go x Native Messagingで Chrome Extensionを作りたい 29
30 • WebAssembly • Native Messaging GoでChrome Extensionsを作る 3. Go
x Native MessagingでExtensionsを作りたい
3. Go x Native MessagingでExtensionsを作りたい 31 • ユーザーのPCにインストールされたネイティブアプリケーションとChrome拡張機 能間でメッセージ交換を可能にする、Chrome Extensionsの機能
◦ ネイティブアプリをネイティブメッセージングホストとして登録することで利 ⽤できるようになる Native Messagingとは?
3. Go x Native MessagingでExtensionsを作りたい 32 • ユーザーのPCにインストールされたネイティブアプリケーションとChrome拡張機 能間でメッセージ交換を可能にする、Chrome Extensionsの機能
◦ ネイティブアプリをネイティブメッセージングホストとして登録することで利 ⽤できるようになる → Goで書かれた ネイティブアプリケーションを呼び出せる! Native Messagingとは?
3. Go x Native MessagingでExtensionsを作りたい 33 実際に作ってみた GitHubのリポジトリページにエディタを開くボタンを設置する拡張機能
3. Go x Native MessagingでExtensionsを作りたい 34 実際に作ってみた
3. Go x Native MessagingでExtensionsを作りたい 35 実際に作ってみた
3. Go x Native MessagingでExtensionsを作りたい 36 main(binary) backend.js content.js 実際に作ってみた
repo info Cursor exec content.jsの情報をもとに実⾏ファイルからCursor(エディタ)を起動
3. Go x Native MessagingでExtensionsを作りたい 37 main(binary) backend.js 実際に作ってみた backend.jsと実⾏ファイルがやり取り
3. Go x Native MessagingでExtensionsを作りたい backend.js 実際に作ってみた 38
3. Go x Native MessagingでExtensionsを作りたい 実際に作ってみた main.go 39
4. おわりに 40
4. おわりに 41 GoでChrome Extensionsを 実装できて嬉しい!!!! (ロジックを呼び出すという形だが) まとめ
4. おわりに 42 • WASMは注意点もあるが、DOM操作やJSの関数を使え て便利 ◦ mainパッケージしかコンパイルできない(Go 1.23.7 時点)
◦ コンテンツスクリプトからは基本呼べない • Content-Security-Policyの問題 まとめ
4. おわりに 43 • Native Messaging は便利に使えそう ◦ 実⾏ファイルでできることだったら基本なんでもでき る、コマンドの実⾏など
◦ ブラウザからシームレスにオペレーションに⼊れる仕 組みを作って社内に配布したりもよさそう まとめ
44 Thank you!
おまけ:注意事項 • Go 1.24.0 (GOOS=js, GOARCH=wasm)でWASMをビルドするとう まくいかない 😢 ◦ 外部パッケージの読み込みがコードに含まれている場合、う
まくいかないことがある ◦ 1.23.7 では⼤丈夫なので、GOTOOLCHAIN=go1.23.7 をつける とよい ◦ 原因はわかっていない ここに注釈を⼊れることができます 45 45
おまけ:注意事項 • content.js から使うのは難しそう ◦ サイトで使うにはContent-Security-Policy(CSP)で script-src 'wasm-unsafe-eval' などでWASMの実⾏を明⽰的に許可する必要がある ◦
この設定がないサイトがほとんど ◦ background.jsのロジックをcontent.jsから呼ぶようにすると よい(Message passing) ここに注釈を⼊れることができます 46 46