如何在 crossrider 扩展中添加书签？答案

【问题标题】：how to add bookmark in crossrider extension?如何在 crossrider 扩展中添加书签？
【发布时间】：2014-11-14 20:25:59
【问题描述】：

您好，我正在开发 crossrider 的扩展。我已经创建了一个按钮

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

并使用它为当前页面添加书签的操作在 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.');
        }
    });
});     

});

但它不起作用，所以请任何人告诉我正确的代码，我可以用它来为当前页面添加书签。我只在 mozilla 上测试过这段代码。

【问题讨论】：

标签： jquery bookmarks crossrider

【解决方案1】：

Crossrider 有一个专门用于通过 Crossrider 扩展管理书签的 API。要使用该插件，只需将其添加到扩展程序并在后台范围内，使用它提供的appAPI.bookmarks API。由于书签 API 仅在后台范围内可用，因此您在扩展范围内使用的按钮处理程序必须使用消息传递将书签数据传递到后台范围。

因此，使用您的示例，您的代码将如下所示：

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});
      });
    }
  });
});

[披露：我是 Crossrider 的员工]

【讨论】：

【解决方案2】：

感谢您的帖子和信息。由于在我的页面上已经有相当多的 Javascript，我不得不稍微调整你的脚本，以免干扰页面上的其他 JS。所以在这里我想把这段代码分享给其他人使用：

JS代码：

   <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 代码：

<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>

我有一个问题：

addPanel javascript 函数在旧版本的 Mozilla/FF 中不起作用吗？在我最近的浏览器版本 (v33) 中，它运行良好。

【讨论】：