ramenjunitiメモ

自分なりに調べたものをまとめたり、文章を書く練習したり

GoでChrome拡張を作った話

2019/07/08更新

Qiitaにこの記事の内容を投稿をしました!

qiita.com

GoでChrome拡張を作りました!

🤔ん?と思った方もいらっしゃると思いますが、正確にいうと

Go + WebAssemblyChrome拡張を作りました!

お気付きの方、そうです。wasmを使いました。

作ったもの

どういうものを作ったかというと 

ramenjuniti.hatenablog.com

これにGoのフォーマット機能を追加しました。

Demo

f:id:ramenjuniti:20190625010241g:plain
clipgo_demo

機能

  • 選択したコードのフォーマットが崩れていたらフォーマットしてくれる

  • 選択ミスした場合、教えてくれる

コードはこちらから

github.com

ダウンロードしたい方はこちらから

chrome.google.com

Go + WebAssemblyとは

  • Go1.11から実験的に導入された

  • syscall/jsパッケージでJavaScript側の操作も可能

  • GOOS=js GOARCH=wasmgo buildすると.wasmファイルが生成される

  • テストもGOOS=js GOARCH=wasm go test -exec="$(go env GOROOT)/misc/wasm/go_js_wasm_exec"のようにexecで実行環境を渡してあげれば可能

詳しくはこちらを

github.com

構造

ディレクトリ構造

.
├── background
│   ├── background.js    // 新しいタブでPlaygroundを開く
│   ├── formatter.go     // フォーマットする関数を生成・登録
│   ├── init_go.js       // Goのインスタンス生成
│   └── wasm_exec.js     // Go + wasmを実行
├── contents
│   └── contents.js      // 選択した文字列をChromeAPIでbackground.jsに送る
└── manifest.json

全体の流れ

f:id:ramenjuniti:20190625011556p:plain
全体の流れ

簡単な図はこんな感じです

注意

wasmを利用する場合manifest.json

"content_security_policy": "script-src 'self' 'wasm-eval'; object-src 'self'"を追加しないといけないみたい

つらみ

formatter.wasmのサイズが3.7MBで、すごくでかくなってしまった。

Go + wasmではここらへん問題はまだまだあるみたい

まとめ

  • GoでChrome拡張は作れる

  • Goでしかできないことをブラウザに持ち込める

  • まだまだ課題もある

みなさんも是非、GoでChrome拡張を作ってみてはいかがでしょうか

では