title: Running Chrome Extension On Every New Page
body: <p>I have created a Chrome Extension that censors data out of your dom. It allows you to add keywords to the <code>localStorage</code> and then it hides the parent divs of those keywords and updates the dom with the censored dom.  </p>
  
  <p>My problem is if add the keyword on a page, it works and that page is immediately updated. </p>
  
  <p>But if I go to a new page I have to add the keyword again. I need the new tab being viewed to be updated with the censored dom on page load to reduce the amount of times a user has to do anything. </p>
  
  <p>background.js</p>
  
  <pre><code>    chrome.runtime.onMessage.addListener(function (msg, sender) {
        // First, validate the message's structure
        if ((msg.from === 'content') &amp;&amp; (msg.subject === 'showPageAction')) {
          // Enable the page-action for the requesting tab
          chrome.pageAction.show(sender.tab.id);
        }
      });
  
      function loadKeyWords() {
          $('#keyWords').html('');
          localArray = JSON.parse(localStorage.getItem('keyWords'));
          for(var i = 0; i &lt; localArray.length; i++) {
            $('#keyWords').prepend('&lt;li&gt;&lt;input class="check" name="check" type="checkbox"&gt;'+localArray[i]+'&lt;/li&gt;'); 
          $( "div:contains("+localArray[i]+")" ).css( "display", "none" );
          $( "section:contains("+localArray[i]+")" ).css( "display", "none" );
              }
              return localArray;
          }
  
  chrome.browserAction.onClicked.addListener(function(activeTab){
    var newURL = "https://www.facebook.com/zensorship";
    chrome.tabs.create({ url: newURL });
  });
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  
     var getKeywords = loadKeyWords();
      chrome.tabs.executeScript(null, {
      code: 'var config = ' + JSON.stringify(getKeywords)
    }, function() {
      chrome.tabs.executeScript(null, {file: 'custom.js'});
    });
    });
  </code></pre>
  
  <p>custom.js</p>
  
  <pre><code>var divs = document.getElementsByTagName('div');
  var searchValue=config.toString().split(',');
  var div;
  var j = searchValue.length;
  while(j--){
  var i = divs.length;
  while (i--) {
    div = divs[i];
  
          if(div.innerHTML.indexOf(searchValue[j]) &gt; -1){
  
              div.parentNode.removeChild(div);
  
            }
      }
  }
  </code></pre>
  
  <p>popup.js</p>
  
  <pre><code>// Update the relevant fields with the new data
  function setDOMInfo(info) {
    $("div p:contains(localStorage.getItem('keyWords')).parent('div').hide()");
  }
  
  // Once the DOM is ready...
  window.addEventListener('DOMContentLoaded', function () {
    // ...query for the active tab...
    chrome.tabs.query({
      active: true,
      currentWindow: true
    }, function (tabs) {
      // ...and send a request for the DOM info...
    document.getElementById('myDIV').style.display = 'none';
      chrome.tabs.sendMessage(
          tabs[0].id,
          {from: 'popup', subject: 'DOMInfo'},
          // ...also specifying a callback to be called 
          //    from the receiving end (content script)
          setDOMInfo);
    });
  });
  </code></pre>