我使用Angular(v1.6.3)获得简单的浏览器扩展,但浏览器扩展的弹出窗口中的Angular表达式无法在Edge中评估,但它在Chrome中。在Chrome扩展中评估角度表达式,但不在边缘扩展中
角度表达只是<div>{{2+2}}</div>
。
当我浏览到相关网站(如配置在manifest file,即http://marketplace.visualstudio.com,https://marketplace.visualstudio.com或http://www.bbc.com,并单击扩展按钮,镀铬评估HTML输出为“4”,但边缘评估HTML输出为“{ {2 + 2}}”。
Chrome范例
边缘示例
相信HTML和角相互作用本身基本上是无害的,因为当我直接浏览到pop up page,使用URL如file:///C:/temp/app/popup.html
,Chrome和边缘正确地计算表达式{{2+2}}
至“4”。
Chrome范例直接浏览popup.html
当总结直接brosing到popup.html
边缘例子的情况下,它仅是作为一个边缘延伸部,所述表情评估失败;作为Chrome扩展程序或直接在Edge和Chrome浏览器中运行。在You Tube
我已经把一个完整版的源代码上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。
这不仅仅是一个不被评估的表达式。它是非引导的Angular应用程序。如果启动失败,则应该有错误。错误消息说什么? – estus
你的意思是在控制台中有错误吗?我不记得在控制台中看到任何错误。 –
如果存在脚本错误,那么总会出现错误(在你的情况下)。如果没有错误信息,这将成为总猜测。我不在Edge中进行扩展开发,但是可能会有额外的步骤来显示扩展中的错误。 – estus