title: Chrome Extension Context Menu: how to append div to page after clicking menu item
body: <p>Playing around with building a Chrome extension. At the moment I've put together a context menu item. When the context menu item is clicked, it fires <code>itemClicked()</code> in my background script <code>context_menu.js</code>:</p>
  
  <pre><code>function itemClicked(info, tab) {
       alert("clicked");
  }
  </code></pre>
  
  <p>The alert fires. I can also do stuff like sending ajax requests through <code>itemClicked()</code></p>
  
  <p>However, I can't append any elements to the page (or DOM manipulation of any sort). Even something as basic as this doesn't work:</p>
  
  <pre><code>  var d = document.createElement('div');
    d.setAttribute("css", "width: 100px; height: 100px; background-color: red; position: fixed; top: 70px; left: 30px; z-index: 99999999999;");
    document.body.appendChild(d); 
  </code></pre>
  
  <p>So I tried to add the same code to a content script:</p>
  
  <pre><code>chrome.contextMenus.onClicked.addListener(function(OnClickData info, tabs.Tab tab) {
    //code to append the input here
  });
  </code></pre>
  
  <p>But it still won't work. What am I doing wrong?</p>
  
  <p>How can I get the context menu to append something to the page after clicking?</p>
  
  <p>Thanks so much!</p>
  
  <p>Edit: here is my manifest.json (removed the irrelevant stuff like name/description...etc)</p>
  
  <pre><code>{
  
  
    "permissions": [
      "activeTab",        
      "tabs",
      "cookies",
      "contextMenus"
    ],
  
    "background": {
      "scripts": ["context_menu.js"]
    },
    "browser_action": {
      "default_icon": "icon16.png",
      "default_css": "popup.css",
      "default_popup": "popup.html"
    },
  
    "content_scripts": [
      {      
        "matches": ["&lt;all_urls&gt;"],
        "js": ["vendor/jquery-1.8.2.min.js", "config.js", "content_script.js"]   
      }
    ],
  
    "web_accessible_resources": ["popup.html"]
  
  }
  </code></pre>