Question

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

Angular表达式只是<div>{{2+2}}</div>。

当我浏览相关网站（在manifest file中配置，即http://marketplace.visualstudio.com，https://marketplace.visualstudio.com或http://www.bbc.com，然后点击扩展程序按钮时，Chrome会对html进行评估输出为“4”，但Edge将html输出计算为“{{2 + 2}}”。

Chrome示例

Chrome as a browser extension

边缘示例

Edge as a browser extension

我相信html和角度互动本身就是合理的，因为当我使用file:///C:/temp/app/popup.html之类的网址直接浏览pop up page时，Chrome和Edge都会正确评估表达式{{1到“4”。

直接向popup.html

提示时的Chrome示例

Chrome direct browse to popup.html

直接浏览popup.html

时的边缘示例

Edge direct browse to popup.html

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

You Tube上的第三十二个视频演示：

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

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

{{2+2}}

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

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

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

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

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

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

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

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

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

有关它的价值，可以找到关于Chrome扩展程序入门的一些说明here和Edge here。

Answer 1

现在，Microsoft Edge扩展程序不支持

unsafe-eval，您可能需要使用此类似问题中提到的一些解决方法Reference link of code

来自AngularJS uses eval in chrome extension

Microsoft Edge扩展程序目前仅支持Supported manifest keys：script-src 'self'; object-src 'self'

Answer 2

目前，AngularJS不会为Edge扩展协议进行引导。我已提交PR on GitHub to address this。如果您在angular.js文件中生成this change，则会看到它开始工作。

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

角度表达式在Chrome扩展程序中进行评估，但不在Edge扩展程序中进

2 个答案: