This is not a duplicate of https://stackoverflow.com/a/21049890/439130
That one explains it via angularjs where I'm asking for angular (a.k.a. Angular2+)
Code below is the main part of a Chrome extension that has been written via angularjs and it changes the content of the page plus it injects angularjs. I have to convert it to angular.
Looked into the links below but they all targets/creates their own window and not uses the base content window.
- 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/ this one gives the most closest base to what I'm trying to do. Also created an issue here
Looking to get a clear sample that demonstrates how to bootstrap angular (2+) manually in loaded page for Chrome extension.
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();
}
}
);
