1

crossrider アプリケーション フレームワークを使用して、chrome/firefox/safari 拡張機能を作成するアプリケーションに取り組んでいます。この機能は、ユーザーがサーフィンしているときに、自分がアクセスしている Web サイトをブックマークできるというもので、後で追加される機能があります。

同じために、ユーザーがボタンのクリックで開く「ポップアップ」にまだログインしていない場合は、最初にログイン/サインアップ画面をユーザーに表示する必要があります。ユーザーがログインしている場合は、ポップアップを使用してタブの URL をユーザー リストに追加する必要があります。認証は、リモート アプリケーションを介して行われます。

crossrider api をググって読んで DOM 要素を操作する方法を見つけましたが、「ポップアップ」内に画像をロードする方法が見つかりませんでした。どうすればいいのかよくわかりません。どんな助けでも大歓迎です。

フレームワークの変更も検討する必要がありますか？その場合、何が推奨されますか？

上記が抽象的なものである場合は、詳細を提供していただければ幸いです。

4

1 に答える 1

3

お問い合わせいただきありがとうございます。質問にはいくつかの側面があり、それぞれに一般的な方法で答えようとします。

  1. ログイン: appAPI.browserAction.onClickコールバックで、ブックマークを保存する前に、ユーザーがログインしていない場合にログイン ポップアップを表示するコードを追加できます。サイドバー プラグインまたは jQUEryUI を使用するように。

  2. タブの 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;
      }
    }
  });
});
于 2013-06-16T08:10:06.007 に答える