【发布时间】：2017-12-26 19:03:46
【问题描述】：
这不是https://stackoverflow.com/a/21049890/439130的副本
那个人通过angularjs 解释它，我要求angular （又名Angular2+）
下面的代码是通过angularjs 编写的Chrome 扩展程序的主要部分，它改变了页面的内容 并注入了angularjs。我必须将其转换为angular。
查看了下面的链接，但它们都针对/创建了自己的窗口，而不使用基本内容窗口。
- https://cito.github.io/blog/web-ext-with-angular/
- https://www.sitepoint.com/chrome-extension-angular-2/
- https://blog.couchbase.com/building-a-google-chrome-extension-with-couchbase-and-angular-2/
- http://minimul.com/modify-an-existing-page-with-a-chrome-extension-built-using-angular-and-yeoman-part-1.html
- https://www.red-gate.com/simple-talk/dotnet/software-tools/developing-google-chrome-extension-using-angular-4/ 这个提供了最接近我想要做的事情的基础。还创建了一个问题here
希望获得一个清晰的示例，演示如何在 Chrome 扩展的加载页面中手动引导 angular(2+)。
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="/css/app.css" />
</head>
<body>
<h1>Hello world!</h1>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/angular/angular.min.js"></script>
<script src="/lib/angular-route/angular-route.min.js"></script>
<script src="/lib/angular-resource/angular-resource.min.js"></script>
<script src="/lib/angular-cookies/angular-cookies.min.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
app.js
function DoWork() {
var url = chrome.extension.getURL("/areas/body.html");
$('html').load(url);
chrome.runtime.sendMessage({ directive: "inject-angular" }, function(response) {
console.log("retrieving response" + response);
// Load();
});
}
$(document).ready(DoWork);
background.js
chrome.runtime.onMessage.addListener(
function(request: any, sender: chrome.runtime.MessageSender, sendResponse: Function): void {
switch (request.directive) {
case "inject-angular":
var queryInfo: chrome.tabs.QueryInfo = { currentWindow: true, active: true };
chrome.tabs.query(queryInfo, function(tabs): void {
var tabId: number = tabs[0].id;
console.log("executing code");
chrome.tabs.executeScript(tabId, {
code: "window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;"
}, function() {
console.log("executing angular");
chrome.tabs.executeScript(tabId, {
file: "/lib/angular/angular.min.js"
}, function() {
console.log("executing angular-filter");
chrome.tabs.executeScript(tabId, {
file: "/lib/angular-filter/angular-filter.min.js"
}, function() {
console.log("executing controller");
chrome.tabs.executeScript(tabId, { file: '/scripts/standalone/controller.js' }, function() {
console.log("sending response.");
sendResponse();
});
});
});
});
});
break;
default:
console.log("Unmatched request of '" + request + "' from script to background.js from " + sender + " :: [" + sender.tab.id + "] " + sender.tab.url);
console.log(request);
sendResponse();
}
}
);
【问题讨论】：
标签： angularjs angular angularjs angularjs angular angular angular google-chrome-extension