chrome extension text detection

I am trying to build a simple chrome extension that highlights all text that I pre-program into the code. For example, building a “fruits” chrome extension, where a push of a button will highlight any names of fruits (apple, grape, etc that I have pre-programmed) on the current page.

I have been looking through countless tutorials online for beginners to building a chrome extension.

I can’t seem to find any information on building an extension that is similar to what I am trying to accomplish.

If anybody has some links that would be helpful, please let me know! Any info helps!

predetermined text highlight chrome extension

I am trying to create a chrome extension that, when you click a button, highlights predetermined set of text. For example, a button called “colors,” when clicked, highlighted any mention of colors (blue, green, red, etc.) on that page.

I’ve looked around everywhere for a sample guide on making a similar extension, and I cannot seem to find any info.

I recently downloaded CRX (the chrome extension source viewer) on my computer, so that I can look at the source code of any chrome extension out there.

There is a specific extension, called Pearls Extension that does probably the closest to what I am trying to accomplish. The only difference is that this extension allows the user the input the text they want to highlight, whereas I merely want a button that would highlight any text that I have predetermined in the backend.

If you have any resources (or advise) that can help guide me in doing this, please let me know!!!

Highlighting keywords on page running into infinite loop

I am writing a test chrome extension in which I try to highlight all keywords on the current page. Unfortunately, I think I have a small gap in my logic, as it runs into an infinite loop. Specifically, after finding the first keyword match (assume the regex matches the word ‘highlight’), it inserts the node, and then pulls and inserts the same ‘highlight’ textnode over and over again. The relevant code is as follows:

// Get all elements on the page   
const elements = document.getElementsByTagName('*');
for (let i = 0; i < elements.length; i++) {
  for (let j = 0; j < elements[i].childNodes.length; j++) {
    // Loop through each node
    let currNode = elements[i].childNodes[j];
    // Check for textnode
    if (currNode.nodeType === 3) {
      // Get first/next match
      for (let match; match = regex.exec(currNode.nodeValue); ) {
        // Create highlighted element
        let hlElement = document.createElement('span');
        hlElement.appendChild(document.createTextNode(match[0]));
        hlElement.className = 'highlight';

        // Split current textnode at match and insert higlighted match in between
        let nextNode = currNode.splitText(match.index);
        nextNode.nodeValue = nextNode.nodeValue.substring(match[0].length);
        currNode.parentNode.insertBefore(hlElement, nextNode);
        currNode = nextNode;
      }
    }
  }
}