How to get a paragraph from the active tab with chrome extension?
Question
In my background.html I am getting the id , url , and title of the current tab like this:
chrome.tabs.getSelected(null, function(tab) {
tabId = tab.id;
tabUrl = tab.url
tabTitle = tab.title
...
I also need to get the first paragraph of the current tab. Is this possible? I don't see anything related in the tab type . Thanks
Update
Update in response to serg's answer and copying the code from here :
This is dom.js :
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == "getDOM")
//sendResponse({dom: "The dommmmm that you want to get"});
sendResponse({dom: document.getElementsByTagName("body")[0]});
//sendResponse({dom: document.getElementsByTagName("p")});
else
sendResponse({}); // Send nothing..
});
and this is what I have in background.html :
// Send a request to the content script.
chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
console.log(response.dom);
});
But nothing seems to be happenning. I don't even know where to look.
Update
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"background_page": "background.html",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["dom.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs",
"http://ting-1.appspot.com/submithandlertest"
]
}
Update
Inserted console.logs for debugging but I see none of them in the console; in fact dom.js does not even running, I misspelled "else" as "els" and no error was given. But otherwise the extension works well and executes the xhr request. What am I doing wrong?
dom.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == "getDOM")
console.log("dom.js - request action")
sendResponse({dom: document.getElementsByTagName("body")[0]});
console.log("***dom.js - sendResponse***")
else
sendResponse({}); // Send nothing..
console.log("***dom.js - else***")
});
background.html
<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {
// Send a request to the content script.
chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
console.log(response.dom);
console.log("background -- where is response.dom")
});
tabId = tab.id;
console.log(tabId)
tabUrl = tab.url
console.log(tabUrl)
tabTitle = tab.title
console.log(tabTitle)
var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
if (xhr.readyState == 4) {
if (xhr.status == 200){
console.log("request 200-OK");
chrome.browserAction.setBadgeText ( { text: "done" } );
setTimeout(function () {
chrome.browserAction.setBadgeText( { text: "" } );
}, 2000);
}else{
console.log("connection error");
chrome.browserAction.setBadgeText ( { text: "ERR" } );
}
}
};
xhr.send(formData);
console.log("tabUrl: "+ tabUrl)
console.log(formData)
});
});
</script>
</html>
Edit
Edited background.html as suggested by serg "to wrap all code that needs it into chrome.tabs.sendRequest callback (all those xhrs)". But this version of the background does not work. I don't get any error messages but nothing happens. What am I doing wrong?
<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab)
{
//chrome.tabs.getSelected(null, function(tab)
//{
// Send a request to the content script.
chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response)
{
console.log(response.dom);
console.log("background -- where is response.dom")
//}); moving this down to include xhr
tabId = tab.id;
console.log(tabId)
tabUrl = tab.url
console.log(tabUrl)
tabTitle = tab.title
console.log(tabTitle)
var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");
//xhr*********************************************************************************
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt)
{
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
console.log("request 200-OK");
chrome.browserAction.setBadgeText ( { text: "done" } );
setTimeout(function ()
{
chrome.browserAction.setBadgeText( { text: "" } );
}, 2000);
}
else
{
console.log("connection error");
chrome.browserAction.setBadgeText ( { text: "ERR" } );
}
}
};
xhr.send(formData);
console.log("tabUrl: "+ tabUrl)
console.log(formData)
//xhr**********************************************************************************
}); //chrome.tabs.sendRequest
});
</script>
</html>
Update: Edited dom.js:
chrome.extension.onRequest.addListener
(
function(request, sender, sendResponse)
{
if (request.action == "getDOM")
{
console.log("dom.js - if (request.action == getDom)")
//sendResponse({dom: "The dommmmm that you want to get"});
//sendResponse({dom: document.getElementsByTagName("body")[0]});
sendResponse({dom: document.getElementsByTagName("p")[0]});
console.log("***dom.js - sendResponse***")
//var pageInfo = {
//"title": document.title};
//chrome.extension.sendRequest(pageInfo);
}
else
{
sendResponse({}); // Send nothing..
console.log("***dom.js - else***")
}
}
);
Update with latest background.html with the console.log s that are showing marked:
<html>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {
// Send a request to the content script.
chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
//NOT SHOWING
console.log(response.dom)
//NOT SHOWING
console.log("background -- where is response.dom")
});
tabId = tab.id;
//SHOWING
console.log(tabId)
tabUrl = tab.url
//SHOWING
console.log(tabUrl)
//SHOWING
tabTitle = tab.title
//SHOWING
console.log(tabTitle)
var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");
//formData.append("user_tag_list", "tag1, tag2");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
if (xhr.readyState == 4) {
if (xhr.status == 200){
//SHOWING
console.log("request 200-OK");
chrome.browserAction.setBadgeText ( { text: "done" } );
setTimeout(function () {
chrome.browserAction.setBadgeText( { text: "" } );
}, 2000);
}else{
//NOT SHOWING
console.log("connection error");
chrome.browserAction.setBadgeText ( { text: "ERR" } );
}
}
};
xhr.send(formData);
//SHOWING
console.log("tabUrl: "+ tabUrl)
//SHOWING
console.log(formData)
});
});
</script>
</html>
1 answers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Chrome Extension: How to get Element from active Tab Page
How to get and set value on active tab using Chrome Extension
How to get active tab index on Google Chrome extension?
How to apply class to the active tab page from chrome extension
How to change active tab url in chrome extension
Chrome Extension - executeScript not in active tab
How to get the current tab's referrer from a Chrome extension?
How to get the AST of the current chrome tab from an extension?
Get all the frames in the currently active tab in Chrome extension?
get url of current (active) tab for chrome-extension
Related Tags