Sending data from popup to extension.js not working

Question

I am working on a browser extension using crossrider. I need to send some data from popup to extension.js

My code of popup

Answer 1

In this code sample, the activeTabUrl variable is only set once a response is received from the extension.js file since the messaging is asynchronous by design. Hence, when calling alert(activeTabUrl); in the code, the message has not yet been received back fro the extension.js code thus the value is still null as it was initialized.

To use the activeTabUrl variable you must wait for the mesage from the extension.js file, and hence you should place the code using the variable in the callback of the message listener, preferably as a function. Also note that using an alert in the popup code causes the popup to close and should hence not be used in the popup scope.

I tested the following popup code, which does away with the variable to avoid confusion and passes the active tab URL as a parameter to the function called in the message listener, and it worked as expected:

function crossriderMain($) {
  // Message listener for response from active tab
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url') ShowPageUrl(msg.url);
  });

  function ShowPageUrl(url) {
    $('#page-url').html('<b>Page URL</b>: ' + url);
  }

  // Request URL from active tab
  appAPI.message.toActiveTab({type: 'active-tab-url'});

    //alert(activeTabUrl);
  // THE REST OF YOUR CODE
}

[Disclaimer: I am a Crossrider employee]