$ {document）.click（）在chrome扩展中不起作用

Question

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,

I am really new to chrome -plugins , please he

manifest.json

   {
"name": "Iframe",
"description": "",
"version": "1",
"manifest_version": 2,
 "background":{
    "scripts":["background.js"]
},
 "browser_action": {
"default_title": "Make this page red"
 },
       "permissions": [
    "<all_urls>"
]
}

myscript.js

   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;

});

Answer 1

I got the solution ,

It is to add click to event listener of the document ,

 document.addEventListener("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;
    }, 
    false);