Question

我正在使用crossrider应用程序框架创建一个应用程序来创建chrome / firefox / safari扩展。该功能是当用户上网时，他/她可以将他们所在的网站加入书签，这样就可以在以后添加功能。

对于同样的情况，我需要首先向用户显示登录/注册屏幕，如果用户尚未登录按钮单击时打开的“弹出窗口”。如果用户已登录，我需要再次通过弹出窗口将标签网址添加到用户列表中。身份验证将通过远程应用程序进行。

我用谷歌搜索并阅读了交叉驾驶员api以找到一种操纵DOM元素的方法，在“弹出窗口”内部加载图像无法找到方法。我不太确定如何去做。任何帮助是极大的赞赏。

我是否也应该考虑更改框架？在那种情况下，建议是什么？

如果以上是抽象的话，我很乐意提供更多细节。

Answer 1

感谢您的询问。你有几个方面的问题，我会尝试以一般的方式回答每个问题。

登录：在appAPI.browserAction.onClick回调中，在保存书签之前，如果用户未登录，您当然可以添加代码以显示登录弹出窗口。您可以使用向用户显示的表单来实现此目的以下几种方式之一，例如使用我们的侧边栏插件或jQUeryUI。
标签网址：由于我假设您使用扩展程序按钮来触发书签保存，因此您需要在后台范围内定义按钮回调的网址。实现此目的的最简单方法是使用appAPI.tabs.onTabSelectionChanged方法跟踪活动标签，例如：

background.js ：

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

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

因此，将两个想法放在一起，您的代码可能类似于：

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弹出内容操作

1 个答案: