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]