All geek questions in one place

Communicating data from a popup window to a content script entered by popup using executeScript ()

I have a text area and a button in a Chrome extension popup. I want users to enter the desired text in the text area. Then, by clicking on the button, he will add the contents of the script to change the text of the fields of the current page with the <textarea class="comments">text entered by the user in <textarea>the pop-up window of the Chrome extension.

My question is: how can I get text from <textarea>in my popup.html and pass it from popup.js to the content script?

This is what I have:

popup.html:

<!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity3">N/A</button> 
    <textarea rows="4" cols="10" id="comments" placeholder="N/A Reason..."></textarea>
    <script src="popup.js"></script> 
</body>
</html>

popup.js:

function injectTheScript3() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script3.js"});
    });
}

document.getElementById('clickactivity3').addEventListener('click', injectTheScript3);

content_script3:

//returns a node list which is good
var objSelectComments = document.querySelectorAll('.comments'); 

//desired user input how?
function setCommentsValue(objSelectComments,){

    //This will be for loop to iterate among all the text fields on the page, and apply
    //  the text to each instance. 
    for (var i=0; i<objSelectComments.length; i++) {
        objSelectComments[i]= //user desired text 
    }
+4
1

:

chrome.storage.local ( script)

, , , script, , . , .

script:

var updateTextTo = document.getElementById('comments').value;
chrome.storage.local.set({
    updateTextTo: updateTextTo
}, function () {
    chrome.tabs.executeScript({
        file: "content_script3.js"
    });
});

script:

chrome.storage.local.get('updateTextTo', function (items) {
    assignTextToTextareas(items.updateTextTo);
    chrome.storage.local.remove('updateTextTo');
});
function assignTextToTextareas(newText){
    if (typeof newText === 'string') {
        Array.from(document.querySelectorAll('textarea.comments')).forEach(el => {
            el.value = newText;
        });
    }
}

. 1 2.

script,

script , script, script:

:
"'" + JSON.stringify().replace(/\\/g,'\\\\').replace(/'/g,"\\'") + "'" , JSON , code . .replace() A) , , B) ', . JSON.parse(), script. , , , script. , (.. ' / " , ). , - , , .

script:

var updateTextTo = document.getElementById('comments').value;
chrome.tabs.executeScript({
    code: "var newText = JSON.parse('"
          + JSON.stringify(updateTextTo).replace(/\\/g,'\\\\').replace(/'/g,"\\'") + "';"
}, function () {
    chrome.tabs.executeScript({
        file: "content_script3.js"
    });
});

script:

  • DOM, ,
if (typeof newText === 'string') {
    Array.from(document.querySelectorAll('textarea.comments')).forEach(el => {
        el.value = newText;
    });
}

. 1, 2 3.

(MDN) ( script)

, script , , , , script ( ). .

script:

var updateTextTo = document.getElementById('comments').value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id, {
        file: "content_script3.js"
    }, function(){
        chrome.tabs.sendMessage(tabs[0].id,{
            updateTextTo: updateTextTo
        });
    });
});

script:

# 3.2 . , , , , , , , .

chrome.runtime.onMessage.addListener(assignTextToTextareas);
function assignTextToTextareas(message){
    newText = message.updateTextTo;
    if (typeof newText === 'string') {
        Array.from(document.querySelectorAll('textarea.comments')).forEach(el => {
            el.value = newText;
        });
    }
    chrome.runtime.onMessage.removeListener(assignTextToTextareas);  //optional
}

. 1 2.

1: Array.from() , , (Chrome >= 45, Firefox >= 32). Chrome Firefox Array.from() NodeList. Array asArray() . asArray(), , .

2: Chrome >= 51 Firefox >= 50, Chrome forEach() NodeLists v51. , . , , .

3: ( script ) , , .

+7

Source: https://habr.com/ru/post/1661010/

More articles:


All Articles