13

我使用Angular(v1.6.3)获得简单的浏览器扩展,但浏览器扩展的弹出窗口中的Angular表达式无法在Edge中评估,但它在Chrome中。在Chrome扩展中评估角度表达式,但不在边缘扩展中

角度表达只是<div>{{2+2}}</div>

当我浏览到相关网站(如配置在manifest file,即http://marketplace.visualstudio.comhttps://marketplace.visualstudio.comhttp://www.bbc.com,并单击扩展按钮,镀铬评估HTML输出为“4”,但边缘评估HTML输出为“{ {2 + 2}}”。

Chrome范例

Chrome as a browser extension

边缘示例

Edge as a browser extension

相信HTML和角相互作用本身基本上是无害的,因为当我直接浏览到pop up page,使用URL如file:///C:/temp/app/popup.html,Chrome和边缘正确地计算表达式{{2+2}}至“4”。

Chrome范例直接浏览popup.html

Edge direct browse to popup.html

当总结直接brosing到popup.html

Chrome direct browse to popup.html

边缘例子的情况下,它仅是作为一个边缘延伸部,所述表情评估失败;作为Chrome扩展程序或直接在Edge和Chrome浏览器中运行。在You Tube

第三十二视频演示: YouTube demo

我已经把一个完整版的源代码上GitHub,但代码很简单,由以下部分组成:

对于A popup.html文件页面弹出窗口,其中包含了角表达式:

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

一种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" }); 

一个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.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和Edge here

+0

这不仅仅是一个不被评估的表达式。它是非引导的Angular应用程序。如果启动失败,则应该有错误。错误消息说什么? – estus

+0

你的意思是在控制台中有错误吗?我不记得在控制台中看到任何错误。 –

+0

如果存在脚本错误,那么总会出现错误(在你的情况下)。如果没有错误信息,这将成为总猜测。我不在Edge中进行扩展开发,但是可能会有额外的步骤来显示扩展中的错误。 – estus

回答

1

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

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

+0

谢谢kspearrin!我做了简单的改变,你建议嘿,现在角度表达现在解决为“4”而不是“{{2 + 2}}”当使用边缘:-) –

2

unsafe-eval没有在微软的边缘扩展,现在支持,您可能需要使用在这个类似的问题AngularJS uses eval in chrome extension

提到的一些解决方法从Supported manifest keys

微软的边缘扩展目前只支持Default Policy Restrictionsscript-src 'self'; object-src 'self'

+0

谢谢,但我试过没有“不安全的评估”,甚至用ng-csp属性,但没有任何区别。就好像角度控制器已经找到,但我本地运行角度本身,而不是从CDN角度。 –