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