Удаление элемента DOM в расширении Chrome
Я думаю, что я прочитал все существующие ответы на этот вопрос на SO, но не смог решить мою проблему, поэтому вот оно:
Идея состоит в том, чтобы удалить элемент div по id на текущей вкладке после нажатия кнопки во всплывающем окне, которое отображается при нажатии на значок расширения.
Вот мой код:
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..
});
и наконец манифест.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"]
}
]
}
Первое, что я замечаю, это то, что моя точка останова в contentcript.js никогда не попадает в цель.
Так что я не уверен, загружается ли он вообще.
Любые идеи приветствуются, спасибо