title: Why is chrome.tabs.executeScript() necessary to change the current website DOM and how can I use jQuery to achieve the same effect?
body: <p>UPDATE:
  I receive so many negatives recently at that it is a really old question(2.5 years). I don't even use jquery any more. So please give it a break! </p>
  
  <hr>
  
  <p>I have already made some chrome extensions before but this is the first time I need to change something on the  website the user is current looking at to respond to button clicks placed in the extension popup.</p>
  
  <p>As I realized just executing some jQuery lines have no effect. What works is a method I found on google developer page sample extension:  <code>chrome.tabs.executeScript()</code> but I have no clue why it's necessary. </p>
  
  <p>There must be some basic concept I'm not aware of. Could anyone explain it to me? An can I execute jQuery (which is loaded) too?</p>
  
  <p>Full example:</p>
  
  <pre><code>$('#change_button').on('click', function() {
  
    //this doesen't work
    $("body").css({backgroundColor: 'blue'});
  
    //but this line does
    chrome.tabs.executeScript(null, {code:"document.body.style.backgroundColor='red'"});
  
  });
  </code></pre>
  
  <p>Actually I need jQuery badly to make some more changes in the DOM and respond to them i.e: </p>
  
  <pre><code>if( $(".list,.list-header-name").hasClass("tch"))
  {
    $(".list,.list-header-name").addClass("tch");
  }
  </code></pre>