I would like to create Google Chrome extension. Its job is to replace a word with another on all websites.
I have the following manifest.json file:
{
"name": "My extension",
"version": "1.0",
"background_page": "background.html",
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"],
"run_at": "document_end"
}
]
}
and the javascript in myscript.js is:
< script type="text/javascript" >
document.body.innerHTML = document.body.innerHTML.replace("uno", "dos");
< /script >
However this does not function.. and I cannot find a way to debug the content script, only the background.html
Using Find and Replace is pretty straightforward. Go to the page you want to find and replace text in, press the keyboard shortcut Ctrl + Shift + F and enter the text you want to find into the top box. Next, fill in the “Replace with” field and click “Replace” or “Replace All.”
Open any web page inside Chrome and select the text on the web page that you wish to edit. Right-click the selected text and choose Inspect Element in the contextual menu. The developer tools will open in the lower half of your browser and the corresponding DOM element will be selected.
To use Read Aloud, navigate to the web page you want to read, then click the Read Aloud icon on the Chrome menu. In addition, the shortcut keys ALT-P, ALT-O, ALT-Comma, and ALT-Period can be used to Play/Pause, Stop, Rewind, and Forward. You may also select the text you want to read before activating the extension.
Alternatively if you want to search and replace in the HTML you could Right Click → Edit as HTML the <body> in the DevTools Elements Panel select all the text with Ctrl + a , paste into your favourite editor, make the change there and paste it back.
I took the example from JavaNut13 and Matt Curtis to create an alias hider extension for Reddit, and updated it for the new manifest 2. It looks for user on Reddit named "user1" and replaces it with "nobody". Modify as you need.
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");
I have actually written this in jQuery: (Making sure you have the correct include tag)
var replaced = $("body").html().replace(/text/g,'replace');
$("body").html(replaced);
Replacing/changing text within the DOM on this scale should not be done with blunt HTML-regex replacement, which is very unsafe. You risk mutilating the HTML in the process.
What you need to do is loop over every TextNode (Node
) within the document, modifying the text within them.
Your code will end up looking something like this:
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);
Use the DOM and modify the data
of the appropriate Text
nodes. E.g.
document.body.querySelector(".number").firstChild.data = "dos";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With