I am currently writing a simple chrome extension that replaces custom words.
Yes, I have also seen those various questions that are asking similar questions, but something is lacking and I cannot find it. I am very new to javascript and I am doing this for an assignment.
In my chrome extension, I have two textboxes (replace from and replace to) and a submit button. What I am trying to achieve, currently, is assigning the replace variables in content.js from the values in the two textboxes in the chrome extension when the button in the chrome extension is clicked upon, however, the console is printing that the button does not exist, even though I have attempted to take measures to avoid that.
What I have so far:
Manifest.json
{
"manifest_version": 2,
"name": "Word replacer",
"description": "Change words!",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"run_at": "document_start",
"js": [
"content.js"
],
"matches": [
"*://*/*"
]
}
]
}
HTML
<html>
<head>
<script type="text/javascript" src="content.js"></script>
<--some CSS now-->
</head>
<body>
<h1>Word replacer</h1>
<div id="container">
<form id="frm">
Text to replace:<br>
<input id="toReplace" type="text"><br>
Replace with:<br>
<input id="replaceWith" type="text"><br>
<input id="rplBtn" type="submit" value="Submit" style="float: right;">
</form>
</div>
</body>
</html>
content.js
var elements = document.getElementsByTagName('*');
var replaceTo=new RegExp("test","gi");
var replaceFrom=new RegExp("/test/gi","gi"); //These two are already assigned for testing purposes
console.log("out");
if(document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () {
console.log("in");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
for (var j = 0; j < element.childNodes.length; j++) {
var node = element.childNodes[j];
if (node.nodeType === 3) {
var text = node.nodeValue;
var replacedText = text.replace(replaceFrom, replaceTo);
if (replacedText !== text) {
element.replaceChild(document.createTextNode(replacedText), node);
}
}
}
}
}
)}
if (document.readyState ==="interactive") {
console.log(0);
document.addEventListener('DOMContentLoaded', function () {
console.log(1);
var btn = document.getElementById('rplBtn');
console.log(2);
btn.addEventListener("click", function() {
console.log(3);
console.log("clicked");
replaceTo = new RegExp(document.getElementById("replaceWith").innerHTML,"gi");
replaceFrom = new RegExp(document.getElementById("toReplace").innerHTML,"gi");
window.location.reload(true);
})});
}
Since this is a lot of code, let me tell you what things I have changed after looking at examples from others. Normally, the console doesn't print beyond "out" (this is from content.js), but if I set the run_at property to "document_start", all instances of "/test/gi" are replaced with "test" as they are supposed to.
However, the button is still not recognised, so I tried to only look for the button when readyState is "interactive", however, the compiler doesn't seem to reach there as 0 is not printed.
Can you help me solving this as I have tried pretty much all I could think of in the past 6 hours.
Thank you,
