google-chrome-extensionhtml-parsing

How to get the page content of the link in right-click context menu


everyone. I've never did JS coding before but I needed a certain extension that I couldn't find in the shop. So I've decided to make my own. Here is the logic: when you right-click the link you get context menu with new element in it (done). You press this new button, look somehow the page which this link leads to (not done), parse it to get a certain other link on that page (not done) and download the content of that next link (done) with custom name based on that link (done).

Here is what I've done so far:

Manifest.json

{
  "name": "Save Original Image",
  "description": "Uses the chrome.contextMenus API to find the link to Original Image and save it.",
  "version": "0.1",
  "permissions": ["contextMenus", "downloads", "<all_urls>"],
  "background": {
    "service_worker": "worker.js"
  },
  "manifest_version": 3
}

worker.js

chrome.contextMenus.onClicked.addListener(searchOriginalImage);

function searchOriginalImage(info){
    console.log("===Start work===");
    console.log(info.linkUrl);
    // Here should be looking into the page at the info.linkUrl and parsing it
    //chrome.downloads.download({url: "found url", filename: "part of that found url name.jpg", saveAs: true});
    console.log("===End work===");
};

chrome.contextMenus.removeAll(function() {
    chrome.contextMenus.create({
     id: "1",
     title: "save Original Image",
     contexts:["link"],  
    }); })

Now, what exactly should I look into to load the page of the first link, parse this page and get required second link? What exaclty should I google for at least? This is my first JS and chrome extension prog so I really don't know where to even start looking at. Thanks in advance!


Solution

  • Okay, I've managed to get the HTML-code of the required page with fetch function.

    function searchOriginalImage(info){
        console.log("===Start work===");
        console.log(info.linkUrl);
        fetch(info.linkUrl)
            .then((resp) => resp.text())
            .then((data) => {  
                var allText = data;
                console.log(allText);
        });
        console.log("===End work===");
    };

    So this allText is just the raw HTML I've needed. And instead of console.log I would have a parser and downloader. Now I will look for parsing but this is out of the scope of this question. Thanks everybody!