I am new to coding, and am still a bit shaky on this message passing business. I want an onclick function to insert the textarea from my popup.html into a specific place in my content.js. In doing so, it would take out that specified word on all webpages and replace it with the word submitted from the second box (myFunction1()). If possible, if there is a way to onClick submit what's in the text area and write it onto the popup.html, or post it on an options page, that would be very helpful as well. Here's what I have so far:
manifest.json
{
"manifest_version": 2,
"name": "My extension",
"description": "help!",
"version": "0.1",
"options_page": "options.html",
"icons": { "19" : "icon.png",
"48" : "logo45.png",
"128" : "logo120.png"},
"browser_action": {
"default_icon": "icon.png",
"default_title": "My Extension",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"permissions" : [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"content.js"
],
"run_at": "document_end"
}
]
}
content.js
var port = chrome.runtime.connect({name:"mycontentscript"});
port.onMessage.addListener(function(message,sender){
if(message.greeting === "hello"){
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
function myFunction1() {
var x = document.getElementById("myText1").value;
document.getElementById("demo1").innerHTML = x;
}
var elements = document.getElementsByTagName('*');
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(id="**demo**"/gi, id="**demo1**");
if (replacedText !== text) {
element.replaceChild(document.createTextNode(replacedText), node);
}
}
}
}
popup.html
<input type="text" id="myText" value=" word">
<input type="text" id="myText1" value=" word2">
<button onclick="myFunction();myFunction1()">Thanks!</button>
<p id="demo">
<p id="demo1">
<script src="popup.js"></script>
popup.js
document.addEventListener('DOMContentLoaded',
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
};
function myFunction1() {
var x = document.getElementById("myText1").value;
document.getElementById("demo1").innerHTML = x;
}
chrome.runtime.sendMessage({
'method': 'getInfo'
}, function(response) {
console.log(response);
});
});
So, as you can see, I'm trying to submit the text from myText1 and myText to place it where it is bolded in the content.js. I want the submitted text to remain running for as long as the function is still enabled. Also, for some reason, the place where I insert the text back onto the popup ( ) is not showing up. Is there any way to do these things?
