Chrome Extension -- Pass an array from popup.js into injected javascript file

Question

So close, yet so far...

---

I'm writing a chrome extension, in which a user adds/removes items in a list. This <ul> is then stripped of it's <li> elements, and these are joined and then thrown into a localStorage item as a delineated list. In a function this list is processed and an array is created.

I need to pass this array from a <script> running in popup.js to a content script, inject.js, which is injected into a https://twitter.com// page. As an aside, I have made all necessary manifest entries. I've read the chrome extension documentation, and many stack-overflow answers, yet I have not yet gotten a clear understanding of what I need to do in order to wrap the "array passing" logic into a function which simply makes the array available to inject.js.

Let's say that the array is created in popup.js something like this:

// inside popup.js
var list;

function getList() {
    lists["list"] = localStorage["myAwesomeList"].split("**%**");
    return lists;
}

function sendListToInjectJs() {
    list = getList();

    // some amzing code that makes my script available to inject.js  
}

As shown above, I'd like a function that, when called, sends the created array to inject.js where it is held in a variable for processing:

// in inject.js
var list = listPassedFromPopupJs;

// sweet list processing here

I really feel like this should be easier than I've found. It seems like i should be able to say to inject.js, "hey, here's an updated version of that array. Do something with it."

Thank you in advance for any insight in how to accomplish this!!! My extension will be complete once this bridge is gapped.

Answer 1

You can use sendMessage

To send array from your popup.js:

chrome.tabs.sendMessage(tabs[0].id, [1,2,3] + "");

To receive array in the inject.js:

chrome.runtime.onMessage.addListener(function(message) {
  console.log(message.split(","));
});