kkmoslehpour kkmoslehpour - 18 days ago 7
HTML Question

Communicate data from popup to content script injected by popup with executeScript()

I have a text area and a button in my Chrome extension popup. I want users to input desired text in the text area. Then, once they click the button, it will inject a content script to change the text of the fields on the current page that have

<textarea class="comments">
to the text that user entered in the
<textarea>
in the Chrome extension popup.

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

This is what I have currently:

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's desired text
}

Answer

There are three general ways to do this:

  1. Use chrome.storage.local to pass the data (set prior to injecting your script).
  2. Inject code prior to your script which sets a variable with the data (see detailed discussion for possible security issue).
  3. Use message passing to pass the data after your script is injected.

Use chrome.storage.local (set prior to executing your script)

Using this method maintains the execution paradigm you are using of injecting a script that performs a function and then exits. It also does not have the potential security issue of using a dynamic value to build executing code, which is done in the second option below.

From your popup script:

  1. Store the data using chrome.storage.local.set()
  2. In the callback for chrome.storage.local.set(), call tabs.executeScript()
var updateTextTo = document.getElementById('comments').value;
chrome.storage.local.set({
    updateTextTo: updateTextTo
}, function () {
    chrome.tabs.executeScript({
        file: "content_script3.js"
    });
});

From your content script:

  1. Read the data from chrome.storage.local.get()
  2. Make the changes to the DOM
  3. Invalidate the data in storage.local (e.g. remove the key: chrome.storage.local.remove()).
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;
        });
    }
}

See: Notes 1 & 2.

Inject code prior to your script to set a variable

Prior to executing your script, you can inject some code that sets a variable in the content script context which your primary script can then use:

Security issue:
The following uses JSON.stringify() to encode the data prior to putting it in the string which is used to store the variable for the content script. It then uses JSON.parse() to return the data to a string in your content script. While this encoding is not strictly required, it is a good idea as you don't know the content of the value which you are going to send to the content script. This value could easily be something that would corrupt the code you are injecting (i.e. The user may be using ' and/or " in the text they entered). If you do not, in some way, escape the value, there is a security hole which could result in arbitrary code being executed.

From your popup script:

  1. Inject a simple piece of code that sets a variable to contain the data.
  2. In the callback for chrome.tabs.executeScript(), call tabs.executeScript() to inject your script (Note: tabs.executeScript() will execute scripts in the order in which you call tabs.executeScript(), so waiting for the callback of the small code is not strictly required).
var updateTextTo = document.getElementById('comments').value;
chrome.tabs.executeScript({
    code: 'var updateTextToJSON = ' + JSON.stringify(updateTextTo) + ';'
}, function () {
    chrome.tabs.executeScript({
        file: "content_script3.js"
    });
});

From your content script:

  1. Convert the JSON back to the data you desire.
  2. Make the changes to the DOM
newText = JSON.parse(updateTextToJSON);
if (typeof newText === 'string') {
    Array.from(document.querySelectorAll('textarea.comments')).forEach(el => {
        el.value = newText;
    });
}

See: Notes 1, 2, & 3.

Use message passing (send data after content script is injected)

This requires your content script code to install a listener for a message sent by the popup, or perhaps the background script (if the interaction with the UI causes the popup to close). It is a bit more complex.

From your popup script:

  1. Determine the active tab using tabs.query().
  2. Call tabs.executeScript()
  3. In the callback for tabs.executeScript(), use tabs.sendMessage() (which requires knowing the tabId), to send the data as a message.
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
        });
    });
});

From your content script:

  1. Add a listener using chrome.runtime.onMessage.addListener()
  2. Exit your primary code, leaving the listener active. You could return a success indicator, if you choose.
  3. Upon receiving a message with the data:
    1. Make the changes to the DOM
    2. Remove your runtime.onMessage listener

#3.2 is optional. You could keep your code active waiting for another message, but that would change the paradigm you are using to one where you load your code and it stays resident waiting for messages to initiate actions.

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
}

See: Notes 1 & 2.


Note 1: Using Array.from() is fine if you are not doing it many times (and are using a version of Chrome which has it >= version 45). In Chrome, Array.from() is slow compared to other methods of getting an array from a NodeList. For a faster, more compatible conversion to an Array, you could use the asArray() code in this answer. The second version of asArray() provided in that answer is also more robust.

Note 2: If you are willing to limit your code to Chrome version >= 51, Chrome has a forEach() method for NodeLists as of v51. Thus, you don't need to convert to an array. Obviously, you don't need to convert to an Array if you use a different type of loop.

Note 3: While I have previously used this method (injecting a script with the variable value) in my own code, I was reminded that I should have included it here when reading this answer.