Angular expression evaluates in Chrome extension but not in Edge extension

Question

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

Chrome as a browser extension

Edge example

Edge as a browser extension

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

Chrome direct browse to popup.html

Edge example when browsing directly to popup.html

Edge direct browse 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.

It's not just an expression that is not evaluated. It's Angular app that is not bootstrapped. If it fails to bootstrap, there should be an error. What does error message say? — Estus Flask, May 26 '17 at 13:38
Do you mean an error in the console ? I don't recall seeing any errors in the console. — Greg Trevellick, May 26 '17 at 13:57
There always should be an error if there's script error (and in your case it does). This becomes total guesswork if there's no error message. I don't do extension development in Edge, but there may be additional steps to display errors from extensions. — Estus Flask, May 26 '17 at 14:08

score 2 · Answer 1 · edited May 23 '17 at 11:55

2

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'

edited May 23 '17 at 11:55

Community

1
1

answered May 04 '17 at 07:09

Haibara Ai

10,703
2
31
47

Thanks, but I've tried without the "unsafe-eval" and even with an ng-csp attribute but it makes no difference. It's as if the angular controller has been found, but I'm running angular itself locally, not from a CDN. – Greg Trevellick May 04 '17 at 18:28

kspearrin · Accepted Answer · 2017-06-04T23:23:00.527

1

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.

edited Jun 04 '17 at 23:23

answered Jun 03 '17 at 16:39

kspearrin

10,238
9
53
82

Thank you kspearrin ! I made the simple change you suggested and hey presto the angular expression now resolves to "4" not "{{2+2}}" when using Edge :-) – Greg Trevellick Jun 06 '17 at 06:37

Angular expression evaluates in Chrome extension but not in Edge extension

2 Answers2

Linked