Chrome擴展移植到Edge瀏覽器教程

      微軟在推出Edge瀏覽器之初，就把能夠使用擴展（extension）作為一個重要功能。在Win10一周年更新版(1607)中，這項功能正式向廣大用戶推出（當然，Insider用戶早就測試了一段時間了）。在Build2016上，微軟表明，為了簡化開發者的工作，正在准備推出一款專用工具，用於將Chrome瀏覽器的擴展移植到Edge瀏覽器中。

      ▲商店中已有的Edge擴展

 1.簡介
     最近，這項工具（Microsoft Edge Extension Toolkit）也面世了。這個工具還掛着一個Preview，離完美的轉制還有一段距離。但是經過幾個Bug fix更新，已經能完成基本的轉制工作了。這款工具適用於一周年更新版，已經能在Windows10商店下載。點此前往Windows應用商店下載。

▲Microsoft Edge Extension Toolkit

      這款工具加載了Chrome擴展項目后，會創建所需的JSON清單（manifest.json），並且使用一個APIBridge為擴展中的Chrome API做一個轉換。
      經過一番摸索，我成功轉制了幾個Chrome擴展。轉制后的擴展已經可以地被安裝到Edge，但是那些擴展的一部分功能還不能正常運行。應該是API的問題。從已經發布的擴展來看，Edge已經支持了許多擴展用的API了。問題應該是目前這個工具的APIBridge能夠轉換的Chrome API還不夠豐富。

 2.轉制
      現在開始以一個案例來介紹轉制流程吧。首先我下載了惠惠購物助手Chrome版（youdaogouwu-4.2.9.6.crx）。然后將其后綴名改為zip，解壓就可以得到他的項目代碼和資源了。打開Microsoft Edge Extension Toolkit，點擊左上角的Load extension to convert按鈕，選擇剛才解壓的項目文件夾。

     轉制工具加載后進行分析，同時為項目添加了一個清單和兩個Bridge。

      這時候我們要根據轉制工具下面的提示進行修改。顯然紅色的是錯誤，藍色的是項目中成功被橋接的API。      其中一定會遇到的，數量不少，同時也很容易解決的錯誤是下面這種。要求你更換Chrome擴展協議的標識。
loader.js：  chrome-extension protocol should be replaced. recommend using getExtensionProtocol() - defined in API bridge
點擊錯誤就會跳轉到具體的代碼行

     按照建議，修改方法就是把他改成下面這樣

     猜測這樣改的意義應該是讓他在Chrome中還可以運行，但是為了方便的無腦替換，我選擇直接改成ms-browser-extension:

     你會發現這個錯誤數量不少，然而這個preview版轉制工具的編輯功能不是很好，連查找替換都沒有。所以我們先點擊左上角的save files，然后關掉他，用VS code或者別的什么編輯器把loader.js和extension_3_1_chrome.css改好。

     替換全部，保存文件就行了。這時候再用轉制工具打開，錯誤就只剩下清單錯誤了，參考清單樣板，咱們一個個來。

     官方文檔的清單樣板  https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-manifest-keys/json-manifest-example/

{
    "name" : "Sample extension manifest",
    "version" : "1.0.0.0",
    "author" : "Microsoft Corporation",
    "browser_action" : 
    {
        "default_icon" : 
        {
            "20" : "icon_20.png",
            "40" : "icon_40.png"
        },
        "default_title" : "Sample extension",
        "default_popup" : "popup.html"
    },
    "content_scripts" : [{
            "js" : ["content_script.js"],
            "matches" : ["*://*/*"]
        }
    ],
    "content_security_policy" : "script-src 'self'; object-src 'self'",
    "default_locale" : "en",
    "description" : "This is a sample extension that illustrates the JSON manifest schema",
    "options_page" : "options.html",
    "permissions" : 
    [
        "*://*/*", "notifications", "cookies", "tabs", "storage", "contextMenus", "background"
    ],
    "background" : 
    {
        "page" : "background.html",
        "persistent" : false
    },
    "icons" : {
        "128" : "icon_128.png",
        "16" : "icon_16.png",
        "48" : "icon_48.png"
    },
    "minimum_edge_version" : "33.14281.1000.0",
    "web_accessible_resources" : ["icon_48.png"]
} 

錯誤1：icon的大小未定義

錯誤2：.background缺少參數persistent（是否在后台持續運行），購物助手的話我想是需要的。

 錯誤3：author太短，實際上是沒有填。隨意填一個

      注意：這個工具目前的版本有一個Bug。按照上面修改這些清單文件的錯誤是正確的，但是下面報的錯誤卻不減反增，給人造成困惑。關掉工具重新打開，再加載一次項目就會發現這些錯誤不見了。
別忘了點擊保存，Ctrl+S快捷鍵目前是無效的，說多了都是淚。

      至此這個項目就算轉制完成了。通過Info可以看出，有8處Chrome的API被橋接成功。工具會在代碼行左邊添加了標識。

      同時也能輕易看到還有別的API沒有被橋接，這注定了目前的轉制效果還不夠好。

 

 3.安裝

      那么如何安裝那些沒有正式發布的擴展？
      首先瀏覽器地址欄輸入 about:flags ，進入開發者設置頁，啟用開發擴展功能。

      然后擴展管理頁就會新增一個按鈕，點擊加載擴展然后選擇擴展的文件夾即可。

     這里就加載剛才轉制的惠惠購物助手 。目前這個轉制擴展雖然能跑能設置，但是還不能正常發揮他的大部分功能。那些使用較少，較普通的Chrome API的擴展，目前的轉制效果就會比較好。

   

      這個工具未來的更新着重於支持橋接更多的Chrome API。相信等到這個工具摘掉Preview的那一天，使用方法應與此篇教程寫作之時幾無差別，但我們輕松轉制出來的擴展程序都能夠良好地發揮他們的功能。

      當然，更可靠的方式始終是直接開發面向Edge的擴展，不過當前文檔較少，還屬於起步階段。下面就分享一篇手動創建“二維碼分享擴展”的博文
      “如何自己創建一個Edge 瀏覽器擴展” https://blogs.msdn.microsoft.com/micl/2016/09/03/edge-extension-create-a-custom-edge-extension/
      擴展項目地址 https://github.com/micli/EdgeQRCode-Extension