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
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
660
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
300
Other Decks in Programming
See All in Programming
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
A comprehensive view of refactoring
marabesi
0
610
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
280
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
380
WindowInsetsだってテストしたい
ryunen344
1
180
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
280
Claude Codeの使い方
ttnyt8701
1
120
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
120
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
400
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Done Done
chrislema
184
16k
Optimizing for Happiness
mojombo
379
70k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Code Review Best Practice
trishagee
68
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Being A Developer After 40
akosma
90
590k
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