Estoy jugando con esta extensión que recupera el título, la URL y las etiquetas meta de la pestaña actual cuando se hace clic en el icono. Los datos se muestran en la ventana emergente predeterminada; sin embargo, los metadatos se retrasan (uno o dos segundos) debido al uso de AJAX. ¿Hay alguna manera de obtener esta información tan rápido como usar tabs.url y tabs.title para la URL y el título?
Aquí está el código del archivo js:
chrome.tabs.getSelected(null,function(tab) { // null defaults to current window var title = tab.title; var url = tab.url; document.getElementById("title").innerHTML = title; document.getElementById("url").innerHTML = url; var txt = ""; // sample url used here, you can make it more dynamic as per your need. // used AJAX here to just hit the url & get the page source from those website. It's used here like the way CURL or file_get_contents (https://www.php.net/manual/en/function.file-get-contents.php) from PHP used to get the page source. $.ajax({ url: url, error: function() { txt = "Unable to retrieve webpage source HTML"; }, success: function(response){ // will get the output here in string format // used $.parseHTML to get DOM elements from the retrieved HTML string. Reference: https://api.jquery.com/jquery.parsehtml/ response = $.parseHTML(response); $.each(response, function(i, el){ if(el.nodeName.toString().toLowerCase() == 'meta' && $(el).attr("name") != null && typeof $(el).attr("name") != "undefined"){ txt += $(el).attr("name") +"="+ ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")) +"<br>"; console.log($(el).attr("name") ,"=", ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")), el); } }); }, complete: function(){ document.getElementById("desc").innerHTML = txt; } }); });Esta no es una pregunta duplicada. El artículo sugerido que estaba vinculado a mi pregunta se refiere a inyectar un div en la ventana activa. Estoy tratando de recuperar datos y usarlos en la ventana emergente predeterminada.
Simplemente consulte el DOM utilizando las API de DOM estándar y el switch de JavaScript para manejar los diferentes atributos posibles que le interesan.
// Gather all the <meta> elements into a node list and loop over them document.querySelectorAll("meta").forEach(function(meta){ // Test for specific values for the name attribute and act accordingly switch(meta.name.toLowerCase()){ case "description": console.log("Description: " + meta.content); break; case "title": console.log("Title: " + meta.content); break; } }); <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="specifically descrpitive content about your page here"> <meta name="title" content="some page title"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=yourfonthere" rel="stylesheet"> <title>Page Title Here</title> </head> <body> <!-- begin page content --> <div id="pagewrap"> <h1 class="header"> Welcome to HTML + CSS!</h1> <div id="flexwrapper"> <div class="box1"> <p>Box 01 content goes here! </p> </div> <div class="box2"> <p>Box 02 content goes here! </p> </div> <div class="box3"> <p>Box 03 content goes here! </p> </div> </div> <!--END FLEXWRAP--> <footer><span>Awwwwwww yeah<span></footer> </div><!--END PAGEWRAP--> </body> </html>