Transfer list of objects to a new page

Add-ons Development
#1

Hi folks,

I’m developing an extension. I have a popup and a details-page. I would like to send an object (list of objects) to the new details-page after an user click on a button in the popup of the extension.

Now I have this in the manifest:

...
"permissions": [
  "*://*/*",
  "storage",
  "unlimitedStorage",
  "tabs",
  "webNavigation"
],
"content_scripts": [{
  "matches": ["<all_urls>"],
  "js": ["pages/details/details.js"]
}],
...

To send the data I have this in the popup.js:

browser.tabs.executeScript({file: "/pages/details/details.js"}).then(function() {
    browser.tabs.create({
        url: '/pages/details/details.html'
    }, function(tab){
        browser.tabs.sendMessage(tab.id, {data: listOfObjects});
    });
    runAt: 'document_end'
});

And the receiver (details.js) have this:

function handleMessage(request) {
    console.log(request.data);
};
browser.runtime.onMessage.addListener((message) => {
    handleMessage(message);
});

After I clicked the button in the popup of the extension, I got this error message:

Error: Could not establish connection. Receiving end does not exist.

Does anyone know what my mistake is? Thanks a lot :slight_smile:

#2

A couple of things:

You seem to be executing the script before making a tab? I assume the details.html directly includes the tag to details.js? If so, you don’t need executeScript at all. Extension page scripts have the same privileges as the background page.

If you do need the executeScript, you want to run if after tabs.create (chain the promises) and then send the message at the very end.

However the most reliable way to do this is to have the details.js script ask for the list of objects it’s due.