Angular expression evaluates in Chrome extension but not in Edge extension

问题

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.

回答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.

回答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'

来源：https://stackoverflow.com/questions/43775016/angular-expression-evaluates-in-chrome-extension-but-not-in-edge-extension

标签

angularjs

google-chrome

google-chrome-extension

microsoft-edge

microsoft-edge-extension