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