Я постараюсь пошагово объяснить, что я думаю, хороший способ сделать это. Это не значит, что это лучший способ, это просто рекомендуемый способ:)
История пользователя
Если я правильно понял вопрос, вы хотели бы показать всплывающее окно на веб-сайте. В зависимости от того, что пользователь выберет во всплывающем окне, DOM веб-сайтов будет изменен. Кроме того, вы хотите, чтобы всплывающее окно получало удаленные данные.
План
Из приведенных выше требований вы быстро обнаружите, что требуется следующее:
Используя механизмы передачи сообщений, вы сможете передавать данные между двумя разными мирами (контекстные меню и фоновая страница). Всякий раз, когда вы хотите вызвать удаленную службу, вы будете запрашивать это через обмен сообщениями. Ниже я объясню каждый шаг на этом пути.
Popup
Ваше всплывающее окно будет просто обычным элементом "div", который вы динамически создаете в JavaScript. Примерно так:
var overlayDOM= document.createElement('div');
... add your stuff to overlayDOM
document.body.appendChild(overlayDOM);
Или вы можете использовать iframe, чтобы сохранить стиль. Используя методы CSS, вы можете соответствующим образом оформить его, чтобы оно выглядело как всплывающее окно. Вы можете сделать это, используя абсолютное позиционирование или что-нибудь необычное в этом направлении.
Контекстное меню
Теперь есть два способа использования скриптов контента. Вопросы, которые вы должны задать себе, следующие:
- Собирается ли пользователь активировать это всплывающее окно из процесса браузера? Например, будет ли всплывающее окно отображаться программно из любого интерфейса расширения (контекстные меню, действия страницы, действия браузера, определенные события и т. Д.).
или
- Всплывающее окно всегда будет видно в DOM, вмешательство пользователя не требуется, чтобы сделать его видимым.
Если вы выберете первое, то вы можете использовать функциональность вкладок executeScript . Это довольно просто, все, что вам нужно сделать, это предоставить код или файл JavaScript, который вы хотите внедрить в DOM (веб-сайт). Например:
chrome.tabs.executeScript(tabId, {file: 'popup_overlay.js'});
Если вы планируете выбрать последний (всплывающее окно всегда отображается на странице). Вы можете ввести это значение popup_overlay.js на каждой странице, указав его в манифесте .
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["popup_overlay.js"]
}
],
Фоновая страница
Фоновая страница будет иметь разрешение для связи с удаленной базой данных. Первое, что вам нужно сделать, это предоставить правильные разрешения через manifest . Обязательно посмотрите Match Patterns , чтобы убедиться, что ваше разрешение максимально ограничено.
"permissions": [
"tabs",
"http://www.mywebsite.com/"
],
После настройки разрешений вы можете общаться с удаленной службой через XmlHttpRequests (XHR). Создайте свой API сервиса JavaScript, который использует XHR, не стесняйтесь использовать любой дизайн, какой пожелаете. Лично мне нравится использовать объекты JavaScript для организации своего кода. Ваша фоновая страница будет иметь доступ к созданному вами API-интерфейсу службы, который вы можете использовать на протяжении всего срока службы вашего расширения.
// Lives in the Background Page
var service = new RemoteService();
Передача сообщений
Как объяснено выше, Передача сообщений используется для обеспечения связи между сценарием содержимого и фоновой страницей. В вашем случае вы хотите, чтобы всплывающее окно получало некоторые данные с фоновой страницы (поскольку именно там находится ваш объект JS) и возвращало результаты обратно. Когда вы получите эти результаты и отобразите их на странице, поскольку вы уже находитесь в том же мире, что и DOM.
Сначала необходимо настроить фоновую страницу для приема запросов, вот как вы настраиваете прослушиватель запросов:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == 'GetUserList')
sendResponse({result: db.getGetUserList()});
else if (request.method == 'GetUser')
sendResponse({result: db.getGetUser(request.username)});
else
sendResponse({}); // snub them.
});
Вы можете сделать вышеупомянутое любителем, но для пояснения я следую документу Message Passing , который объясняет это прекрасно. Как вы видите выше, мы создаем прослушиватель для запросов на расширение. Вы обрабатываете запрос внутри слушателя. Как вы заметили, вы также можете отправить ответ. В приведенном выше случае мы отправляем обратно соответствующий результат для метода, который мы запрашиваем.
В вашем контент-скрипте вы легко можете отправить запрос на фоновую страницу:
// Retrieve the username called mohamedmansour. Continuation from above.
chrome.extension.sendRequest({method: 'GetUser', username: 'mohamedmansour'}, function(response) {
console.log(response.result);
});
В приведенном выше фрагменте кода мы отправляем запрос обратно на расширение из Content Script, чтобы получить пользовательские данные для "mohamedmansour". Затем результат выводится на консоль.
Как только вы разберетесь с Messaging, вы заметите, насколько просто отправлять сообщения JSON назад и четвертым.
Надеюсь, это поможет!