How to call a javascript function declared in Crossrider "background.js" by clicking a button from my website page?

StackOverflow https://stackoverflow.com/questions/20581959

Question

How to call a javascript function declared in Crossrider "background.js" by clicking a button from my website page?

I have a button input in my website page "http://www.mysite.com/default.aspx". I also have defined a function "myExtensionFunction" in Crossrider [a cross-browser extension framework] "background.js" scope that accepts a javascript object / JSON as parameter. Is it possible to pass a javascript object / JSON as parameter and call this function by clicking on the button in my website page and vice versa? If so, how? If not, why?

I know from this tutorial below, "how to pass the value of a page variable to the extension scope?", but could not solve the above problem. http://docs.crossrider.com/#!/guide/howto_get_page_variable

I tried the code below, but gave me the alert 'function does not exist!', as expected, as it could not find the function defined in the Crossrider browser extension [extension.js file]

Javascript file:
---------------

var lxnsT = [];
lxnsT.push({ "u_n": "MegaSearches", "u_a": "URL" });

function myExtFn() {
    if (typeof jsOpenSession == 'function') {
        myExtensionFunction(lxnsT);
    } else {
        alert('function does not exist!');
    }
}

HTML file:
---------------
<button id="myExtFnId" onclick="myExtFn()"> My Button </button>
Was it helpful?

Solution

If I understand your requirements correctly, you can achieve your goal by using your extension.js file as a conduit between your page and the background scope. You have to do this because the background scope does not have direct access to the HTML page scope.

To implement the scenario, add the CrossriderAPI library to your page using it to show the button when the extension is available and configure the button's click handler to send the object to the extension scope, as follows:

HTML file:

<html>
<head>
<style>.hidden {display: none;}</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://w9u6a2p6.ssl.hwcdn.net/plugins/javascripts/crossriderAPI.js"></script>
<script type="text/javascript">
  // Replace XXXXX with the extension id
  var extId = "XXXXX";

  // Once the page is ready
  $(function() {
    CrossriderAPI.isAppInstalled(extId, function(isInstalled) {
      // Displays button if the extension is installed and set click handler
      console.log('Page:: Extension installed? ' + isInstalled);
      if (isInstalled) {
        console.log('Page:: Showing button and adding click');
        $("#myExtFnId").toggleClass("hidden").click(function() {
          $('body').fireExtensionEvent('execBgFunc', {fn:'myBgFn', data:'my data'});
        });
      }
    });
  });
</script>
</head>
<body>
<button id="myExtFnId" class="hidden">My Button</button>
</body>
</html>

In your extension.js file, bind an event handler to receive the object from the page and then send it via messaging to the background scope, as follows:

extension.js file:

appAPI.ready(function($) {
  $('body').bindExtensionEvent('execBgFunc',
    function(e, data) {
      console.log('Extn:: Bind Received: ' + appAPI.JSON.stringify(data));
      appAPI.message.toBackground(data);
  });
});

Finally, in the background.js file, use a message listener to receive the data and execute the required function, as follows:

background.js file:

appAPI.ready(function($) {
  appAPI.message.addListener(function(msg) {
    if (msg.fn === 'myBgFn')
      console.log('Bg:: Received data: ' + appAPI.JSON.stringify(msg.data));
  });
});

[Disclaimer: I am a Crossrider employee]

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top