Angular expression evaluates in Chrome extension but not in Edge extension
angularjs, google-chrome, google-chrome-extension, microsoft-edge, microsoft-edge-extension
Solution
Currently AngularJS will not bootstrap for the Edge extension protocol. I've submitted a PR on GitHub to address this. If you make this change in the `angular.js` file you will see it start working.
You can also bootstrap manually as a workaround.
Problem
I have a simple browser extension, using Angular (v1.6.3), but the Angular expression in the pop-up window of the browser extension is failing to evaluate in Edge, but it is in Chrome. The Angular expression is simply `<div>{{2+2}}</div>`. When I browse to a relevant website (as configured in the manifest file, namely http://marketplace.visualstudio.com, https://marketplace.visualstudio.com or http://www.bbc.com, and click the extension button, Chrome evaluates the html output to "4", but Edge evaluates the html output to "{{2+2}}". Chrome example Edge example I believe the html and angular interaction itself is fundamentally sound, because when I browse directly to the pop up page, using a URL such as `file:///C:/temp/app/popup.html`, both Chrome and Edge correctly evaluate the expression `{{2+2}}` to "4". Chrome example when brosing directly to popup.html Edge example when browsing directly to popup.html To summarize, it is only as an Edge extension that the expression evaluation fails; as a Chrome extension or with direct browsing in both Edge and Chrome it works. Thirty second video demo on You Tube: I have placed a full version of the source code on GitHub but code is quite simple and consists of the following: A popup.html file page for the pop-up window, which contains the Angular expression: ``` <html> <head> <script type="text/javascript" src="scripts/angular.min.js"></script> <script type="text/javascript" src="scripts/app.js"></script> </head> <body> <div ng-app="myApp"> <div>{{2+2}}</div> </div> </body> </html> ``` An app.js file to define the angular module: ``` var myApp = angular.module('myApp', []); ``` A contentscript.js that tells the website to open the pop-up: ``` // Set the window object for multiple browser compatibility window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })(); window.browser.runtime.sendMessage({ action: "openPopUp" }); ``` A background.js script that actually opens the popup.html file: ``` // Set the window object for multiple browser compatibility window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })(); window.browser.runtime.onMessage.addListener( function (request, sender, sendResponse) { if (request.action == "openPopUp") { window.browser.tabs.query({ active: true, currentWindow: true }, function (tabs) { window.browser.pageAction.show(tabs[0].id); }); } }); ``` And finally a manifest.json file that wires everything up together, which both browsers understand: ``` { "manifest_version": 2, "name": "BrowserExtensionUsingAngularWorksChromeNotEdge", "version": "1.0.0", "author": "Greg Trevellick", "page_action": { "default_icon": { "19": "icon_19x19.png" }, "default_popup": "popup.html" }, "background": { "scripts": [ "scripts/background.js" ], "persistent": false }, "content_scripts": [ { "matches": [ "http://marketplace.visualstudio.com/*", "https://marketplace.visualstudio.com/*", "http://www.bbc.co.uk/*" ], "js": [ "scripts/contentscript.js", "scripts/angular.min.js" ] } ], "permissions": [ "activeTab", "declarativeContent", "http://marketplace.visualstudio.com/", "https://marketplace.visualstudio.com/", "http://www.bbc.co.uk/" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" } ``` For what its worth, some instructions on getting started with Chrome extensions can be found here and for Edge here.