javascript - Change matching words in a webpage's text to buttons -

i trying make chrome extension parses through website looking keywords, replacing keywords buttons. however, when change text image path becomes corrupted.

// content script (isolated environment) //    have partial access chrome api // todo  //    consider adding "run_at": "document_end" in manifest...  //      don't want run before full load //      might able via chrome api  console.log("scraper running"); var keywords = ["sword", "gold", "yellow", "blue", "green", "china", "civil", "state"];  // match keywords page textx // create necessary buttons (function() {   function runscraper() {     console.log($('body'));     for(var = 0; < keywords.length; i++){      $("body:not([href]):not(:image)").html($("body:not([href]):not(:image)").html()          .replace(new regexp(keywords[i], "ig"),"<button> " + keywords[i] + " </button>"));      console.log("ran " + i);     }   }   function createresourcebutton() {     // programatically create button here      // want return button     return null;   }   function createactionbutton() {   }   runscraper(); })(); // todo create functions buttons call //      these pass data chrome extension (see message passing) //      or can consider hack this:  // "building chrome extension - inject code in page using content script" // http://stackoverflow.com/questions/9515704 

image of current results:

your approach problem wrong. this, need walk though document changing text nodes, not html of nodes.

modifying code this other answer of mine, following complete extension changes matching words on page buttons.

the extension in action:

manifest.json

{     "description": "upon action button click, make matching words buttons.",     "manifest_version": 2,     "name": "button matching words",     "version": "0.1",      "permissions": [         "activetab"     ],      "background": {         "scripts": [             "background.js"         ]     },      "browser_action": {         "default_icon": {             "32": "myicon.png"         },         "default_title": "make buttons of specified words"     } } 

background.js:

chrome.browseraction.onclicked.addlistener(function(tab) {     //inject script change text of matching words buttons.     chrome.tabs.executescript(tab.id,{file: 'contentscript.js'}); }); 

contentscript.js:

(function(){     var keywords = ["sword", "gold", "yellow", "blue", "green", "china", "civil", "state"];     //build regexp once. doing every replace inefficient.     //  build 1 regexp matches of words instead of multiple regexp.     var regexptext = '\\b(' + keywords.join('|') + ')\\b';     console.log(regexptext);     var myregexp = new regexp(regexptext ,'mgi');      function handletextnode(textnode) {         if(textnode.nodename !== '#text'             || textnode.parentnode.nodename === 'script'              || textnode.parentnode.nodename === 'style'         ) {             //don't except on text nodes, not children              //  of <script> or <style>.             return;         }         let origtext = textnode.textcontent;         //clear regexp search, not doing may cause issues if matching against         //  identical strings after first one.         myregexp.lastindex = 0;         let newhtml=origtext.replace(myregexp, '<button>$1</button>');         //only change dom if made replacement in text.         //compare strings, should faster second regexp operation ,         //  lets use regexp in 1 place maintainability.         if( newhtml !== origtext) {             let newspan = document.createelement('span');             newspan.innerhtml = newhtml;             textnode.parentnode.replacechild(newspan,textnode);         }     }      //this assumes want matching words in document changed, without     //  limiting sub portions of document (i.e. not 'not(a)').     let textnodes = [];     //create nodeiterator text node descendants     let nodeiter = document.createnodeiterator(document.body,nodefilter.show_text);     let currentnode;     //add text nodes found list of text nodes process below.     while(currentnode = nodeiter.nextnode()) {         textnodes.push(currentnode);     }     //process each text node     textnodes.foreach(function(el){         handletextnode(el);     }); })(); 

myicon.png:

^{the code in handletextnode make changes text nodes modified code in another answer of mine.}