[Golang/GopherJS] Chrome Extension for Chinese Conversion

Build Chrome Extension with Go, compiled to JavaScript via GopherJS. This post show you how to use Go to build Chrome extension that converts the web page of Simplified Chinese website to Traditional Chinese.

This shows you the great power of GopherJS compiler. As long as the Go packages are written in Go and not involved with OS operation, you can compile almost any Go code to JavaScript and run on browsers or JavaScript environment.

The following Go packages are needed to build Chrome extension for converting Simplified Chinese web page to Traditional Chinese:

• GopherJS: Go-to-JavaScript compiler.
• github.com/fabioberger/chrome: GopherJS bindings for Chrome.
• godom: DOM manipulation in Go.
• gojianfan: simple converter for Traditional and Simplified Chinese

Install the packages:

$ go get -u github.com/gopherjs/gopherjs
$ go get -u github.com/fabioberger/chrome
$ go get -u github.com/siongui/godom
$ go get -u github.com/siongui/gojianfan

To build the extension, we need four files: icon.png, manifest.json, click.go, cc.go. We will explain one by one.

icon.png: Icon of your extension, shown in the toolbar of Chrome browser.

manifest.json:

{
  "manifest_version": 2,

  "name": "Gojianfan",
  "description": "Traditional and Simplified Chinese conversion",
  "version": "0.1",

  "browser_action": {
    "default_title": "Chinese conversion",
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["click.js"],
    "persistent": false
  },
  "permissions": [
    "activeTab"
  ]
}

This manifest json tells Chrome the information of our extension.

• browser_action: Put the specified icon in the main Chrome toolbar. When mouse hovers over the icon, the text in default_title is shown in tooltip.
• background: Tell Chrome what to do if users click on the icon of our extension in the toolbar. In our case, if the click event happens, the click.js will be executed, which converts the Simplified Chinese content of web page in current active tab to Traditional Chinese.

click.go: compiled to click.js via GopherJS.

package main

import (
      "github.com/fabioberger/chrome"
)

func main() {
      c := chrome.NewChrome()
      c.BrowserAction.OnClicked(func(tab chrome.Tab) {
              o := chrome.Object{
                      "file": "cc.js",
              }
              c.Tabs.ExecuteScript(tab.Id, o, nil)
      })
}

This file says if users click on the icon, we will inject the script cc.js to the current active tab. The cc.js script will convert the Simplified Chinese to Traditional Chinese in active tab.

cc.go: compiled to cc.js via GopherJS

package main

import (
      . "github.com/siongui/godom"
      "github.com/siongui/gojianfan"
      "strings"
)

var excludedElement = map[string]bool{
      "style":    true,
      "script":   true,
      "noscript": true,
      "iframe":   true,
      "object":   true,
}

func traverse(elm *Object) {
      nodeType := elm.NodeType()

      if nodeType == 1 || nodeType == 9 {
              // element node or document node

              if _, in := excludedElement[strings.ToLower(elm.TagName())]; in {
                      return
              }

              for _, node := range elm.ChildNodes() {
                      // recursively call to traverse
                      traverse(node)
              }
              return
      }

      if nodeType == 3 {
              // text node
              v := strings.TrimSpace(elm.NodeValue())
              if v != "" {
                      elm.SetNodeValue(gojianfan.S2T(v))
              }
              return
      }
}

func main() {
      traverse(Document)
}

What this file does is to traverse the DOM tree, find out all the visible Simplified Chinese texts in the web page, and convert them to Traditional Chinese.

The source code of Chrome extension for Chinese conversion can be found at my GitHub repo [6]. The code in the repo implements more features and is more complicated than the code in this post.

Tested on: Ubuntu Linux 17.04, Go 1.8.1, GopherJS 1.8-1.

References:

[1]	GopherJS - A compiler from Go to JavaScript (GitHub, GopherJS Playground, )