Использование расширения Chrome Background.js в качестве посредника API - PullRequest
Новая
       22

Использование расширения Chrome Background.js в качестве посредника API

0 голосов
/ 06 мая 2019

В расширении Chrome я пытаюсь использовать background.js в качестве API. Вот что я имею в виду ...

Из моего понимания расширений Chrome конечный пользователь не имеет доступа к фоновым сценариям. По этой причине безопасно использовать ключи API внутри фонового скрипта. (Если это не так, пожалуйста, поправьте меня.)

В настоящее время мое расширение выглядит примерно так: Рабочий процесс приложения

Пример:

Функция Content.js -> слушатель background.js -> внешний API

Обратный вызов Content.js <- слушатель background.js <- внешний API </p>

Проблема заключается в том, что передача сообщений для расширений Chrome имеет две опции.

  1. «Простые разовые запросы» через chrome.runtime.sendMessage
    • Ограничение: Unchecked runtime.lastError: The message port closed before a response was received.
  2. «Долгосрочные соединения» через port.postMessage.
    • Ограничение: функция обратного вызова отсутствует

Исследования

Попытка

С методом 1

content.js 

chrome.runtime.sendMessage({action: "hello from content"}, response => {
  console.log("content: callback", response);
});

background.js 

chrome.runtime.onMessage.addListener(async function(message, sender, sendResponse) {
    return new Promise((resolve, reject) => {
        GetCurrentlyPlaying()
            .then((response) => {
                    //sendResponse({response: response}); // tried using this
                    //resolve({response: response}); // also tried using this, also tried both
            });
    })
});

Результат

Ошибка: Unchecked runtime.lastError: The message port closed before a response was received. вызывается обратный вызов и регистрируется unndefined

С методом 2

content.js 

let port = chrome.runtime.connect();

port.postMessage({
  callback: function(response) {
    console.log('content: callback', response);
  }
});

port.onMessage.addListener(function (message) {
  if (message.callback && message.data) {
    message.callback(message.data);
    return;
  }
});

background.js 

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (message) {
            GetCurrentlyPlaying()
                .then((response) => {
                    port.postMessage({
                        callback: message.callback,
                        data: response
                    });
                });
    });
});

Результат

Функция обратного вызова теряется, так как postMessage принимает только json, поэтому функции удаляются

Я думаю, что лучший курс действий будет иметь какое-то отношение к методу 1 и обещаниям, но я просто не уверен, как заставить его работать правильно. В конце дня контентный скрипт должен получить ответ API в функции обратного вызова.

...