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, remended stackoverflow questions etc. Also if you've been learning manifest v3 and have suggestions for good documentation/tutorials in general that would be great.

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, remended stackoverflow questions etc. Also if you've been learning manifest v3 and have suggestions for good documentation/tutorials in general that would be great.

• javascript
• google-chrome
• google-chrome-extension
• chrome-extension-manifest-v3

Share Improve this question Follow asked May 24, 2021 at 14:19 Warwick LoganWarwick Logan 11711 silver badge77 bronze badges 5

• Remove the background script and use a content script. – woxxom Commented May 24, 2021 at 14:50
• @wOxxOm my understanding was that this method of doing it was implementing a content script but as a function in the background script. Is there a different way I should be calling the content script? As it stands I currently have scrapeSite in a different js file then the background.js but I use importScripts at the top of my background.js to allow me to call on it. – Warwick Logan Commented May 24, 2021 at 15:11
• There's no need for the background script here. Use a content script declared in manifest.json. See also How to access the webpage DOM rather than the extension page DOM? – woxxom Commented May 24, 2021 at 15:13
• I supposed this highlights a greater misunderstanding on my part regarding content scrips and background scripts. I would still need to call the content script from the background script correct? Or is there some other method? What method would you remend? I appreciate the help! – Warwick Logan Commented May 24, 2021 at 15:34
• As the documentation and the answer I've linked show, you can simply declare the content script and it runs in the matching web page automatically. – woxxom Commented May 24, 2021 at 15:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.