此原型源自此想法: 中文化原始碼. 考慮到IDE外掛工作量較大, 且與IDE繫結. 在程式碼轉換工具的各種實現中, 綜合考慮實用+易用+長遠改進潛力, 瀏覽器外掛似乎較有優勢. 於是用最快捷的方式實現這一想法.

注: 此演示僅用Chrome在一個命名比較簡單的內碼表https://github.com/swaroopch/byte-of-python/blob/master/programs/ds_using_list.py 執行過, 限於取程式碼塊的簡單方式(取頁面中的table元素)以及內建詞典, 其他瀏覽器/github內碼表的效果不保證.

原型專案原始碼在: program-in-chinese/webextension_github_code_translator

在Chrome下載入此外掛後, 點選工具欄中的按鈕(竟然預設圖示是個’G’, 也許是"Github程式碼翻譯原型"的首字母). 彈窗中就會顯示翻譯後的程式碼段. 就這樣:

專案原始碼節選

對程式碼段的文字進行簡單替換:

function 翻譯() {
  var 原始碼拷貝 = document.getElementsByTagName('table')[0];
  var span欄位列表 = 原始碼拷貝.getElementsByTagName('span');
  翻譯欄位列表(span欄位列表);
  var 文字欄位列表 = 取子文字節點(document);
  翻譯欄位列表
 
(文字欄位列表);
}

function 取子文字節點(el) {
  var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
  while (n = walk.nextNode()) a.push(n);
  return a;
}

// 假設每個欄位除了詞, 其他都是非英文字元.
function 取欄位中所有詞(欄位) {
  var 單詞 = 欄位.match(/[a-zA-Z]+/g);
  if (單詞) {
    return 單詞;
  }
  return [
 
欄位];
}

function 取欄位中最長句(欄位) {
  var 句 = 欄位.match(/[a-zA-Z\s]+/g);
  if (句 && 句.length > 0) {
    return 句[0].trim();
  }
  return 欄位;
}

function 翻譯欄位列表(欄位列表) {
  for (var i = 0; i < 欄位列表.length; i++) {
    var 欄位 = 欄位列表[i].textContent;
    var 所有單詞 = 取欄位中所有詞(欄位);
    var 所有單詞有翻譯 = false;
    for (var j = 0; j < 所有單詞.length; j++) {
      var 單詞 = 所有單詞[j];
      var 對應中文詞 = 關鍵詞詞典[單詞] || API詞典[單詞] || 命名詞典[單詞];
      if (對應中文詞) {
        if (j == 所有單詞.length - 1) {
          所有單詞有翻譯 = true;
        }
      } else {
        break;
      }
      欄位 = 欄位.replace(單詞, 對應中文詞);
    }
    // 取巧: 僅當欄位中所有詞有翻譯時才替換欄位, 避免某些文字中出現個別可識別的單詞. 今後需進行語法分析.
    if (所有單詞有翻譯) {
      欄位列表[i].textContent = 欄位;
    } else {
      var 句 = 取欄位中最長句(欄位);
      var 對應中文 = 語句翻譯[句.toLowerCase()]
      if (對應中文) {
        欄位列表[i].textContent = 欄位.replace(句, 對應中文);
      }
    }
  }
}

內建詞典有幾部分, 前兩個(關鍵詞/API)可擴充套件, 單詞詞彙可藉助現有的英漢詞典(olditem等還需另行拆分處理), 語句翻譯可藉助線上翻譯API(原型中的翻譯內容取自有道線上翻譯):

var 關鍵詞詞典 = {
  'for': '對於',
  'in': '在',
  'if': '如果',
  'del': '刪除'
};

var API詞典 = {
  'print': '列印',
  'append': '新增',
  'sort': '排序',
  'len': '長度',
  'end': '結尾'
}

var 命名詞典 = {
  'shoplist': '購物單',
  'apple': '蘋果',
  'mango': '芒果',
  'carrot': '胡蘿蔔',
  'banana': '香蕉',
  'rice': '米',
  'item': '物品',
  'olditem': '第一項'
}

// 這裡使用有道線上翻譯結果. TODO: 用翻譯API代替
var 語句翻譯 = {
  'this is my shopping list': '這是我的購物單',
  'i have': '我有',
  'items to purchase': '要購買的產品',
  'i also have to buy rice': '我還得買大米',
  'my shopping list is now': '我的購物單現在在',
  'i will sort my list now': '我現在就整理我的清單',
  'sorted shopping list is': '排序的購物清單是',
  'the first item i will buy is': '我要買的第一件東西是'
}

參考

Chrome Extension - Get DOM content

https://developer.chrome.com/extensions/tabs#method-executeScript

Find all text nodes in HTML page

中文關鍵詞替換體驗頁面原型

為Chrome和火狐瀏覽器編寫擴充套件