12

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

Angular 表达式很简单<div>{{2+2}}</div>。

当我浏览到相关网站时（如清单文件中配置的那样，即http://marketplace.visualstudio.com、https://marketplace.visualstudio.com或http://www.bbc.com，然后单击扩展名按钮，Chrome 将 html 输出评估为“4”，但 Edge 将 html 输出评估为“{{2+2}}”。

铬示例

Chrome 作为浏览器扩展

边缘示例

Edge 作为浏览器扩展

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

直接浏览popup.html时的 Chrome 示例

Chrome直接浏览到popup.html

直接浏览到popup.html时的边缘示例

Edge直接浏览到popup.html

总而言之，表达式评估失败只是作为边缘扩展；作为 Chrome 扩展程序或在 Edge 和 Chrome 中直接浏览，它都可以工作。

You Tube 上的 30 秒视频演示： YouTube 演示

我在GitHub 上放了完整版的源代码，但代码非常简单，包含以下内容：

弹出窗口的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 扩展程序的一些说明，并在此处找到有关 Edge的说明。

4

2 回答 2

2

unsafe-evalMicrosoft Edge 扩展现在不支持，您可能希望使用类似问题中提到的一些解决方法AngularJS 在 chrome 扩展中使用 eval

从支持的清单键

Microsoft Edge 扩展目前仅支持默认策略限制：script-src 'self'; object-src 'self'

于 2017-05-04T07:09:08.500 回答
1

目前 AngularJS 不会引导 Edge 扩展协议。我已经在 GitHub 上提交了 PR 来解决这个问题。如果您在文件中进行此更改angular.js，您将看到它开始工作。

您也可以手动引导作为解决方法。

于 2017-06-03T16:39:11.317 回答