Chrome Extension Manifest V3 How to Read the HTML and Text Content of a Webpage my User is Viewing

Question

I'm trying to learn how to make chrome extensions and have been trying to learn with the new manifest v3 as my understanding is it'll be the norm in the future. A lot of the documentation has been pretty brutal though and seems to be behind.

I am looking to make a simple extension that finds specific keywords on a website. I want to find the text which matches a specific html id whenever a user visits a website.

Currently, my background script calls on a separate content script to discover when the website the user has navigated to matches the website I want to search on. If I arrive at the appropriate website then another content script is called which searches the website.

Here is the relevant code from my background script:

if (onSite){
  scrapeSite(onSite);
}

onSite is only ever true/active when it is populated with the url of the site I want to visit.

The relevant code for scrapeSite is

function scrapeSite{
   try {
    book = document.getElementById("bookTitle");
    if (book){
     console.log(`${book}`);
     }
    }
    catch(err) {
      console.log(`No Book Title Found`);
      console.log(`${book}`);
     }
    }
}

If I remove the catch(err) then the console log outputs the following Error handling response: ReferenceError: document is not defined at scrapeSite

I'm really just trying to learn here so would appreciate any suggestions regarding better documentation, recommended stackoverflow questions etc. Also if you've been learning manifest v3 and have suggestions for good documentation/tutorials in general that would be great.

Answer 1

What you need to do is to add a content script to the manifest file, like so:

"content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content_script.js"]
        }
    ],

With "<all_urls>" being replaced with the URL of the site or sites you want to inject the content script inside.

No need for a background script at all, the content script is injected automatically if the URL matches the URL match pattern.

For more information, you should read this page.