如何使用 JavaScript 创建 Chrome 扩展来隐藏或删除页面元素?
How to create a Chrome Extension to Hide or Remove a Page Element using JavaScript?
我正在尝试创建一个 Chrome Extension 来操纵页面上的 HTML。
扩展程序应在激活时从页面中删除或隐藏某些元素。
我创建了一个简单的 manifest.json
文件:
{
"manifest_version": 2,
"name": "hide-msgs-ext",
"version": "0.0.1",
"description": "Hide msgs extension",
"content_scripts": [{
"js": ["content.js"],
"matches": ["https://website.example.com/*"],
"run_at": "document_idle"
}]
}
和一个脚本 content.js
,它应该 remove/hide 我所有的目标元素:
var elements = document.querySelectorAll('div.card');
for (var i = 0, l = elements.length; i < l; i++) {
subElement = elements[i].querySelector(':scope div.card-body');
if (subElement.firstChild.tagName != 'A') {
elements[i].style.display = "none";
}
}
如果我在 chrome 控制台中执行上述脚本,我可以隐藏我想要的所有元素,并且不会触发任何错误。但是我不知道如何让它在扩展中工作。
有人能指出我正确的方向吗?
提前谢谢你!
听起来内容可能是由 javascript 在页面加载后创建的,因此您需要等待它出现。您可以将代码包装在一个函数中并在超时后执行它:
function hideCards() {
var elements = document.querySelectorAll('div.card');
for (var i = 0, l = elements.length; i < l; i++) {
subElement = elements[i].querySelector(':scope div.card-body');
if (subElement.firstChild.tagName != 'A') {
elements[i].style.display = "none";
}
}
}
// execute after a second to give the page time to create the
// elements you want to remove
setTimeout(hideCards, 1000);
如果您希望它在页面的整个生命周期内都起作用并且速度非常快,您可以尝试使用 MutationObserver。这使您可以侦听 DOM 更改。这是如何使用它的示例。 'Add Item' 按钮添加一个新项目,每隔一个有 'remove-me' class。 MutationObserver 执行一个函数,该函数自动删除添加了 class 的任何 LI 节点,因此它们不会出现:
const observer = new MutationObserver(function(mutations) {
let added = [];
for (let i = 0; i < mutations.length; i++) {
let m = mutations[i];
for (let j = 0; j < m.addedNodes.length; j++) {
let n = m.addedNodes[j];
if (n.tagName === 'LI' && n.classList.contains('remove-me')) {
added.push(n);
}
}
}
added.forEach(element => element.remove())
});
const config = { subtree: true, childList: true };
observer.observe(document.body, config);
let index = 0;
document.getElementById('btnAddItem')
.addEventListener('click', (event) => {
let li = document.createElement('li');
if (index & 1 == 1) li.classList.add('remove-me');
li.innerText = `Item ${index++}`;
document.getElementById('myList').appendChild(li);
});
<ol id="myList">
<li>First Item</li>
</ol>
<button id="btnAddItem">Add Item</button>
我正在尝试创建一个 Chrome Extension 来操纵页面上的 HTML。 扩展程序应在激活时从页面中删除或隐藏某些元素。
我创建了一个简单的 manifest.json
文件:
{
"manifest_version": 2,
"name": "hide-msgs-ext",
"version": "0.0.1",
"description": "Hide msgs extension",
"content_scripts": [{
"js": ["content.js"],
"matches": ["https://website.example.com/*"],
"run_at": "document_idle"
}]
}
和一个脚本 content.js
,它应该 remove/hide 我所有的目标元素:
var elements = document.querySelectorAll('div.card');
for (var i = 0, l = elements.length; i < l; i++) {
subElement = elements[i].querySelector(':scope div.card-body');
if (subElement.firstChild.tagName != 'A') {
elements[i].style.display = "none";
}
}
如果我在 chrome 控制台中执行上述脚本,我可以隐藏我想要的所有元素,并且不会触发任何错误。但是我不知道如何让它在扩展中工作。
有人能指出我正确的方向吗? 提前谢谢你!
听起来内容可能是由 javascript 在页面加载后创建的,因此您需要等待它出现。您可以将代码包装在一个函数中并在超时后执行它:
function hideCards() {
var elements = document.querySelectorAll('div.card');
for (var i = 0, l = elements.length; i < l; i++) {
subElement = elements[i].querySelector(':scope div.card-body');
if (subElement.firstChild.tagName != 'A') {
elements[i].style.display = "none";
}
}
}
// execute after a second to give the page time to create the
// elements you want to remove
setTimeout(hideCards, 1000);
如果您希望它在页面的整个生命周期内都起作用并且速度非常快,您可以尝试使用 MutationObserver。这使您可以侦听 DOM 更改。这是如何使用它的示例。 'Add Item' 按钮添加一个新项目,每隔一个有 'remove-me' class。 MutationObserver 执行一个函数,该函数自动删除添加了 class 的任何 LI 节点,因此它们不会出现:
const observer = new MutationObserver(function(mutations) {
let added = [];
for (let i = 0; i < mutations.length; i++) {
let m = mutations[i];
for (let j = 0; j < m.addedNodes.length; j++) {
let n = m.addedNodes[j];
if (n.tagName === 'LI' && n.classList.contains('remove-me')) {
added.push(n);
}
}
}
added.forEach(element => element.remove())
});
const config = { subtree: true, childList: true };
observer.observe(document.body, config);
let index = 0;
document.getElementById('btnAddItem')
.addEventListener('click', (event) => {
let li = document.createElement('li');
if (index & 1 == 1) li.classList.add('remove-me');
li.innerText = `Item ${index++}`;
document.getElementById('myList').appendChild(li);
});
<ol id="myList">
<li>First Item</li>
</ol>
<button id="btnAddItem">Add Item</button>