Search code examples
htmltextgoogle-chrome-extension

Chrome Extension - Get entire text content of the current tab


I'm developing an extension where I need to get the entire text content on the current tab. Now I've a plugin which retrieves selected text from the current tab. So, in essence I'm looking for the ctrl-A version of it :). This is what I've done so far taking the hint from @Derek.

This is in my event handler(this is just one, there are other listeners too for onUpdated etc):

chrome.tabs.onSelectionChanged.addListener(function(tabId,changeInfo,tab) {
  chrome.tabs.getSelected(null,function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
      selectedtext = response.data;
    });
    chrome.tabs.sendRequest(tab.id, {method: "getText"}, function (response) {
      alltext = response.data;
    });
  });
});

This is what I've written in the content script:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "getSelection")
    sendResponse({data: window.getSelection().toString()});
  else if (request.method == "getText")
    sendResponse({data: document.body.innerText});
  else 
    sendResponse({});
});

However the document.body.innerText is returning undefined. I need the entire text of the current tab in alltext. Can someone help me out on this? Thanks.


Solution

  • You can use document.body.innerText or document.all[0].innerText to do it in the content script.
    It will get all the text content in the page, without any HTML code.

    Or you can use document.all[0].outerHTML to get the HTML of the whole page.


    Example

    In the Content Script

    function getText(){
        return document.body.innerText
    }
    function getHTML(){
        return document.body.outerHTML
    }
    console.log(getText());             //Gives you all the text on the page
    console.log(getHTML());             //Gives you the whole HTML of the page
    

    Added

    So you want the content script to return the text to the popup. You can use:

    • chrome.tabs.getSelected to get the tab selected,
    • chrome.tabs.sendRequest to send request to the content script,
    • and chrome.extension.onRequest.addListener to listen to requests.

    Popup page

    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {method: "getText"}, function(response) {
            if(response.method=="getText"){
                alltext = response.data;
            }
        });
    });
    

    Content Script

    chrome.extension.onRequest.addListener(
        function(request, sender, sendResponse) {
            if(request.method == "getText"){
                sendResponse({data: document.all[0].innerText, method: "getText"}); //same as innerText
            }
        }
    );
    

    This should work.