I think I have read all the existing answers to this question on SO but could not solve my problem, so here it is:
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.
Here is my code:
popup.html
<!doctype html>
<html>
<head>
<title>TurboViewer</title>
<script src="popup.js"></script>
<script src="contentscript.js"></script>
</head>
<body>
<h3>Turbo Viewer</h3>
<button id="checkPage">Check this page now!</button>
</body>
</html>
popup.js
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);
contentscript.js
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..
});
and finally manifest.json
{
"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"]
}
]
}
The first thing I notice is that my breakpoint in the contentscript.js never gets hit.
So I am not sure if it is even getting loaded.
Any ideas appreciated, Thanks
