我們知道Windows 10週年更新後,win10瀏覽器支援擴充套件,並且釋出了chrome瀏覽器外掛擴充套件移植轉換到微軟edge瀏覽器的官方工具Microsoft Edge Extension Toolkit,本文以著名chrome擴充套件小樂圖客為例,分享給大家如何將google瀏覽器擴充套件轉換成edge瀏覽器擴充套件,並在本地載入使用。
工具/原料
Chrome
Microsoft Edge Extension Toolkit
Edge
移植轉換Google Chrome外掛和擴充套件到Edge瀏覽器
為了快速移植chrome外掛和擴充套件到微軟edge瀏覽器中,我們需要一個微軟官方出品的免費相容性除錯和移植工具:Microsoft Edge Extension Toolkit
中文可稱之為“微軟Edge瀏覽器擴充套件工具箱”。
首先,我們在Win10作業系統中,
搜尋微軟官方應用商店的工具Microsoft Edge Extension Toolkit,並下載安裝。
然後點選啟動後,開啟左上角的“load extension to convert”
注意,該工具也提供微軟edge擴充套件的官方文件入口(點選右側的document按鈕)
然後,瀏覽選擇chrome擴充套件所在資料夾(如果只有chrome外掛的crx離線安裝包,將crx檔案重新命名為zip檔案,解壓縮到一個資料夾即可)
這時,微軟Edge瀏覽器擴充套件工具箱,會自動列出一些相容性方面的錯誤資訊提示。
該工具會自動在當前擴充套件資料夾中,新建若干Edge瀏覽器擴充套件必備檔案。
同時,在manifest.json檔案中,還會增加一些新的對Edge瀏覽器才有用的鍵值。
例如:
"permissions": [ "tabs", "
", "unlimitedStorage", "contextMenus", "notifications", "pageCapture", "tabCapture", "desktopCapture", "downloads", "downloads.open", "downloads.shelf" ],
"-ms-preload": { "backgroundScript": "backgroundScriptsAPIBridge.js", "contentScript": "contentScriptsAPIBridge.js" }
值得注意的是,edge擴充套件的manifest宣告檔案中,必須有author鍵值(chrome裡是沒有的),
例如:
"author": "zzllrr"
另外,default_icon中,必須指明圖片尺寸,這一點與chrome也不同。
例如:
"default_icon": { "20": "img/ZIGVIP.png", "40": "img/ZIGVIP.png" },
另外,報錯資訊中,有
appxManifest.xml Replace INSERT-YOUR-PACKAGE-PROPERTIES-PUBLISHERDISPLAYNAME-HERE with the correct names
appxManifest.xml Replace INSERT-YOUR-PACKAGE-IDENTITY-PUBLISHER-HERE with the correct names
appxManifest.xml Replace INSERT-YOUR-PACKAGE-IDENTITY-NAME-HERE with the correct names
事實上,開啟appxManifest.xml檔案,並作相應修改後,
重新使用這個工具箱,檢查相容性問題,問題依舊(該工具箱會自動把這個檔案替換為初始預設狀態,嚴重懷疑是微軟的bug)
不過這個問題,在後面的本地載入擴充套件時,並沒有實質障礙,不影響擴充套件在edge瀏覽器中正常使用。
Edge瀏覽器載入本地擴充套件
Chrome瀏覽器擴充套件和外掛,在本地完成修改和轉換後,就可以在Edge瀏覽器中載入測試和使用了。
不過,Edge瀏覽器進入開發者模式,不像Chrome瀏覽器那麼簡單(只需要勾選開發者模式)。具體方法步驟:
Edge瀏覽器,輸入網址:
about:flags
進入高階設定頁面,
在開發者設定中,勾選:啟用開發人員擴充套件功能(這可能讓裝置處於危險之中)
然後底部出現需要重啟Edge瀏覽器的提示,按要求重啟即可。
重啟Edge後,開啟右上角選項,點選“擴充套件”
點選“載入擴充套件”
瀏覽選擇擴充套件所在資料夾,即可載入成功。
這時檢查擴充套件圖示有無自動在位址列右側顯示。
如果沒有顯示擴充套件外掛圖示,可以將滑鼠放在擴充套件列表上,點選擴充套件相應的設定按鈕,進入設定頁,開啟“在位址列旁邊顯示按鈕”即可
點選擴充套件圖示,即可出現久違的擴充套件泡泡框了。
注意,由於各大瀏覽器對HTML5和CSS3渲染略有差異,
同一個擴充套件和外掛在不同瀏覽器中的外觀或功能表現會有一些差異。
這也是Edge瀏覽器將來需要儘快解決的問題。
注意事項
有些chrome擴充套件和外掛不能直接移植到edge,因為有些chrome擴充套件API,edge支援很有限
如果將edge擴充套件提交到微軟應用商店,大概需要支付100多人民幣的開發者身份一次性審查費