Блог

Разработка расширения 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({}); 
});
  

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

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

То, что вы хотите (версия для браузера)

фон.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({});
  }
});
  

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

background.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);
  }
});
  

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

background.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});
});