crossrider popup content manipulation

Question

I am working on an application using the crossrider application framework to create chrome/firefox/safari extensions. The feature is when a user is surfing he/she can bookmark the website they are on once that is done there are features to be added later.

For the same I need to first show the login/signup screen to the user if the user is not already logged in a "popup" that opens on a button click. If the user is logged in I need to add the tab url to the users list through the popup again. The authentication would happen through a remote application.

I googled and read the crossrider api to find a way to manipulate the DOM elements, load images inside of the "popup" could not find a way to do it. I am not too too sure how to go about doing it. Any help is greatly appreciated.

Should I also consider changing the framework too? In that case what would be the recommendation?

I would be happy be provide more details if the above is to abstract.

score 3 · Answer 1 · answered Jun 16 '13 at 08:10

Thank you for your enquiry. There are several aspects to you questions and I'll try to answer each in a general way.

Login: In the appAPI.browserAction.onClick callback, before saving the bookmark, you can certainly add code to display a login popup if the user is not logged in. You can achieve this using forms displayed to the user in one of several ways such as using our sidebar plugin, or jQUeryUI.
Tab Url: Since I'm assuming you are using the extension button to trigger the bookmark save, you will require the URL in the background scope where the button callback is defined. The easiest way to achieve this is to keep track of the active tab using the appAPI.tabs.onTabSelectionChanged method, for example:

background.js:

appAPI.ready(function() {
var activeTab = null;

  appAPI.tabs.onTabSelectionChanged(function(tabInfo) {
    activeTab = tabInfo.tabUrl;
  });
});

So putting both ideas together, you code might look something like:

background.js:

appAPI.ready(function() {
  var activeTabURL = null;

  // Keep track of activeTabs URL
  appAPI.tabs.onTabSelectionChanged(function(tabInfo) {
    activeTabURL = tabInfo.tabUrl;
  });

  // Configure button
  appAPI.browserAction.setResourceIcon('icon.png');
  appAPI.browserAction.onClick(function() {
    // Code to check if user is logged in
    if (!userLoggedIn) {
      // Send message to extension scope to display login form
      appAPI.message.toActiveTab({action:'userLogin', bookmarkURL: activeTabURL});
      return;
    }
    // User already logged in, save activeTab's URL
    saveBookmark(activeTabURL);
  });

  // Listen for message that user has logged in and save bookmarkURL
  appAPI.message.addListener(function(msg) {
    if (msg.action === 'saveBookmark') saveBookmark(msg.bookmarkURL);
  });

  // Common function to save bookmark URL
  function saveBookmark(bookmarkURL) {
    // Your bookmark save function
  }
});

extension.js:

appAPI.ready(function($) {
  appAPI.message.addListener(function($) {
    if (msg.action === 'userLogin') {
      // your code for user login
      ...
      // Once user logged in send message to background to save bookmarkURL
      if (userLoggedIn) {
        appAPI.message,toBackground({action:'saveBookmark', boomarkURL:msg.bookmarkURL});
        return;
      }
    }
  });
});

crossrider popup content manipulation

1 Answers1