Estoy buscando crear una extensión de cromo que funcione de manera muy similar a Ghostry o similar. Donde la ventana emergente de Chrome ext muestra ciertas llamadas de red.
Me gustaría mostrar llamadas de red de un cierto tipo de píxel y luego poder mostrar elementos de esa llamada.
He pasado por esto https://www.pubnub.com/blog/category/product-updates/
Lo cual no parece funcionar. Creo que esto fue podría ser depercated.
tengo esto
// 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; }); });Como prueba, logré obtener la URL de las pestañas actuales con solo hacer clic en un botón, pero me gustaría mostrar las llamadas dentro de la ventana emergente sin hacer clic en un botón. Sólo quiero que estén allí ya.
¿Tendría que hacerse esto a través de background.js ?
Si alguien pudiera señalarme en la dirección correcta o darme algún consejo, sería genial.