Angular 表达式在 Chrome 扩展中计算但不在边扩展中计算

Question

我有一个简单的浏览器扩展，使用 Angular (v1.6.3)，但是浏览器扩展 window 弹出窗口中的 Angular 表达式无法计算在 Edge 中，但它在 Chrome.

中

Angular 表达式就是 <div>{{2+2}}</div>.

当我浏览到相关网站（如 manifest file, namely http://marketplace.visualstudio.com, https://marketplace.visualstudio.com or http://www.bbc.com 中的配置，并单击扩展按钮时，Chrome 将 html 输出评估为“4”，但 Edge 评估html 输出到“{{2+2}}”。

Chrome 例子

边缘示例

我相信 html 和 angular 交互本身基本上是合理的，因为当我直接浏览到 pop up page 时，使用 URL 例如 file:///C:/temp/app/popup.html，Chrome 和 Edge 都正确地将表达式 {{2+2}} 计算为“4”。

Chrome 直接转至 popup.html

的例子

直接浏览到 popup.html

时的边缘示例

总而言之，表达式求值失败只是作为Edge扩展；作为 Chrome 扩展或在 Edge 和 Chrome 中直接浏览都有效。

YouTube 上的 30 秒视频演示：

我已经在 GitHub 上放置了完整版的源代码，但是代码非常简单，由以下部分组成：

弹出 window 的 popup.html 文件页面，其中包含 Angular 表达式：

<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>

用于定义 angular 模块的 app.js 文件：

var myApp = angular.module('myApp', []);

告诉网站打开弹出窗口的 contentscript.js：

// Set the window object for multiple browser compatibility
window.browser = (function () {
return window.msBrowser ||
  window.browser ||
  window.chrome;
})();

window.browser.runtime.sendMessage({ action: "openPopUp" });

实际打开popup.html文件的background.js脚本：

// 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);
                });
        }
    });

最后是一个 manifest.json 文件，将所有内容连接在一起，两个浏览器都能理解：

{
  "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'"
}

关于 Chrome 扩展的一些入门说明 here and for Edge here。

Answer 1

Microsoft Edge 扩展现在不支持

unsafe-eval，您可能需要使用类似问题 AngularJS uses eval in chrome extension

中提到的一些解决方法

来自Supported manifest keys

Microsoft Edge extensions currently only support Default Policy Restrictions: script-src 'self'; object-src 'self'

Answer 2

目前 AngularJS 不会 bootstrap 用于边缘扩展协议。我已经在 angular.js 文件中提交了一个 PR on GitHub to address this. If you make this change 你会看到它开始工作。

您也可以 bootstrap manually 作为解决方法。

Angular 表达式在 Chrome 扩展中计算但不在边扩展中计算

Angular expression evaluates in Chrome extension but not in Edge extension

google-chrome

google-chrome-extension

angularjs

microsoft-edge

microsoft-edge-extension