title: Removing DOM element in Chrome extension
body: <p>I think I have read all the existing answers to this question on SO but could not solve my problem, so here it is:</p>
  
  <p>The idea is to remove a div element by id on the current tab upon clicking on a button from a popup that is shown upon clicking on the extension icon.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;TurboViewer&lt;/title&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;script src="contentscript.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h3&gt;Turbo Viewer&lt;/h3&gt;
      &lt;button id="checkPage"&gt;Check this page now!&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
    var checkPageButton = document.getElementById('checkPage');
    checkPageButton.addEventListener('click', function() {
  
      chrome.tabs.getSelected(null, function(tab) {
        // Send a request to the content script.
        chrome.tabs.sendMessage(tab.id, {action: "getDOM"}, function(response) {
          console.log("We are good");
        });
  });
  
    }, false);
  }, false);
  </code></pre>
  
  <p><strong>contentscript.js</strong></p>
  
  <pre><code>chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
   if (request.action == "getDOM"){
       var sbElement = document.querySelector('div#sidebar');
       sbElement.parentElement.removeChild(sbElement);
       sendResponse({dom: "Successfully removed"});
   }
  
   else
     sendResponse({}); // Send nothing..
  });
  </code></pre>
  
  <p>and finally <strong>manifest.json</strong></p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "TurboView Plugin",
    "description": "This extension will modify your view of the webpage",
    "version": "1.0",
  
    "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
    },
    "permissions": [
     "activeTab",
     "tabs"
     ],
     "content_scripts": [
      {
          "matches": ["*://*.example.com/*"],
          "js": ["contentscript.js"]
      }
     ]
  }
  </code></pre>
  
  <p>The first thing I notice is that my breakpoint in the contentscript.js never gets hit.</p>
  
  <p>So I am not sure if it is even getting loaded.</p>
  
  <p>Any ideas appreciated,
  Thanks</p>