0

I am developing a browser extension using crossrider. I have added a context menu (background.js)

   var ContextData;
    appAPI.contextMenu.add("key1", "Send Data To Server", function (data) {
        var ContextData = 'pageUrl: ' + data.pageUrl + '\r\n' +
                         'linkUrl: ' + data.linkUrl + '\r\n' +
                         'selectedText:' + data.selectedText + '\r\n' +
                         'srcUrl:' + data.srcUrl;

    }, ["all"]);

On user click I want to send ContextData to extension.js. At extension.js some function will receive the data and send it to my server (A Rest API which will accept the data).

To send data to the server I have tested this and it works fine (code sample in extension.js)

appAPI.ready(function($) {

var dataToSend =="test data";

    appAPI.request.post({
        url: 'REST API URL',
        postData: dataToSend,
        onSuccess: function(response, additionalInfo) {
            var details = {};

            details.response = response;

        },
        onFailure: function(httpCode) {
        //  alert('POST:: Request failed. HTTP Code: ' + httpCode);
        }
    });
});

How can I write a function to accept ContextData from background.js and assign it to dataToSend in extension.js?

Aditya
  • 2,876
  • 4
  • 34
  • 30
Neel Kamal
  • 710
  • 2
  • 10
  • 27
  • See http://docs.crossrider.com/#!/api/appAPI.message – Rob W Dec 23 '13 at 10:43
  • yes I have read this link but there is no any method for communication between backgrond.js and extension.js. By mot of the methods we can send messages to current tabs or all tabs,etc. But that is not my requirement. – Neel Kamal Dec 23 '13 at 10:50

1 Answers1

5

@Neel If I understand your requirements correctly, @Rob is essentially correct though a little clarification may help

By design/architecture, the extension.js code runs on each HTML page i.e. a separate extension.js instance is run for each URL that loads. In contrast, the context menu runs at the browser level (not HTML page) and is hence correctly coded in background.js file. However, the background.js code does not have direct access to the extension.js instance code running on the HTML page in the active tab and must therefore communicate the data via messaging. (For more information about scopes, see Scopes Overview)

Obviously, a user clicks the context menu item on the active tab (i.e. the page showing the HTML page being viewed); hence, once the ContextData string is created, you can use appAPI.message.toActiveTab to send the string to the extension.js instance running on the page/tab where the the context menu item was clicked.

This being the case, using your code example you can achieve this goal as follows:

background.js:

appAPI.ready(function($) {
  var ContextData;
  appAPI.contextMenu.add("key1", "Send Data To Server", function (data) {
    var ContextData = 'pageUrl: ' + data.pageUrl + '\r\n' +
      'linkUrl: ' + data.linkUrl + '\r\n' +
      'selectedText:' + data.selectedText + '\r\n' +
      'srcUrl:' + data.srcUrl;
    appAPI.message.toActiveTab({type:'dataToSend', data: ContextData});
  }, ["all"]);
});

extension.js:

appAPI.ready(function($) {
  var dataToSend =="test data";

  appAPI.message.addListener(function(msg) {
    if (msg.type === 'dataToSend') {
      appAPI.request.post({
        url: 'REST API URL',
        postData: dataToSend,
        onSuccess: function(response, additionalInfo) {
            var details = {};
            details.response = response;
        },
        onFailure: function(httpCode) {
          //  alert('POST:: Request failed. HTTP Code: ' + httpCode);
        }
      });   
    }
  });
});

[Disclaimer: I am a Crossrider employee]

Shlomo
  • 3,763
  • 11
  • 16
  • Thanks for the answer. I was missing the point that extension.js code runs on each HTML page i.e. a separate extension.js instance is run for each URL that loads. Thanks for clearification :) – Neel Kamal Dec 23 '13 at 13:20
  • Pleasure. BTW, unless you have a specific need to send the data to the extension.js scope, you can actually just post the data directly from the background.js scope ;-) – Shlomo Dec 23 '13 at 14:28
  • This is great! I think it should be included in the demo linked from the [docs](http://docs.crossrider.com/#!/api/appAPI.contextMenu). – jozxyqk Apr 03 '14 at 11:50