Установите связь между сценарием контента и фоновой страницей.

Разработка расширения для Chrome с использованием javascript — один из моих университетских проектов.

Я не знаю, как установить связь между сценарием контента и фоновой страницей с помощью обмена сообщениями. Мне нужна помощь в установлении соединения

background.html

chrome.tabs.getSelected(null, function(tab) { 
    chrome.tabs.sendRequest(tab.id, {method: "getHTML"}, function(response) { 
        console.log(response.data); 
    }); 
}); 

content_script.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if (request.method == "getHTML") 
        sendResponse({data: document.getElementById('header').innerHTML}); 
    else sendResponse({}); 
});

person user782400    schedule 03.06.2011    source источник


Ответы (1)


Несколько основных вопросов:

  1. Вы зависите от какого-то элемента на странице с идентификатором header. Такие идентификаторы находятся на усмотрении дизайнера сайта, поэтому на самом деле они есть у очень немногих страниц (включая Google). Может быть, выберите что-то более универсальное, например заголовок страницы (document.title).
  2. Что означает "кнопка расширения"? Если это означает действие браузера, это часть вашего расширения, поэтому вы правы, что хотите отправить что-то из фонового скрипта. Это также более простой случай, так как вполне вероятно, что (помимо вышеописанной проблемы отсутствия страниц Google с элементом ID header) вы просто не захватываете событие клика в браузере. Однако, если это какая-то вставленная кнопка, все наоборот.

Что вы хотите (версия действия в браузере)

background.html (встроенный):

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, { method: "getHTML"}, function(response) {
      console.log(response.data);
    });
  });
});

content_script.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method === "getHTML") {
    sendResponse({data: document.title});
  } else {
    sendResponse({});
  }
});

Что вам может понадобиться (версия с внедренным нажатием кнопки)

фон.html:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method === "getHTML") {
    console.log(request.data);
  }
});

content_script.js:

function buttonClick() {
  chrome.extension.sendRequest({method: "getHTML", data: document.title});
}

Код ответа на комментарий ниже

Очень важная рекомендация: справочник разработчика Chrome, вероятно, один из самых дружелюбных там. Если вы хотите узнать, какие части chrome.* API доступны, начните с этого.

function getHtml(tabId) {
  chrome.tabs.sendRequest(tabId, { method: "getHTML"}, function(response) {
    console.log(response.data);
  });
}

// Note that this will only work once a tab has loaded
chrome.tabs.onSelectionChanged.addListener(function(tabId) {
  getHtml(tabId);
});

// This fires the first time a page is loaded
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
  if (changeInfo.status === "complete") {
    getHtml(tabId);
  }
});

Код для второго ответа на комментарий ниже

фон.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method === "getHTML") {
    console.log(request.data);
  }
});

content_script.js

document.addEventListener("keypress", function(e) {
  chrome.extension.sendRequest({method: "getHTML", data: e.which});
});
person brymck    schedule 03.06.2011
comment
Большое спасибо за исправленный код и отформатированную версию. Я новичок в этом и не изучил все форматирование. Я действительно извиняюсь за читабельность кода. Однако вернемся к вашему коду. Я протестировал код, и он работает на удивление хорошо, но он работает, только если я обновляю страницу на каждой вкладке. Можно ли заставить его работать, если я просто нажму на вкладку, и вместо перезагрузки страницы отобразится заголовок? - person user782400; 03.06.2011
comment
Я бы предпочел последнюю версию. Большое спасибо с этим. Итак, если я хочу что-то еще из вкладки; например, если мне нужны нажатия клавиш или что-то в этом роде с каждой вкладки, как это будет выглядеть (мне нужно создать прослушиватель нажатия клавиш)? Я знаю, что это очень прямой вопрос, но я действительно хочу узнать, как этот обмен сообщениями работает с различными вариантами. - person user782400; 03.06.2011
comment
Я ответил на ваш первый комментарий с некоторым кодом. Вы просто замените часть background.html версии действия браузера. Что касается части нажатия клавиш, да, вы должны сделать что-то вроде document.addEventListener("keypress", function(e) { chrome.extension.sendRequest(...) }); в сценарии содержимого (версия с внедренной кнопкой). Не забудьте подумать о том, кто говорит, а кто слушает: сценарий содержимого должен быть говорящим/запрашивающим, если это взаимодействие с самой страницей, и фоновым сценарием, если это какой-то закулисный процесс в вашем расширении. - person brymck; 03.06.2011
comment
я сделал это, но теперь, похоже, возникла какая-то проблема, так как снова ничего не отображается? Должен ли я отправить вам код по электронной почте, потому что, если я опубликую его здесь, он может снова стать грязным? - person user782400; 03.06.2011
comment
Нет, просто посмотрите мой ответ выше. Зафиксировать нажатие клавиши довольно просто. - person brymck; 03.06.2011
comment
Я получаю сообщение об ошибке: Ресурс интерпретируется как изображение, но передается с типом MIME text/html. вместо настоящих ключей. И я также пробовал e.keyCode, но это просто выдавало ошибку. - person user782400; 03.06.2011
comment
а также почему он работает только в stackoverflow, а не в google, yahoo? - person user782400; 03.06.2011
comment
У меня вроде нормально работает на пару страниц. Возможно, вы захотите попробовать перезагрузить эти страницы после перезагрузки расширения. И метод захвата нажатий клавиш правильный. Нажмите здесь для примера. Сообщение об ошибке, интерпретируемое ресурсом, связано с самой веб-страницей, а не с вашим скриптом (это означает, что их заголовки HTTP испорчены, поэтому Chrome исправляет их ошибку). - person brymck; 03.06.2011
comment
Большое спасибо за всю эту информацию. Это очень ценится. :) Да, это работает. Кроме того, последний вопрос: есть ли что-то для обнаружения стрелок, возврата и т. Д.? - person user782400; 03.06.2011
comment
Да, keydown или keyup (нажмите здесь, чтобы увидеть пример использования нажатия клавиши). Технически keypress не упоминается ни в каких спецификациях, поэтому Chrome (и, я думаю, IE) не очень заботится о его реализации. Я считаю, что Firefox поддерживает. - person brymck; 03.06.2011
comment
оо...так вот как это работает. Меня всегда путали между keydown и keyup. Чтобы получить URL-адрес вкладки; мне нужно написать еще один файл .js? - person user782400; 03.06.2011
comment
Вы можете использовать часть исходного кода выше или просто добавить console.log(sender.tab.url) в файл background.html (т. е. до или после другой строки console.log). Опять же, я бы рекомендовал проверить документацию Google. Он сообщает вам, что chrome.extension.onRequest.addListener получает объект, объект MessageSender, а затем обратный вызов. Этот MessageSender содержит объект Tab, который сам содержит набор свойств вкладки, таких как его идентификатор, заголовок, URL-адрес, значок значка, статус и т. д. - person brymck; 03.06.2011