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.