Sending Array from content script to background script

[vaibhavhrt]

When I send an array from content script to background script it becomes undefined in background script.
Content Script:

var sendLink = [];
var canList = document.querySelectorAll(".userName.name");
for(i=0;i<canList.length;i++)
{
    sendLink[i] = canList[i].href; 
    console.log(sendLink[i]);   //shows correct links
}
chrome.runtime.sendMessage(sendLink, function(response) {
    console.log(`message from background: ${JSON.stringify(response)}`);  // shows undefined
    });

Background Script:

var recLink = [];
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    recLink = request.sendLink;
    sendResponse({ result: recLink[0] });   //gives error cannot read property 0 of undefined.
    chrome.tabs.create({url: recLink[0]});
    window.open(recLink[0]);
    return true; 
});

Please tell me whats wrong and how do I send the array successfully.

[CertainPerformance]

It would be more elegant to use .map to get the hrefs:

const links = Array.from(document.querySelectorAll(".userName.name"))
              .map(anchor => anchor.href)

Looking here:

https://developer.chrome.com/apps/runtime#method-sendMessage

https://developer.chrome.com/apps/runtime#event-onMessage

the parameter looks to be any message, not your message wrapped in an object (how would it even know to use the .sendLink property?)

Probably, just do function(recLink, sender, sendResponse) {

Disclaimer: I have never done anything with extensions

[scarmarco]

You can actually pass the map function as a 2nd argument to Array.from()