在Firefox扩展中嵌入Golang 配置WebAssembly浏览器运行时

GOOS=js GOARCH=wasm go build -o main.wasm main.go

main.go

main.wasm

wasm_exec.js

background.js

manifest.json

wasm_exec.js

wasm_exec.js

WebAssembly.instantiateStreaming

WebAssembly.instantiate

main.wasm

// background.js
importScripts('wasm_exec.js'); // 导入Go的Wasm执行器

const go = new Go(); // 创建Go实例

async function loadWasm() {
    try {
        // 使用fetch加载wasm文件
        const response = await fetch(browser.runtime.getURL('main.wasm'));
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 实例化Wasm模块
        const result = await WebAssembly.instantiateStreaming(response, go.importObject);
        go.run(result.instance); // 运行Go Wasm模块
        console.log("Go WebAssembly 模块已成功加载并运行。");
        // 现在你可以通过go.exports访问Go中导出的函数了，如果Go代码有导出的话
        // 例如：go.exports.myGoFunction()
    } catch (err) {
        console.error("加载或运行Go WebAssembly模块时出错:", err);
    }
}

loadWasm();

// 后续，你可以通过消息传递（browser.runtime.sendMessage）让内容脚本或其他部分与背景脚本中的Go Wasm交互。
// 例如，监听消息，然后调用Go Wasm中的函数处理数据。
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "processDataWithGo") {
        // 假设Go Wasm中有一个函数叫 processData
        // 注意：Go Wasm的函数调用通常是同步的，但如果Go函数内部有异步操作，你需要考虑回调或Promise
        const processedResult = go.exports.processData(message.data); // 示例调用
        sendResponse({ result: processedResult });
        return true; // 表示异步响应
    }
});

manifest.json

wasm_exec.js

{
  "manifest_version": 2,
  "name": "My Go Wasm Extension",
  "version": "1.0",
  "background": {
    "scripts": ["wasm_exec.js", "background.js"],
    "persistent": true
  },
  "web_accessible_resources": [
    "main.wasm"
  ],
  "permissions": [
    "activeTab",
    "<all_urls>" // 根据你的需求添加其他权限
  ]
}

importScripts

main.wasm

browser.runtime.getURL('main.wasm')

'./main.wasm'

go.run(result.instance)

syscall/js

// main.go
package main

import (
    "fmt"
    "syscall/js"
)

func add(this js.Value, args []js.Value) interface{} {
    sum := args[0].Int() + args[1].Int()
    fmt.Println("Go received:", args[0].Int(), args[1].Int(), "and calculated:", sum)
    return js.ValueOf(sum)
}

func main() {
    fmt.Println("Go WebAssembly initialized!")
    // 注册一个全局函数供JavaScript调用
    js.Global().Set("addNumbers", js.FuncOf(add))

    // 保持Go程序运行，等待JavaScript调用
    select {} // 阻塞主goroutine，防止Go程序退出
}

addNumbers(1, 2)

syscall/js

js.Global().Set("functionName", js.FuncOf(goFunction))

js.FuncOf

js.Value

js.Value.Int()

js.Value.String()

js.ValueOf()

js.Global().Get("console").Call("log", "Hello from Go!")

js.Global()

Get()

Call()

syscall/js

encoding/json

JSON.parse()

JSON.stringify()

const data = { name: "Alice", age: 30 };
const result = go.exports.processJsonData(JSON.stringify(data));
console.log(JSON.parse(result));

// main.go
package main

import (
    "encoding/json"
    "fmt"
    "syscall/js"
)

type Person struct {
    Name string `json:"name"`
    Age  int    `json:"age"`
}

func processJsonData(this js.Value, args []js.Value) interface{} {
    jsData := args[0].String()
    var p Person
    err := json.Unmarshal([]byte(jsData), &p)
    if err != nil {
        fmt.Println("Error unmarshalling JSON:", err)
        return js.ValueOf("{}") // 返回空对象或错误信息
    }

    fmt.Printf("Go received person: %+v\n", p)
    p.Age += 1 // 修改数据

    modifiedJson, err := json.Marshal(p)
    if err != nil {
        fmt.Println("Error marshalling JSON:", err)
        return js.ValueOf("{}")
    }
    return js.ValueOf(string(modifiedJson))
}

func main() {
    js.Global().Set("processJsonData", js.FuncOf(processJsonData))
    select {}
}