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

Question

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

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

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

Answer 1

Обратите внимание, что фоновая страница и всплывающее окно живут в одном и том же процессе (процессе расширения), поэтому одна страница может получить окно 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;

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

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

Answer 2

Используйте 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 3

Для отладки я нахожу это очень удобным во всплывающем окне JS:

console = chrome.extension.getBackgroundPage().console