Getting HTML source code of current tab from popup.html in chrome extension

Question

I need to get the HTML source code of the current tab from my popup.html, then scrape the HTML, and send the scraped information to my background.js.

Initially, I made a physical button in the current tab just to check my background.js logic worked, after I've finished testing I moved that button to the popup.html page, but now I don't know how to get the current tab's HTML.

The button inside my popup.html calls my popup.js script:

function scrapNames() {

    //chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        //var currentTab = tabs[0];
    //});

    var prof = [..."need current tab html here".querySelectorAll(`[data-content*="Instructor"]`)]
    prof.map(p => {
        pname = p.innerText.split(" ", 2);
        chrome.runtime.sendMessage({ names: pname }, res => console.log(res))
    });
}

document.getElementById("search-ratings").onclick = scrapNames;

As you can see I have messed around with chrome.tabs.query trying to get the HTML source of the current tab, but I don't know how to use it properly. When I printed tab[0] out I saw I can get the URL. I could do a fetch() with the URL to get the HTML, but I am sure there is a better way to do this.

inkplay_ · Accepted Answer · 2021-01-04 02:20:51Z

I solved my issue and here is what I did.

Right now I have 3 Javascript files.

popup.js
foreground.js
background.js

The pipeline goes:

background.js -> popup.js -> foreground.js

My background.js (executes popup.js onActivate)

chrome.tabs.onActivated.addListener(tabs => {
    chrome.tabs.get(tabs.tabId, current_tab_info => {
        console.log(current_tab_info.url)
        if (/^www.somewebsite.com/.test(current_tab_info.url))
            chrome.tabs.insertCSS(null, { file: './mystyle.css' });
            chrome.tabs.executeScript(null, { file: './popup.js' }, () => console.log('injected foreground.js'))
        //professorURL()
    })
});

Popup.js

function scrapNames() {

    chrome.tabs.executeScript(null, { file: './foreground.js' }, () => console.log('injected foreground.js'))
    
}

document.getElementById("search-ratings").onclick = scrapNames;

Once I click on my button inside my popup.html I will execute foreground.js, and because I called foreground with chrome.tabs.executeScript foreground will be able to access the current tab's HTML. Finally, I scrape the information and sent it to my background.js with chrome.runtime.sendMessage.

var profs = [...document.querySelectorAll(`[data-content*="Instructor"]`)]
profs.map(p => {
    pname = p.innerText.split(" ", 2);
    chrome.runtime.sendMessage({ names: pname }, res => console.log("This is from foreground.js", res))
});

Collectives™ on Stack Overflow

Getting HTML source code of current tab from popup.html in chrome extension

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related