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!

Chrome Extention’s Content.js not making changes to webpage’s DOM

Currently my app works (highlights inputted words in selected colors), but it only works within (the example text) the popup.html that I made for the extension. Ideally, I want this to be able to access the DOM of the current webpage and execute the search and highlight function on its elements. Any help on how I can fix this is much appreciated!

Manifest.Json:

  {
  "name": "Word Finder",
  "version": "1.0",
  "description": "Searches the current web page for user inputted words and highlights in user specified colors",
  "manifest_version": 2, 
  "browser_action":{
    "default_popup": "popup.html"
  },
  "permissions":[
    "tabs", ""
  ],
   "content_scripts": [{
     "matches": [""],
     "css": ["style.css"],
     "js": ["content.js"]
   }]
 }

HTML:






    
    
    

     
    
    
    

    Word Finder
    
    


      
    

This is some text to show that the highlighting functionality works

Word

Words to Search For

Content.js:

$( document ).ready(function() {
var placementId = 0;
var searchList = [];

// == S E A R C H I N G    T O    A D D    W O R D S    T O    S E A R C H   L I S T
function addWord(userWord, userColor){ //append new word 
    var wordAndColorPair = {
        word: userWord,
        color: userColor,
        id: placementId.toString() //keep it as a string so it can be used for highlighted word's class
    }
    searchList.push(wordAndColorPair);
}


// == C L I C K    T O    A D D    N E W    W O R D    C O L O R    P A I R 
$('.color-element').click(function(){ //adding new word-color pairs
    var userInput = $('#input-word').val();
    if(userInput !== ''){ //only if user enteres text:
        var newWord = document.createElement("span"); //create a new search word tile

        newWord.classList.add('search-word'); //add the class search-word to it

        var wordTextNode = document.createTextNode(userInput);
        var deleteTextNode = document.createElement('span');
        $(deleteTextNode).attr("class", 'delete');
        deleteTextNode.textContent = 'x';

        newWord.append(wordTextNode);//make its text (node) equal to the user input
        newWord.append(deleteTextNode);

        var colorId = $(this).attr('id'); //set its bacckground color to a copy of the button clicked
        $(newWord).css("background-color", colorId);

        $(newWord).attr('id', placementId); //set this new elements unique ID for delection purposes

        $('.display-array').append(newWord); //append the child to the DOM

        addWord(userInput, colorId.toString()); //add the word to the search list - increment placementId for future words
            placementId ++;

        $('#input-word').val(''); //reset the input field
    }
    else{
        return;
    }
});


// == D E L E T I N G    W O R D S   
$(document).on('click', '.search-word', function(){//deleting word-color pairs
    //if clicked on:
    var i;
    for(i =0; i< searchList.length; i++){           //remove element (word-color pair) from search array
        if(searchList[i].id == $(this).attr('id')){
            searchList.splice(i, 1);
        }
    }

    var classSearch = $(this).attr('id').toString();
    var unHighlightList = document.getElementsByClassName(classSearch);
    var ab;
    var i;

    $(unHighlightList).each(function(){
        $(this).attr('id', 'NA'); //reset - disconnect the wrapped word from the button associated with it
        $(this).attr('class', 'NA');
    });

    $(this).remove();
});


// == S E A R C H I N G    F O R    W O R D S   
$('.search').click(function(){ //when the search button is clicked
    console.log("Searched!");
    //unmark anything that was previously marked:
    var context = new Mark(document.querySelector('*'));
    context.unmark();

    var i;
    var context = new Mark(document.querySelector('*'));
    var word;
    var options;

    for(i =0; i< searchList.length; i++){ //for each word
        options = {
            element: "span",
            className: (searchList[i].id),  //so we can remember which words correspond to which search-word - trying to add two classes
            exclude: [
                ".search-word" //exclude the search word tiles user inputs
             ]
        };

        word = searchList[i].word;
        context.mark(word, options); //mark my words
        $(document).find('.'+searchList[i].id).attr('id', 'found_'+searchList[i].color) //append the color to actually highlight it in that color based off of the ID assigned to it
    }
});


// == H O V E R    O V E R    W O R D - S E A R C H    T I L E   
$('.search-word').mouseover(function(){

    null;

});

});

