how to add bookmark in crossrider extension?

Question

Hello i am developing extension on crossrider. i've created a button this

'<button id="xr-bookmark" title="Bookmark button" class="middle"><a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a></button>'

and using it action to bookmark the current page is in extension.js

$('#xr-crossrider-example #xr-bookmark')
    .click(function () {


$(function() {
    $("#bookmarkme").click(function() {
        // Mozilla Firefox Bookmark
        if ('sidebar' in window && 'addPanel' in window.sidebar) { 
            window.sidebar.addPanel(location.href,document.title,"");
        } else if( /*@cc_on!@*/false) { // IE Favorite
            window.external.AddFavorite(location.href,document.title); 
        } else { // webkit - safari/chrome
            alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
        }
    });
});     

});

but it's not working so please anybody tell me right code which i can use to bookmark the current page. and i've tested this code on mozilla only.

Answer 1

Crossrider has an API specifically for managing bookmarks via a Crossrider extension. To use the plugin, simply add it to the extension and in the background scope, use the appAPI.bookmarks API that it provides. Since the bookmark API is only available in the background scope, the button handler you are using in the extension scope must pass the bookmark data to the background scope using messaging.

So, using your example, your code would look something like:

extension.js:

appAPI.ready(function($) {
  // Add button handler
  $('#xr-crossrider-example #xr-bookmark')
    .click(function () {
      // Send message to background scope with bookmark data
      appAPI.message.toBackground({
        action: 'add-bookmark',
        href: location.href,
        title: document.title
      });
    });
});

background.js:

appAPI.ready(function($) {
  // Handler to receive messages
  appAPI.message.addListener(function(msg) {
    if (msg.action === 'add-bookmark') {
      // Get the bookmarks root node
      appAPI.bookmarks.getDefaultFolder(function(node) {
        // Add the new bookmark to the root node
        appAPI.bookmarks.create({
          title: msg.title,
          url: msg.href,
          parentFolder: node});
      });
    }
  });
});

[Disclosure: I am a Crossrider employee]

Answer 2

Thanks for the post and the information. Since on my page there is already quite a bit of Javascript, I had to adapt your script a little to not interfere with other JS on the page. So here I would like to share this code for others to use:

JS Code:

   <script type="text/javascript">
      function addBookmark() {
          $('#bookmarkme').click(function() {
              if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
                  window.sidebar.addPanel(document.title,window.location.href,'');
              } else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
                  window.external.AddFavorite(location.href,document.title);
              } else if(window.opera && window.print) { // Opera Hotlist
                  this.title=document.title;
                  return true;
              } else { // webkit - safari/chrome
                  alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
              }
          }
      });
   </script>

HTML Code:

<a href=#" onclick="addBookmark();return false;" id="bookmarkme" rel="sidebar" title="Papierloses Arbeiten - BPM Infoseite">Lesezeichen-Bookmark dieser Seite zu Ihrem Browser hinzuf&uuml;gen</a>

One question I have though:

Did the addPanel javascript function not work in older versions of Mozilla/FF? In my recent browser version (v33) it works fine.