###### tags: `linux`

# Shape of Taiwan

## About
It's a Chrome Extension, which can translate Chinese words into Taiwanese words.

By analyzing web content, the extension will translate Chinese words into Taiwanese words, and highlight which words were translated, and show what the original words and english words are.

It allows users to open menu to add a feedback by a right-click.

這是一個能夠翻譯並標示出大陸用語的 Chrome 瀏覽器擴充套件

透過分析網頁內容，將大陸用語直接換成台灣用語，並在頁面中標示出哪些是已經被置換過，且顯示原本使用的用語和英文用語是為何。

允許使用者透過點擊右鍵開啟選單來新增回饋。

## Installation
### If you only want to use this extension
It will release on Extension Store
You can find it on Extension Store

### If you want build your own extension

#### Step 1 : Clone this repo
`git clone https://github.com/NCNU-OpenSource/Shape_of_Taiwan.git`

#### Step 2 : 進入 Chrome 的擴充功能選單
1. 開啟 "開發人員模式"
2. 載入未封裝的擴充功能，選擇專案資料夾
3. 預設擴充功能為開啟狀態，若要關閉功能，點擊擴充功能的 icon 即可

### Step 3 : 建立後端(本機執行)
1. 安裝專案所需的軟體和套件
2. 執行 `backend` 資料夾中的 `shape_of_taiwan_backend.py`
3. 將 `content.js` 中 `ajax` 的 `url` 改成本機的 `url`

### Other Intro

#### 相關技術
1. Chrome Extensions Framework
2. JavaScript
3. JSON
4. Regular Expression
5. Python Flask
6. uwsgi
7. certbot
8. nginx proxy pass
9. XMLHttpRequest
10. Cross Origin Resource Sharing
11. Jieba

#### 用詞對照資料範例(以 Json 格式儲存)

{
  "內存": {
    "zh_TW": "記憶體",
    "en_US": "RAM"
  },
  "報文": {
    "zh_TW": "封包",
    "en_US": "Packet"
  },
  "光驅": {
    "zh_TW": "光碟機",
    "en_US": ""
  }
}

#### 套件執行流程

### 技術說明
1. Manifest
一個 JSON 格式的檔案名為 manifest.json ，包含了套件資訊

