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