Menu
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.
713
unsafe-eval is not supported in Microsoft Edge extensions now, you may want to use some workarounds mentioned in this similar question AngularJS uses eval in chrome extension
From Supported manifest keys
Microsoft Edge extensions currently only support Default Policy Restrictions:
script-src 'self'; object-src 'self'
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