|Permission|Description|
|---|---|
| bookmarks | Gives your extension access to the chrome.bookmarks API. |
| storage | Use the chrome.storage API to store, retrieve, and track changes to user data.|
| contextMenus | Gives your extension access to the chrome.contextMenus API. |
| downloads | Gives your extension access to the chrome.downloads API. |
[參考網址](https://developer.chrome.com/extensions/declare_permissions)

2. Background Script

[圖片來源](https://www.slideshare.net/OleksandrZinevych/chrome-extensions-56125231)

在背景中監聽「瀏覽器的事件」，並在監聽到特定的事件後，執行相對應的行為
- chrome.runtime.onInstalled
- chrome.contextMenus.onClicked > 監聽右鍵選單某項目被點擊
3. UI Elements
套件的使用者介面有許多種選擇，常見的 UI 包含：
- Browser Action
- 在網址列右邊的小 icon 可顯示此套件功能是否已被啟用
- 點擊 icon 後跳出的一個由 HTML 檔案所呈現的視窗

- Context Menu
可以設定右鍵選單項目，並增加某項目被點擊的事件監聽器。

#### 正規表示式
Regular Expression，使用單個字串匹配一系列符合規則的字句

**語法**
|基本符號|說明|範例|||
|---|---|---|---|---|
|/字串/|比對字串|/a/|含有 a 的字串|abc, bac, caa|
|[範圍]|比對範圍內其一(or)|[137]|包含 1 或 3 或 7 的字串|a1b, 3cd|

|特殊字元|說明|範例||
|---|---|---|---|
|?|0 or 1　個|/a?/|有 0 或 1 個 a|
|+|1 or 多個|/a+/|有 1 或多個 a|
|`*`|0 or 多個|/a*/| 有 0 或多個 a|
|{n}|n 個|/a{3}/|有 3 個 a|
|{n,m}|n ~ m 個|/a{1,3}/|有 1 ~ 3 個 a|
|{n,}|至少 n 個|/a{1,}/|至少 1 個 a|
|{,n}|最多 n 個|/a{,3}/|最多 3 個 a|
|\d|數字，等同 [0-9]|
|\D|非數字|

[參考資料](https://atedev.wordpress.com/2007/11/23/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%A4%BA%E5%BC%8F-regular-expression/)

#### Python Flask
- Flask 是一個使用 Python 編寫的輕量級 Web 應用框架，主要是由 Werkzeug WSGI 工具箱和 Jinja2 模板引擎所組成。

*[照片來源](https://data-flair.training/blogs/flask-vs-django/)

[Python Web Flask 實戰開發 簡介](https://blog.techbridge.cc/2017/06/03/python-web-flask101-tutorial-introduction-and-environment-setup/)

#### XMLHttpRequest
- 一組 API 函式集
- 可被 JavaScript、JScript、VBScript 以及其它 web 瀏覽器內嵌的手稿語言呼叫，通過 HTTP 在瀏覽器和 web 伺服器之間收發XML或其它資料。
- 可以動態地更新網頁

#### uwsgi
- WSGI
- Web伺服器閘道介面 (Python Web Server Gateway Interface)
- Python 定義 Web 伺服器和 Web 應用程式或框架之間的一種簡單而通用的介面。
- uWSGI
- Web 伺服器，實現 WSGI 協議、uwsgi、http 等協議。
- 用於接收前端伺服器轉發的動態請求並處理後發給 web 應用程式。

- uwsgi
- 是一種伺服器和服務端應用程式的通信協議，規定了怎麽把請求轉發給應用程式和返回
- 是一種網路協議而不是通信協議，在此常用於在 uWSGI 伺服器與其他網絡服務器的數據通信。
- 啟動 server
- uwsgi --ini run.ini
- 停止 server
- uwsgi --stop log/a.pid

#### nginx proxy pass
當使用者提出請求，Proxy server 會將外部的請求導到內部網路中所對應的伺服器做回應，該回應結果會再透過 Proxy server 傳回給使用者
- 保護內部伺服器服務的安全，避免使用者端可以直接對伺服器做攻擊
- Cache 機制，當伺服器的回應內容如果沒有做更新， Proxy server 可以將過去回應的結果直接傳回給使用者端。

#### Cross Origin Resource Sharing

是一個瀏覽器做跨網域連線的方式。透過 HTTP header 的設定，可以規範瀏覽器在進行跨網域連線時可以存取的資料權限與範圍，包括哪些來源可以存取，或是哪些 HTTP verb, header 的 request 可以存取。

#### Jieba
開源套件，由中國人開發，被稱為中文斷詞效果最好的開源套件
預設是以簡體字為語料庫(Corpus)
對於繁體中文的判定差強人意
於 github 上有提供繁體中文的語料庫支援(`dict.txt.big`)
亦可引入自定義語料庫訓練

**參數設定**
- `cut_all`
- `HMM`

**支援功能**
- 句子切割
- 詞性標記

**jieba-zh_TW**

台灣繁體版本的 jieba


https://github.com/ldkrsi/jieba-zh_TW

**演算法**
- `HMM` 用於新語意的分析

## 預期成果

讓台灣人在瀏覽網頁時，不會被大陸用語混淆

把所有的網頁變成台灣的形狀
不會再被大陸用語汙染
阻擋無辜台人在潛移默化之中被大陸文化逐漸同化

## 未來展望
- 可以讓網頁自動簡轉繁，以利偵測大陸用語
- 右鍵點擊 Context Menu 的新增回饋後，可以自動跳出一個 Modal
- 機器學習訓練，讓翻譯更精確
- 繼續新增資料庫的內容
## 參考資料
- [為什麼你們就是不能加個空格呢？](https://chrome.google.com/webstore/detail/%E7%82%BA%E4%BB%80%E9%BA%BC%E4%BD%A0%E5%80%91%E5%B0%B1%E6%98%AF%E4%B8%8D%E8%83%BD%E5%8A%A0%E5%80%8B%E7%A9%BA%E6%A0%BC%E5%91%A2%EF%BC%9F/paphcfdffjnbcgkokihcdjliihicmbpd?hl=zh-TW)
- [Git - 為什麼你們就是不能加個空格呢？](https://github.com/vinta/pangu.js?utm_source=next.36kr.com)
- [新同文堂](https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg?hl=zh-TW)
- [開始寫一個 Chrome extension 擴充功能](https://ephrain.net/chrome-extension-%E9%96%8B%E5%A7%8B%E5%AF%AB%E4%B8%80%E5%80%8B-chrome-extension-%E6%93%B4%E5%85%85%E5%8A%9F%E8%83%BD/)
- [Chrome Extension API 筆記](https://pjchender.github.io/2019/05/08/chrome-chrome-extension-api-%E7%AD%86%E8%A8%98/)