如何從零開始寫一個Edge擴展？

看到win10自帶的edge瀏覽器已經開始支持擴展了，但是當前擴展還偏少。我想開發一個擴展，應該怎麼開始呢

---

輪子哥 @vczh 的步驟似乎是目前唯一 documented 的方法。

我剛剛去看了一下 Edge 的文檔，在 Edge 14.14393 的 about:flags 頁面可以開啟 Edge Extension 的 sideloading 功能。設置完了之後，就可以開始開發啦！

1. 讀 Chrome、Edge 的文檔，開發一個只用同時受 Edge 和 Chrome 支持的 API 的擴展；
2. 下載 Microsoft Edge Extension Toolkit，安裝並打開擴展所在的文件夾，按照步驟轉制；
3. 在 Edge 中 sideload 這個轉制好的插件，調試。

這個轉制主要干兩件事：添加兩個 shim scripts，然後在 manifest 裡面用 Edge-specific 的 -ms-preload 鍵預載入這兩個 shim scripts。其他的大概會提醒你一些不好的實踐（寫死 extension protocol，如硬編碼 chrome-extension://）和不兼容的 API。

我剛剛用這個步驟把我司某內部工具變成 Edge 擴展了。它經過修改後能直接在 Edge 里完美運行，這不稀奇，因為它開發之初就是跨瀏覽器的，後來加了個 shim 讓它成為 Chrome 擴展，現在作為 Edge 擴展是雙層 shim。

一個小缺點：有了 -ms-preload 鍵的 manifest 在 Chrome 中 sideload 的時候會有 warning，所以發布插件的時候還是必須分瀏覽器發布。

---

• 看文檔寫一個Chrome擴展

• 把所有的Chrome字樣改成msBrowser

---

有個這個東西

https://www.microsoft.com/zh-cn/store/p/microsoft-edge-extension-toolkit/9nblggh4txvb

不過前提是已經會chrome插件開發了。

不過看評價貌似還不支持非商店的擴展載入。

考慮到微軟還沒放出api文檔，估計還得等一段時間才能好好開發。

---

1. 學習Extensions for Chrome, 了解extension包括哪些部分，各個部分的分工與限制，相互之間基本的通信方法: https://developer.chrome.com/extensions/getstarted

2. 看Extensions for Microsoft Edge的文檔 Extensions - Microsoft Edge Development，了解Edge目前有哪些API沒有實現，已經實現的API有哪些known issue，看看現有的API能不能實現自己想要的功能

3. 直接上手寫基於Chrome的extension，遇到問題到Newest google-chrome-extension Questions和https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions 里搜問題和提問題 （不建議使用轉制工具的原因是轉制工具目的在於port已有的擴展，而這個問題旨在從零開始）

4. 在Chrome里測試（因為目前Edge的F12 tool還不是很好用）成功後，port到Edge上，要做的工作就是將chrome.* 替換成browser.* (最早insider release的時候是msBrowser.*，現在應該已經全部改為browser.*). 或者為了保證擴展可以同時Chrome和Edge里運行，添加下面的code

   if (typeof msBrowser !== undefined) {
chrome = msBrowser;
} else if (typeof browser !== undefined) {
chrome = browser;
}


5. 在Edge裡面測試，其間可能遇到Edge的bug （對，這些bug並沒有在Edge文檔里體現），到這裡 Microsoft Edge Developer: Hot (667 ideas)提feedback然後嘗試一些workaround，或者到這裡提問 Newest microsoft-edge-extension Questions

6. 好了可以發布了，Chrome可以直接走Store https://developer.chrome.com/extensions/packaging，Edge目前不支持第三方開發者將Extension隨意提交到store，可以考慮sideload

---

首先學會開發 Chrome 擴展程序。

---

Version:1.0 StartHTML:000000250 EndHTML:000003566 StartFragment:000003272 EndFragment:000003463 StartSelection:000003324 EndSelection:000003463 SourceURL:ms-appx-web://microsoft.microsoftedgeextensiontoolkit/Assets/htmlContent/StartPage.html Extension Convertor Tool For edge

manifest.json Could not parse manifest. Ensure manifest.json is a well formed. (comments are not allowed). Fix the issue and revalidate這個怎麼辦？

---

推薦閱讀：