title: $(document).click() not working in chrome extension
body: <p>I am creating a chrome plugin , which shows the elements which are clicked on a web page in a div tag I have added at the bottom of the page.
  The plugin is showing up as I designed at the bottom , when i click on browser action.  But the other part of the script with in the script is not working, </p>
  
  <p>I am really new to chrome -plugins , please he</p>
  
  <p>manifest.json</p>
  
  <pre><code>   {
  "name": "Iframe",
  "description": "",
  "version": "1",
  "manifest_version": 2,
   "background":{
      "scripts":["background.js"]
  },
   "browser_action": {
  "default_title": "Make this page red"
   },
         "permissions": [
      "&lt;all_urls&gt;"
  ]
  }
  </code></pre>
  
  <p>myscript.js</p>
  
  <pre><code>   var iframe = document.createElement("iframe");
      var div = document.createElement("div");
     div.setAttribute("src", "");
     div.setAttribute("style", "position:fixed; z-index:10000;bottom:0px;left:0px; border:none; width:100%; height:100px; background-color:#ccc;border:#000 solid 3px;");
    div.setAttribute("scrolling", "no");
    div.setAttribute("frameborder", "0");
    div.setAttribute("id","ospy");
    var domEl= "test56";
    document.body.appendChild(div);
    document.getElementById('ospy').innerHTML += domEl;
  
    //this part of the code is not working
   $(document).click(function(e) {
   e.preventDefault();
       var domEl = e.target.id.toString();
   domEl += e.target.className.toString();
   domEl += e.target.toString();
   domEl += e.target.innerHTML;
  
       document.getElementById('ospy').innerHTML += domEl;
  
  });
  </code></pre>