Как получить данные с фоновой страницы в скрипт контента в расширениях Google Chrome

Question

Я пытался отправить данные со своей фоновой страницы в скрипт контента в моем расширении chrome. я не могу заставить его работать. Я прочитал несколько постов в Интернете, но они не совсем понятны и кажутся довольно высоким уровнем. Мне удалось заставить работать oauth, используя пример контактов Oauth на примерах Chrome. Аутентификация работает, я могу получить данные и отобразить их на HTML-странице, открыв новую вкладку.

Я хочу отправить эти данные в скрипт контента.

У меня много проблем с этим, и я был бы очень признателен, если бы кто-то смог наметить четкие шаги, которые вы должны выполнить, чтобы отправить данные со страницы bg в скрипт контента или даже лучше какой-нибудь код. Любой берущий?

код для моей фоновой страницы ниже (я исключил параметры oauth и другие)

` function onContacts(text, xhr) {
    contacts = [];
    var data = JSON.parse(text);
    var realdata = data.contacts;
    for (var i = 0, person; person = realdata.person[i]; i++) {
      var contact = {
        'name' : person['name'],
        'emails' : person['email']
      };


      contacts.push(contact); //this array "contacts" is read by the 
 contacts.html page when opened in a new tab

    }

    chrome.tabs.create({ 'url' : 'contacts.html'}); sending data to new tab
    //chrome.tabs.executeScript(null,{file: "contentscript.js"});
    may be this may work?

  };

  function getContacts() {
    oauth.authorize(function() {
      console.log("on authorize");
      setIcon();
      var url = "http://mydataurl/";
      oauth.sendSignedRequest(url, onContacts);

    });
  };

  chrome.browserAction.onClicked.addListener(getContacts);`

Поскольку я не совсем уверен, как получить данные в скрипт контента, я не буду беспокоиться о публикации нескольких версий моих неудачных скриптов контента. если бы я мог просто получить пример того, как запросить массив "contacts" из моего скрипта контента и как отправить данные со страницы bg, это было бы здорово!

Answer 1

У вас есть два варианта получения данных в скрипт контента:

1. Использование Tab API: http://code.google.com/chrome/extensions/tabs.html#method-executeScript
2. Использование обмена сообщениями: http://code.google.com/chrome/extensions/messaging.html

Использование Tab API

Обычно я использую этот подход, когда мое расширение будет время от времени использоваться, например, , устанавливая изображение в качестве обоев рабочего стола . Люди не устанавливают обои каждую секунду или каждую минуту. Они обычно делают это один раз в неделю или даже день. Поэтому я просто внедряю контент-скрипт на эту страницу. Это довольно легко сделать, вы можете сделать это либо по файлу, либо по коду, как описано в документации:

chrome.tabs.executeScript(tab.id, {file: 'inject_this.js'}, function() {
  console.log('Successfully injected script into the page');
});

Использование обмена сообщениями

Если вам постоянно нужна информация с ваших сайтов, было бы лучше использовать обмен сообщениями. Существует два типа сообщений: долгоживущие и одиночные запросы. Ваш скрипт контента (который вы определили в манифесте ) может прослушивать запросы на расширение:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == 'ping')
    sendResponse({ data: 'pong' });
  else 
    sendResponse({});
});

А ваша фоновая страница может отправить сообщение этому скрипту содержимого через обмен сообщениями. Как показано ниже, он получит текущую выбранную вкладку и отправит запрос на эту страницу.

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

Зависит от вашего расширения, какой метод использовать. Я использовал оба. Для расширения, которое будет использоваться, как каждую секунду, каждый раз я использую Messaging (Long-Lived). Для расширения, которое не будет использоваться каждый раз, тогда вам не нужен скрипт контента на каждой отдельной странице, вы можете просто использовать executeScript Tab API, потому что он просто внедрит скрипт контента в любое время.

Надеюсь, это поможет! Выполните поиск в Stackoverflow, есть много ответов на скрипты контента и фоновые страницы.

Answer 2

Я думал, что обновлю этот ответ для нынешних и будущих читателей.

В соответствии с Chrome API , chrome.extension.onRequest является "[d] устаревшим с Chrome 33. Пожалуйста, используйте runtime.onMessage."

См. это руководство из Chrome API для примеров кода по API обмена сообщениями.

Кроме того, существуют аналогичные (более новые) сообщения SO, такие как эта , которые более актуальны на данный момент.

Answer 3

Следуя указаниям Мохамеда.

Если вы хотите передать данные из фонового сценария в сценарий содержимого при инициализации, вы можете сгенерировать еще один простой сценарий, содержащий только JSON, и выполнить его заранее.

Это то, что вы ищете?

В противном случае вам нужно будет использовать интерфейс передачи сообщений

На фоновой странице:

// Subscribe to onVisited event, so that injectSite() is called once at every pageload.
chrome.history.onVisited.addListener(injectSite);

function injectSite(data) {
    // get custom configuration for this URL in the background page.
    var site_conf = getSiteConfiguration(data.url);

    if (site_conf)
    {
        chrome.tabs.executeScript({ code: 'PARAMS = ' + JSON.stringify(site_conf) + ';' });
        chrome.tabs.executeScript({ file: 'site_injection.js' });
    }
}

На странице сценария содержимого (site_injection.js)

// read config directly from background
console.log(PARAM.whatever);