I am looking to create a chrome ext that works very similar to Ghostry or similar. Where the popup of the chrome ext displays certain network calls.
I would like to display network calls from a certain pixel type, then be able to display items from that call.
I have gone through this https://www.pubnub.com/blog/category/product-updates/
Which doesn't seem to work. I believe this was could be depercated.
I have this
// popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../main.css"/>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex flex-col p-4">
<main class="main flex-grow">
<h1 class="text-center font-bold text-xl">HCP365 Debugger</h1>
<section class="p-4">
<div id="data"></div>
</section>
</main>
<footer>
<button id="getCurrentURL" class="btn w-full drop-shadow bg-purple-500 capitalize outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 hover:bg-purple-800">get url</button>
</footer>
<!-- Scripts -->
<script src="popup.js"></script>
</body>
</html>
// popup.js
let button = document.getElementById('getCurrentURL');
let dataTest = document.getElementById('data');
// When the button is clicked, get current url from current tab
button.addEventListener('click', async () => {
let queryOptions = { active: true, currentWindow: true };
let [tab] = await chrome.tabs.query(queryOptions);
let currentURL = tab.url;
dataTest.innerHTML = currentURL;
});
chrome.devtools.network.onRequestFinished.addListener(function (request) {
var parser = document.createElement('a');
parser.href = request.request.url;
if (parser.hostname.split('.')[1] == 'pubnub') {
params = parser.pathname.split('/');
if (params[1] == 'publish') {
channel = params[5];
message = params[7];
}
}
request.getContent(function (body) {
parsed = JSON.parse(body);
console.log(parsed);
dataTest.innerHTML = parsed;
});
});
As a test i have managed to get the currentTabs url via a click of a button, but I would like the display the calls within the popup without a button click. I just want them to be there already.
would this have to be done via background.js ?
If anyone could point me in the right direction or give me any pointers that would be great.