Как взаимодействовать с background.js из всплывающего окна?

Question

Есть ли способ передать информацию между popup.html (или popup.js) и фоновым скриптом?

Я бы хотел, чтобы всплывающее окно отображало информацию из учетной записи пользователя или разрешало им входить в систему, но background.js обрабатывает аутентификацию и другую логику. У меня есть background.js, объявленный в манифесте, но, похоже, нет никаких признаков того, что он используется вообще.

Редактировать: Если я собираюсь все это неправильно, и есть лучший способ сделать это, это тоже будет здорово.

Answer 1

Используйте chrome.extension API.

Вы можете отправлять запросы туда и обратно или даже лучше использовать порт для непрерывной связи.

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

Просто создайте файл socket.js, который будет включен как на исходную страницу, так и на всплывающую страницу. Тогда на каждом можно просто объявить:

new Socket(); 

Вот реализация socket.js:

var Socket = function() { 
    window.socket = this; 

    this.port = chrome.extension.connect({name:"popupToBackground"}); 

    chrome.extension.onConnect.addListener(function(port) { 
     if(port.name == "backgroundToPopup") {} 
      else if(port.name == "popupToBackground") { 
      window.socket.port = chrome.extension.connect({name:"backgroundToPopup"}); 
     } 
     else { 
      return; 
     } 

     port.onMessage.addListener(function(msg) { 
      try { 
       window[msg.namespace][msg.literal][msg.method].apply(this, msg.args); 
      } 
      catch(error) { 
       // your failed action goes here. 
      } 
     }); 
    }); 
}; 

Убедитесь, что вы делаете общий метод вызывает в сообщение слушателя работы для вас. Мне нравится формат, который я дал выше - он очень надежный. Для отправки сообщения туда и обратно просто разместить их в сокет:

socket.post({ namespace: "myNamespace", 
       literal: "myLiteral", 
       method: "myMethod", 
       args: ["argOne", "argTwo"] 
      }); 
}); 

Так что, если это были выполнены из всплывающей странице, то фон страницы будет позвонить:

window.myNamespace.myLiteral.myMethod(argOne, argTwo); 

Для меня это очень приятно многократно используемый объект javascript. Вы даже можете добавить определенные функции прототипа, если вы хотите - это способ его еще проще послать сообщения:

Socket.prototype = { 
    sendOneTwo: function() { 
     socket.post({ namespace: "myNamespace", 
         literal: "myLiteral", 
         method: "myMethod", 
         args: ["argOne", "argTwo"] 
    }); 
}; 

Теперь все, что вы должны сказать:

socket.sendOneTwo(); 

Answer 2

Обратите внимание, что фон страницы и popup live в том же процессе (процесс расширения), поэтому одна страница может получить окно DOM другого, а затем вызвать функции или установить переменные напрямую. Например, всплывающее окно может позвонить chrome.extension.getBackgroundPage изменить фон:

chrome.extension.getBackgroundPage().variable = 42; 

и фон страницу можно назвать chrome.extension.getViews получить всплывающее окно:

var popups = chrome.extension.getViews({type: "popup"}); 
if (0 < popups.length) 
    popups[0].variable = 42; 

Другим способом установить общие переменные с использованием традиционного DOM API, поскольку каждое расширение получает поддельное происхождение (например, «eakjnniffhfegdpfehmnpcmjiameincp»). Поэтому, когда вы изменяете localStorage, document.cookie или IndexedDB на фоне, его можно прочитать во всплывающем окне.

Таким образом, вы все равно можете использовать API-интерфейсы передачи сообщений даже внутри страниц процесса расширения, поскольку это может сделать ваш код более однородным. Передача сообщений - единственный способ общения с сценариями контента.

Answer 3

Для целей отладки просто я считаю, это очень удобно в всплывающей JS:

console = chrome.extension.getBackgroundPage().console