crossrider 弹出内容操作

Question

我正在开发一个使用 crossrider 应用程序框架来创建 chrome/firefox/safari 扩展的应用程序。该功能是当用户上网时，他/她可以在完成后为他们所在的网站添加书签，稍后会添加一些功能。

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

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

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

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

Answer 1

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

1. 登录：在appAPI.browserAction.onClick回调中，在保存书签之前，如果用户未登录，您当然可以添加代码以显示登录弹出窗口。您可以使用向用户显示的表单来实现这一点使用我们的侧边栏插件或 jQUEryUI 等多种方式。

2. Tab Url：由于我假设您使用扩展按钮来触发书签保存，因此您需要在定义按钮回调的后台范围内使用 URL。实现这一点的最简单方法是使用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;
      }
    }
  });
});