CODEWITHSUNDEEP
google-chrome-extension
Cliff DesPeaux
Cliff DesPeaux

Reputation: 89

How to create Chrome extension that will search for text in source and alter formatting

I am new here... I am wondering if anyone could help point me in the right direction here.

I am looking to create a Chrome extension that searches a page for a number of different strings (one example: "(410)" or "(1040)" without the quotes) and highlight these so they're easier to see.

To explain a little further why I need this: I frequently work out of a queue with other coworkers, and there are specific things I need to focus on but I can ignore the rest of the questions on the page. So it would be helpful if my particular items were highlighted.

Thank you!

Edit: an example of how the source code works: 

<td class="col-question">28 (510). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl28_Label1" title=" &lt;p>
<td class="col-question">49 (1150). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl49_Label1" title="&lt;p>

etc etc etc... there are around 100 numbers in parenthesis I would want highlighted. And probably another 100 that I wouldn't want highlighted.

Upvotes: 3

Views: 10737

Answers (1)

BeardFist
BeardFist

Reputation: 8201

Okay, to start off with I will show you how to inject the code into the page(s) you want, we will get to selecting the correct numbers in a bit. I will be using jQuery throughout this example, it isn't strictly necessary, but I feel that it may make it a bit easier.

First we declare a content script in our manifest as well as host permissions for the page you are injecting into:

"content_scripts": [
{
  "matches": ["http://www.domain.com/page.html"],
  "js": ["jquery.js","highlightNumbers.js"],
  "css": ["highlight.css"]
}],
"permissions": ["http://www.domain.com/*"]

This will place our code in the page we are trying to change. Now you said that there are about 100 different numbers you would want to highlight and I will assume that these are specific numbers that don't match any patterns, so the only way to select all of them would be to make an explicit list of numbers to highlight.

highlightNumbers.js

// This array will contain all of the numbers you want to highlight
// in no particular order
var numberArray = [670,710,820,1000,...];

numberArray.forEach(function(v){
  // Without knowing exactly what the page looks like I will just show you 
  // how to highlight just the numbers in question, but you could easily
  // similarly highlight surrounding text as well

  var num = "(" + v + ")";

  // Select the '<td>' that contains the number we are looking for
  var td = $('td.col-question:contains('+num+')');

  // Make sure that this number exists
  if(td.length > 0){

    // Now that we have it we need to single out the number and replace it
    var span = td.html().replace(num,'<span class="highlight-num">'+num+'</span>');
    var n = td.html(span);
  }
    // Now instead of '(1000)' we have
    // '<span class="highlight-num">(1000)</span>'
    // We will color it in the css file
});

Now that we have singled out all of the numbers that are important, we need to color them. You can, of course, use whatever color you want, but for the sake of the example I will be using a bright green.

highlight.css

span.highlight-num{
  background-color: rgb(100, 255, 71);
}

This should color all of the numbers that you put in the array in the js file. Let me know if there are any problems with it as I can't exactly test it.

Upvotes: 10

Related Questions