I'm trying to build a chrome extension and add a panel to devtools. The ultimate goal is to run an angular app in that panel and monitor network traffic. Anyway, my manifest looks like this
{
"name": "Great Example",
"version": "1.0",
"description": "Build an Extension with Angular",
"manifest_version": 2,
"permissions": [
"debugger",
"activeTab",
"webNavigation",
"storage",
"webRequest",
"*://*/*"
],
"devtools_page": "./devtools/setup.html"
}
and ./devtools/setup.html:
<html>
<head></head>
<body>
<script src="setup.js"></script>
</body>
</html>
and setup.js
chrome.devtools.panels.create("My Panel",
"../assets/images/logo.png",
"../index.html",
function(panel) { ... }
);
And ../index.html is my angular app. So far I managed see have my panel in DevTools showing my angular app. Now my next step is, for example, to list all XHR calls in my angular app.
I tried the following code in the ngOnInit of AppComponent:
ngOnInit(): void {
chrome.webRequest.onCompleted.addListener((details) => {
this.test = 'ok';
}, { urls: ['*://*/*'] });
}
In my template I render test but it never shows ok so I guess onCompleted never goes off. So maybe this code should run in that other file (setup.js) and communicate back to my app in a different way. I'm a bit lost here so any suggestions to fix this are very welcome?
question from:
https://stackoverflow.com/questions/65843290/chrome-extension-setup-communication-between-init-script-and-panel-html-js 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
