Chrome 替换网页文本的扩展有时只有在手动刷新网页后才能工作
Chrome extension to replace text on webpage works only after manually refreshing webpage sometimes
我正在开发 chrome 扩展来替换网页上的特定文本。对于某些网站,它只有在使用 F5 手动刷新网页后才有效。例如,当我打开http://www.iciba.com/并输入Google并回车时,所有Google文本在结果没有被替换。但是我按F5手动刷新页面后,所有的文字都被替换了。
manifest.json:
{
"name": "My Extension",
"version": "0.1.0",
"description": "An extension that replaces texts on webpages",
"manifest_version": 2,
"permissions": [
"tabs",
"<all_urls>"
],
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"replacetxt.js"
],
"run_at": "document_end",
"all_frames": true
}]
}
replacetxt.js:
function isExcluded(elm) {
if (elm.tagName == "STYLE") {
return true;
}
if (elm.tagName == "SCRIPT") {
return true;
}
if (elm.tagName == "NOSCRIPT") {
return true;
}
if (elm.tagName == "IFRAME") {
return true;
}
if (elm.tagName == "OBJECT") {
return true;
}
return false
}
function traverse(elm) {
if (elm.nodeType == Node.ELEMENT_NODE || elm.nodeType == Node.DOCUMENT_NODE) {
// exclude elements with invisible text nodes
if (isExcluded(elm)) {
return
}
for (var i=0; i < elm.childNodes.length; i++) {
// recursively call to traverse
traverse(elm.childNodes[i]);
}
}
if (elm.nodeType == Node.TEXT_NODE) {
// exclude text node consisting of only spaces
if (elm.nodeValue.trim() == "") {
return
}
// elm.nodeValue here is visible text we need.
console.log(elm.nodeValue);
elm.nodeValue = elm.nodeValue.replace("Google", "***");
}
}
traverse(document);
这是遵循@wOxxOm 的建议的工作代码
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
traverse(mutation.target);
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(document, config);
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
traverse(mutation.target);
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(document, config);
我正在开发 chrome 扩展来替换网页上的特定文本。对于某些网站,它只有在使用 F5 手动刷新网页后才有效。例如,当我打开http://www.iciba.com/并输入Google并回车时,所有Google文本在结果没有被替换。但是我按F5手动刷新页面后,所有的文字都被替换了。
manifest.json:
{
"name": "My Extension",
"version": "0.1.0",
"description": "An extension that replaces texts on webpages",
"manifest_version": 2,
"permissions": [
"tabs",
"<all_urls>"
],
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"replacetxt.js"
],
"run_at": "document_end",
"all_frames": true
}]
}
replacetxt.js:
function isExcluded(elm) {
if (elm.tagName == "STYLE") {
return true;
}
if (elm.tagName == "SCRIPT") {
return true;
}
if (elm.tagName == "NOSCRIPT") {
return true;
}
if (elm.tagName == "IFRAME") {
return true;
}
if (elm.tagName == "OBJECT") {
return true;
}
return false
}
function traverse(elm) {
if (elm.nodeType == Node.ELEMENT_NODE || elm.nodeType == Node.DOCUMENT_NODE) {
// exclude elements with invisible text nodes
if (isExcluded(elm)) {
return
}
for (var i=0; i < elm.childNodes.length; i++) {
// recursively call to traverse
traverse(elm.childNodes[i]);
}
}
if (elm.nodeType == Node.TEXT_NODE) {
// exclude text node consisting of only spaces
if (elm.nodeValue.trim() == "") {
return
}
// elm.nodeValue here is visible text we need.
console.log(elm.nodeValue);
elm.nodeValue = elm.nodeValue.replace("Google", "***");
}
}
traverse(document);
这是遵循@wOxxOm 的建议的工作代码
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
traverse(mutation.target);
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(document, config);
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
traverse(mutation.target);
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(document, config);