I am fiddling with this extension which retrieves the title, url, and meta tags from the current tab when the icon is clicked. The data is displayed in the default pop-up, however, the meta data is delayed (by a second or two) due to the use of AJAX. Is there a way to get this information as quickly as using tabs.url and tabs.title for the url and title?
Here is the code from the js file:
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;
}
});
});
This is not a duplicate question. The suggested article that was linked to my question is in regards to inject a div onto the active window. I am trying to retrieve data from it and use it in the default-popup.
Just query the DOM using standard DOM API's and the JavaScript switch to handle the different possible attributes you're interested in.
// 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>