title: Chrome Extension Dev: Modifying the DOM using jQuery
body: <p>OK.  So I've read up on content scripting and the like, including several other SO articles that I'll add below, but this still isn't working!</p>
  <p>My <code>_manifest.json_</code>:</p>
  <pre><code>{
      &quot;name&quot;: &quot;name&quot;,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;description&quot;: &quot;desc&quot;,
      &quot;browser_action&quot;: { &quot;default_icon&quot;: &quot;icon.png&quot; },
      &quot;permissions&quot;: [ &quot;tabs&quot;, &quot;http://*/*&quot; ],
      &quot;background_page&quot;: &quot;background.html&quot;,
      &quot;content_scripts&quot;: [ {
          &quot;all_frames&quot;: true,
          &quot;js&quot;: [ &quot;content.js&quot; ],
          &quot;matches&quot;: [ &quot;http://*/*&quot;, &quot;https://*/*&quot; ] 
      } ]
  }
  </code></pre>
  <p>My <code>_background.html_</code>:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Background Page&lt;/title&gt;    
      &lt;script src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;    
      &lt;script src=&quot;content.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script&gt;
          chrome.browserAction.onClicked.addListener(function(tab) 
          {
              chrome.tabs.executeScript(null, {file:&quot;content.js&quot;});
          });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My <code>_content.js_</code>:</p>
  <pre><code>$('body').prepend('&lt;h1&gt;Testing!&lt;/h1&gt;');
  $('body').css('background', '#f00 !important');
  </code></pre>
  <p>For now, I'm just trying to modify the background color of the body of a tab.  I've added the click listener to run my background.html file, but it doesn't work.  I've breakpointed on the script call in the background.html file when debugging and the executeScript event is hit, but my content.js file breakpoint doesn't get hit.  I thought having the content.js file under the &quot;content_scripts&quot; in my manifest.json file was enough, but if I remove my background.html file nothing happens.</p>
  <p>Can anyone help me modify the content of a tab in any way?!  It feels like I'm missing something, because I feel like I'm making this harder than it is.  If there is an easier way than what I'm trying to do, I'm open to any suggestions/best practices.</p>
  <h2>SO Researched Articles</h2>
  <ul>
  <li><a href="https://stackoverflow.com/questions/3695766/using-html-dom-in-google-chrome-extension">Using html dom in google chrome extension</a></li>
  <li><a href="https://stackoverflow.com/questions/3694970/chrome-extension-dom-traversal">Chrome extension dom traversal</a></li>
  <li><a href="https://stackoverflow.com/questions/2063015/google-chrome-extension-accessing-the-dom">Google chrome extension accessing the dom</a></li>
  <li><a href="https://stackoverflow.com/questions/7641099/chrome-extension-grab-dom-content-for-parsing">Chrome extension grab dom content for parsing</a></li>
  </ul>