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.9k
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
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
790
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
350
Other Decks in Programming
See All in Programming
Testing Trophyは叫ばない
toms74209200
0
850
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2k
print("Hello, World")
eddie
1
530
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Namespace and Its Future
tagomoris
6
700
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
🔨 小さなビルドシステムを作る
momeemt
3
670
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
220
Cache Me If You Can
ryunen344
2
650
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing for humans not robots
tammielis
253
25k
Agile that works and the tools we love
rasmusluckow
330
21k
Making Projects Easy
brettharned
117
6.4k
Navigating Team Friction
lara
189
15k
Embracing the Ebb and Flow
colly
87
4.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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