style.css

    button, a{
  outline: none; // this one
}


.input-word{
    color: black;
    font-family: Roboto;
    padding-left: 3px;
}

/*not working*/
:placeholder-shown{
    font-style: italic;
}

/*              COLOR BUTTONS                    */

.color-palette{
    position: relative;
    top: 10px;
}

button:hover{
    cursor: pointer;
}

.color-element{
    font-size: 16px;
    border-radius: 4px;
    font-family: 'Roboto Slab', serif;
    height: 30px;
    width: 30px;
}
    .color-element:hover{
        transform: scale(1.03);
    }

/*       C  O  L  O  R  S        */


[id = "rgb(255,0,0)"]{ /*red*/
    background-color: rgba(255,0,0, .8);
    border: 2px solid rgba(255,0,0, .1);
}
    [id = "found_rgb(255,0,0)"]{ /*red*/
        background-color: rgba(255,0,0, .8);
        border: 2px solid rgba(255,0,0, .1);
    }

[id = "rgb(255,165,0)"]{ /*orange*/
    background-color: rgba(255,165,0, .8);
    border: 2px solid rgba(255,165,0, .1);
}
    [id = "found_rgb(255,165,0)"]{ /*orange*/
        background-color: rgba(255,165,0, .8);
        border: 2px solid rgba(255,165,0, .1);
    }

[id = "rgb(255,255,0)"]{ /*yellow*/
    background-color: rgba(255,255,0, .8);
    border: 2px solid rgba(255,255,0, .1);
}
    [id = "found_rgb(255,255,0)"]{ /*yellow*/
        background-color: rgba(255,255,0, .8);
        border: 2px solid rgba(255,255,0, .1);
    }

[id = "rgb(0,128,0)"]{ /*green*/
    background-color: rgba(0,128,0, .8);
    border: 2px solid rgba(0,128,0, .1);
}
    [id = "found_rgb(0,128,0)"]{ /*green*/
        background-color: rgba(0,128,0, .8);
        border: 2px solid rgba(0,128,0, .1);
    }

[id = "rgb(65,105,225)"]{ /*blue*/
    background-color: rgba(65,105,225, .8);
    border: 2px solid rgba(65,105,225, .1);
}
    [id = "found_rgb(65,105,225)"]{ /*blue*/
        background-color: rgba(65,105,225, .65);
        border: 2px solid rgba(65,105,225, .1);
    }

[id = "rgb(128,0,128)"]{ /*violet*/
    background-color: rgba(128,0,128, .85);
    border: 2px solid rgba(128,0,128, .1);
}
    [id = "found_rgb(128,0,128)"]{ /*violet*/
        background-color: rgba(128,0,128, .68);
        border: 2px solid rgba(128,0,128, .1);
    }

[id = "rgb(255,105,180)"]{ /*pink*/
    background-color: rgba(255,105,180, .8);
    border: 2px solid rgba(255,105,180, .1);
}
    [id = "found_rgb(255,105,180)"]{ /*pink*/
        background-color: rgba(255,105,180, .8);
        border: 2px solid rgba(255,105,180, .1);
    }


/*////////////////////////////////////*/
.display p{
    position: relative;
    top: 5px;
}

.display-array{
    border-radius: 5px;
    width: 300px;
    height: 50px;
    position: relative;
    top: 15px;
}
    .search-word{
        font-style: bold;
        opacity: .8;
        color: black;
        border-radius: 5px;
        margin: 1%;
        padding: 15px;
    }
        .search-word:hover{
            cursor: pointer;
        }

.search{
    cursor: pointer;
    background-color: rgba(220,220,220, .7);
    font-size: 15px;
    height: 39px;
    border-radius: 2px;
    border: 2px solid rgba(220,220,220, 1);;
    font-family: 'Roboto Slab', serif;
    position: relative;
    bottom: -15px;
}

.delete{
    color: rgba(0,0,0, .7);
    font-size: 13px;
    position: relative;
    bottom: 38%;
    left: 3.7%;
}

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!!!