У меня есть простое расширение браузера, используя 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
Пример края
Я считаю, что взаимодействие html и Angular в корне звучит, потому что, когда я просматриваю страницу , используя URL-адрес таких как file:///C:/temp/app/popup.html, как Chrome, так и Edge правильно оценивают выражение {{2+2}} до "4".
Пример Chrome при непосредственном обращении к popup.html
Пример края при непосредственном просмотре popup.html
Подводя итог, это только как расширение Edge, что оценка выражения терпит неудачу; как расширение Chrome или с прямым просмотром в Edge и Chrome, он работает.
Тридцать вторая видеоролик на You Tube:
Я поместил полную версию исходного кода на GitHub, но код довольно прост и состоит из следующего:
A 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>
Файл app.js для определения модуля Angular:
var myApp = angular.module('myApp', []);
A 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" });
A background.js script, который фактически открывает 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 можно найти здесь здесь и для Edge здесь.
