Need help with modifying an existing regex search extension

Question

I would like to ramp on extension development by modifying an existing extension. I have zero experience with JavaScript, but i do have experience with C, C++, Java and Python. I chose the Regular Expression Search extension by bizsimon. Here is the JavaScript code of the content script which i am trying to understand.

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { sendResponse(chrome_regex_search(request.exp)); });

function chrome_regex_search(exp) {
 var tw=document.createTreeWalker(document.getElementsByTagName("body")[0], NodeFilter.SHOW_TEXT, null, false); 
 while (node = tw.nextNode()) {
  node.parentNode.innerHTML=node.parentNode.innerHTML.replace(/<font class="chrome_search_highlight"[^>]*>(.+)<\/font>/igm, '$1');
 }

 try {
  var pattern=eval("/(>[^<]*)("+exp+")([^<]*<)/igm");
  var tw=document.createTreeWalker(document.getElementsByTagName("body")[0], NodeFilter.SHOW_TEXT, null, false); 
  while(node=tw.nextNode()) { 
   node.parentNode.innerHTML=node.parentNode.innerHTML.replace(pattern, '$1<font class="chrome_search_highlight" style="background: yellow">$2</font>$3'); 
  }
  return {"count": document.getElementsByClassName("chrome_search_highlight").length};
 } catch(e) {
  return {"count": 0};
 }  
}

And here are my questions:

1. What does this code do?

   node.parentNode.innerHTML=node.parentNode.innerHTML.replace(/]*>(.+)</font>/igm, '$1');

2. I would like to add navigation buttons which enable the user to move from one search result to another. What changes are required in the script? I assume that now i will need to save some state which remembers which search result is currently being visited. How do i make the browser jump from one search result to another?
3. Any useful comments which would help understand the code or even a code walkthru would be very much appreciated.

Answer 1

for your question #1: That code looks like it's trying to strip a <font> tag from HTML, eg change <font ...>real content here</font> to real content here .

just a side comment: prefer using new Regexp(somestring) to eval("/"+somestring+"/") , as the eval can lead to a possible security hole. (see MDC docs for syntax particulars)

Answer 2

• Question #1: as Jason S said, it's stripping the <font> tag: specifically those that are of the "chrome_search_highlight" class. In other words, it's walking the node tree of the body element and removing previous search hit highlights.
• Then in the second tree-walking loop, it's adding those same font tags around occurrences of the supplied regexp. The cryptic (>[^<]*) group before, and similar group after, the regexp is there to help ensure that you're matching actual page text, not the name of an HTML element or an attribute name or value. Ie the regexp search hit must be preceded by a > that is not followed by a < until after the search hit.

Off to bed...