用Chrome内容脚本扩展替换网站中的文本
Replace text in website with Chrome content script extension
我想创建谷歌Chrome扩展。它的工作是用所有网站上的一个词替换另一个词。
我有以下舱单。json文件:
{
"name": "My extension",
"version": "1.0",
"background_page": "background.html",
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"],
"run_at": "document_end"
}
]
}
和myscript.js中的javascript是:
< script type="text/javascript" >
document.body.innerHTML = document.body.innerHTML.replace("uno", "dos");
< /script >
然而,这不起作用…我找不到一个方法来调试内容脚本,只有background.html
我以JavaNut13和Matt Curtis的例子为Reddit创建别名隐藏器扩展,并为新的清单2更新了它。它查找Reddit上名为"user1"的用户,并将其替换为"nobody"。根据需要修改
manifest.json
{
"name": "No Alias",
"version": "0.1",
"permissions": [
"https://www.reddit.com/*"
],
"content_scripts": [
{
"matches": ["https://www.reddit.com/*"],
"js": ["myscript.js"],
"run_at": "document_end"
}
],
"manifest_version": 2
}
myscript.js
document.body.innerHTML = document.body.innerHTML.replace(new RegExp("user1", "g"), "nobody");
我实际上是用jQuery写的:(确保你有正确的include标签)
var replaced = $("body").html().replace(/text/g,'replace');
$("body").html(replaced);
在这种规模上替换/更改DOM中的文本不应该使用直接的HTML-regex替换,这是非常不安全的。在此过程中,您可能会破坏HTML。
您需要做的是遍历文档中的每个TextNode (Node
),修改其中的文本。
你的代码最终看起来像这样:
var replaceTextInNode = function(parentNode){
for(var i = parentNode.childNodes.length-1; i >= 0; i--){
var node = parentNode.childNodes[i];
// Make sure this is a text node
if(node.nodeType == Element.TEXT_NODE){
node.textContent = /* modify text here */
} else if(node.nodeType == Element.ELEMENT_NODE){
// Check this node's child nodes for text nodes to act on
replaceTextInNode(node);
}
}
};
replaceTextInNode(document.body);
使用DOM,修改相应Text
节点的data
。例如
document.body.querySelector(".number").firstChild.data = "dos";
var matchText = function(node, regex, callback, excludeElements) {
excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas', 'a']);
console.log("Node name " + node.nodeName);
var child = node.firstChild;
while (child)
{
switch (child.nodeType)
{
case 1:
if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
break;
matchText(child, regex, callback, excludeElements);
break;
case 3:
var bk = 0;
child.data.replace(regex, function(all)
{
var args = [].slice.call(arguments),
offset = args[args.length - 2],
newTextNode = child.splitText(offset+bk), tag;
bk -= child.data.length + all.length;
newTextNode.data = newTextNode.data.substr(all.length);
tag = callback.apply(window, [child].concat(args));
child.parentNode.insertBefore(tag, newTextNode);
child = newTextNode;
});
regex.lastIndex = 0;
break;
}
child = child.nextSibling;
}
return node;
};
matchText(document.body, new RegExp("(?:(?:''+|0{0,2})91(''s*[''- ]''s*)?|[0 ]?)?[789]''d{9}|(''d[ -]?){10}''d", "g"), function(node, match, offset) {
var newAnchor = document.createElement("a");
newAnchor.className = "search-term";
//newAnchor.textContent = match;
newAnchor.href = "tel:" + match.replace( /('s|-)/g, "");
newAnchor.innerHTML = '<img src =' + chrome.extension.getURL("call_icon_10x10.png")+'> ' + match;
return newAnchor;
});
相关文章:
- 如何更改网站上显示的文本
- 在我的网站上以纯文本形式添加最新推文
- 如何使用注入Firefox控制台的js文本来更改网站的背景图像-示例提供
- 如何使用JavaScript或jQuery将纯文本网站捕获到变量中
- 如何使用文本框在网站上保存更改
- 在网站HTML页面上搜索文本
- 如何在网站上创建仅显示文本的简单弹出窗口
- 在其他网站上查找/着色/标记文本
- 我正在尝试使用JS/JQuery自动对网站中的文本执行多个查找和替换操作
- 是否覆盖网站上文本输入区域的默认移动设备键盘?(HTML/JS/jQuery)
- 为网站创建用户生成的文本
- Chrome扩展:弹出操作网站上的文本框
- 我正在尝试为一个网站创建一个文本框,可以将文本更改为用户希望的任何格式
- 如何只将类似facebook的文本框输入我的网站
- 试图弄清楚某个网站的文本动画是否是用某个库或插件完成的
- 从网站中删除文本选择限制的脚本
- 只有文本从我的网站加载在火狐上
- 谷歌文档,用于在网站上提供文本
- 修复视差网站上的文本
- 脚本改变网站文本基于域名