I'm trying to create a Chrome extension that hides div
s of a certain class, but unfortunately I can't get it to work:
My manifest.json
:
{
"manifest_version": 2,
"name": "DivFilter",
"description": "This extension allows the user to filter StackOverflow questions.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
my popup.html
:
<html>
<head>
<title>SO Filter</title>
<script src="popup.js"></script>
</head>
<body>
<h1>SO Filter</h1>
<button>Filter!</button>
</body>
</html>
and my popup.js
:
function filter() {
var x = document.getElementsByClassName("question-summary narrow");
console.log("Starting for-loop:");
console.log(x);
for (var i = 0; i < x.length; i++) {
console.log(x[i]);
var style = window.getComputedStyle(x[i]);
if (style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', filter);
});
when clicking the button on https://stackoverflow.com/ it logs the following:
I don't understand why length
is 0, as when inspecting the page it clearly shows div
s with the class I'm searching for:
I've read many other posts about this on SO, but so far I haven't been able to solve my problem...