Chrome extensions porting to edge Browser tutorial

Microsoft introduced the ability to use Extensions (extension) as an important feature at the beginning of the launch of the Edge browser. In the WIN10 first anniversary Update (1607), this feature was formally introduced to the majority of users (of course, insider users have long been tested for a long time). On Build2016, Microsoft has shown that in order to simplify the work of developers, a dedicated tool is being launched to port Chrome's extensions to the Edge browser.

▲ existing edge extensions in the store

1. Introduction
Recently, the tool (Microsoft Edge Extension Toolkit) is also available. The tool also hangs a preview, a distance from the perfect transformation. However, after a few bug fix update, has been able to complete the basic transformation work. This tool is available for the first anniversary update and can be downloaded from the WINDOWS10 store. Click here to go to the Windows store download.

▲microsoft Edge Extension Toolkit

When the tool loads the Chrome extension project, it creates the required JSON manifest (Manifest.json) and uses a apibridge to make a transition to the Chrome API in the extension.
After some groping, I succeeded in transforming several chrome extensions. The transformed extension is already ready to be installed on the edge, but some of those extensions are not functioning properly. Should be an API issue. From the published extensions, Edge has supported many API extensions. The problem should be that the Chrome API that Apibridge the tool today is not rich enough.

2. Transformation
Now let's start with a case to introduce the transformation process. First I downloaded the Whitney Shopping assistant Chrome version (YOUDAOGOUWU-4.2.9.6.CRX). Then change the prefix name to zip and unzip it to get his project code and resources. Open Microsoft Edge Extension Toolkit, click the Load Extension to convert button in the upper-left corner and select the project folder you just unzipped.

The transformation tool is loaded and analyzed, adding a list and two bridge to the project.

At this time we will be based on the conversion tool below the prompt to modify.      Obviously the red one is wrong, and the blue one is the successfully bridged API in the project. Some of them will encounter, a lot of, but also very easy to solve the error is the following. Requires you to change the identity of the Chrome extension agreement.
Loader.js:chrome-extension protocol should be replaced. Recommend using Getextensionprotocol ()-defined in API Bridge
Clicking on the error will jump to the specific line of code

As suggested, the method of modification is to change him to the following

Guess the meaning of this change is to let him run in Chrome, but for the convenience of no brain replacement, I choose to change directly to Ms-browser-extension:

You will find a lot of this error, however, the editing function of this preview version of the conversion tool is not very good, even if the search is not replaced. So let's first click on save files in the upper left corner, then turn them off and change the loader.js and extension_3_1_chrome.css with vs code or something else.

Replace all, save the file on the line. At this time again with the transformation tool opened, the error is only left the list of errors, reference list template, we come one after another.

List template for official documents 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" :         {            "A": "Icon_20.png",            "Max": "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 was 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" : {        "$": "Icon_128.png",        "+": "Icon_16.png",        "$": "Icon_48.png"    },    "Minimum_edge_version": "33.14281.1000.0",    "Web_accessible_resources": ["Icon_48.png"]} 

Error 1: The size of icon is undefined

error 2:. Background missing parameter persistent (whether it runs continuously in the background), I think the shopping assistant is needed.

Error 3: Author is too short and is actually not filled in. Feel free to fill out a

Note: The current version of this tool has a bug. It is correct to modify these manifest files according to the above errors, but the following errors are not reduced to increase, causing confusion. Turn off the tool and re-open it and load the project again to see that these errors are missing.
Don't forget to click Save, Ctrl+s shortcut key is currently invalid, said more are tears.

At this point the project was completed. With info, you can see that 8 chrome APIs have been bridged successfully. The tool adds an identity to the left of the line of code.

At the same time can easily see there are other APIs are not bridged, which is doomed to the current transformation effect is not good enough.

3. Installation

So how do I install extensions that aren't officially released?
First enter About:flags in the browser address bar, go to the Developer Settings page, enable the development extension function.

Then the Extension Administration page will add a button, click Load Extension and select the Extended folder.

Here, we will load the ex-gratia shopping assistants that have just been transformed. At present, although the transformation of the extension can be set to run, but it does not play a normal role in most of his functions.

Future updates to this tool will focus on supporting more bridging chrome APIs. I believe that the day when this tool took off the preview, the use of the method should be different from the time of writing this tutorial, but we easily transformed out of the extension program can be good to play their function.

Of course, the more reliable way is always to directly develop an edge-oriented extension, but the current document is less and still in the initial stage. Share a blog post that manually creates a "QR code share Extension"
"How to create an edge browser extension yourself" https://blogs.msdn.microsoft.com/micl/2016/09/03/edge-extension-create-a-custom-edge-extension/
Extension Project Address Https://github.com/micli/EdgeQRCode-Extension

Chrome extensions porting to edge Browser tutorial