title: Event doesnt fire in chrome addon
body: <p>So, I've been back and forth with this problem. What I want is to execute som piece of code (in a injected.js file) when a button is pressed on the website. I want to run code that I've written myself.</p>
  
  <p>This should be do-able? I've looked it up, and this is taken from the developer docs:</p>
  
  <p><em>Content scripts execute in a special environment called an isolated world. They <strong>have access to the DOM</strong> of the page they are injected into, but not to any JavaScript variables or functions created by the page. <strong>It looks to each content script as if there is no other JavaScript executing on the page it is running on</strong>. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.</em></p>
  
  <p>As can be seen in the example, also found on the same page (http://developer.chrome.com/extensions/content_scripts.html#execution-environment) I should be able to attach a click event to something and the execute code from the same .js file when that button is clicked? Right?</p>
  
  <p>Anyway, here's the code I've written:</p>
  
  <pre><code>$sidebar = $('&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;')
      .css('background', '#eee')
      .css('width', '20%')
      .css('position', 'fixed')
      .css('right', '0px')
      .css('top', '0px')
      .css('height', '100%');
  
  $form = $('&lt;br/&gt;&lt;center&gt;&lt;div class="input-append"&gt;\
    &lt;input class="span2" id="add_cat_input"  type="text"&gt;\
    &lt;button class="btn" type="button"&gt;Add category&lt;/button&gt;\
    &lt;/div&gt;\
    &lt;div class="input-append"&gt;&lt;select id="categories"&gt;\
    &lt;option&gt;A&lt;/option&gt;\
    &lt;option&gt;B&lt;/option&gt;\
    &lt;option&gt;C&lt;/option&gt;\
    &lt;option&gt;D&lt;/option&gt;\
    &lt;option&gt;E&lt;/option&gt;\
  &lt;/select&gt;\
  &lt;button class="btn" type="button"&gt;Edit&lt;/button&gt;&lt;button class="btn" type="button"&gt;Delete&lt;/button&gt;\
  &lt;/div&gt;&lt;/center&gt;');
  
  $('body').prepend($sidebar);
  $sidebar.append($form);
  
  $(document).ready(function() {
      console.log(document.getElementById("add_cat_input"));
      document.getElementById("add_cat_input").addEventListener("click", function() {
          console.log('hej');
  }, false);
  });
  </code></pre>
  
  <p>But nothing happends when I press 'Add category'.</p>
  
  <p>Can anyone explain why? Am I doing it wrong?</p>
  
  <p>The code above is from myscript.js.
  Here is my manifest.json</p>
  
  <pre><code>{
    "name" : "πSpend",
    "version" : "0.1",
    "description" : "Creates a piechart of the spendings in your bankaccount.",
    "permissions": [ "cookies", "tabs", "http://*/*", "contextMenus" ],
    "icons": { "16": "cookie.png", "48": "cookie.png", "128": "cookie.png" },
    "browser_action": {
      "default_icon": "cookie.png",
      "default_popup": "popup.html"
    },
    "background": {
      "scripts": ["background.js"]
    },
    "manifest_version": 2,
    "content_scripts": [
      {
        "matches": ["https://internetbanken.privat.nordea.se/*"],
        "css": [ "bootstrap.min.css" ],
        "js": ["jquery.js", "raphael-min.js", "g.raphael-min.js", "g.pie-min.js", "myscript.js"]
      }
    ]
  }
  </code></pre>
  
  <p>On the way I tried to use some form of message posting instead, but this line:</p>
  
  <pre><code>var port = chrome.extension.connect();
  </code></pre>
  
  <p>Gets me this error:</p>
  
  <pre><code>Port error: Could not establish connection. Receiving end does not exist. 
  </code></pre>