манипулятор манипуляции с перекрестным контуром

Question

Я работаю над приложением, использующим фреймворк приложения для кроссинга, для создания расширений chrome/firefox/safari. Особенность заключается в том, что пользователь просматривает веб-сайт, на котором он может добавлять закладки на веб-сайт, на котором они находятся, и что есть функции, которые будут добавлены позже.

Для этого мне нужно сначала показать экран входа/регистрации пользователю, если пользователь еще не зарегистрирован в «всплывающем окне», которое открывается при нажатии кнопки. Если пользователь вошел в систему, мне нужно снова добавить URL-адрес вкладки в список пользователей через всплывающее окно. Аутентификация произойдет через удаленное приложение.

Я искал googled и читал кроссинг 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; 
     } 
    } 
    }); 
});