Расширение Chrome: получение переменной из background.js в popup.js

Question

Я делаю свое первое расширение для Chrome в React с пакетом babel, который отслеживает ваше время на каждой веб-странице. Я запускаю время запуска в фоновом режиме, но мне нужно получить доступ к этому времени запуска в popup.js, когда они нажимают на всплывающее окно. Мне нужно выяснить, как это сделать, поскольку асинхронная природа всего этого, кажется, мешает мне. Вот соответствующие файлы:

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

{
  "name": "Timer",
  "options_page": "options.html",
  "background": {
    "scripts": ["background.bundle.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon-34.png"
  },
  "permissions": ["tabs"],
  "icons": {
    "128": "icon-128.png"
  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

popup.js:

import "../css/popup.css";
import Timer from "./popup/timer_component.js";
import React from "react";
import { render } from "react-dom";

const console = chrome.extension.getBackgroundPage().console;
let startingTime;

chrome.runtime.sendMessage({request: "getStartTime"}, function(response) {
    startingTime = response.done;
});

render(
  <Timer currentTimer = {startingTime}/>,
  window.document.getElementById("app-container")
);

background.js:

import '../img/icon-128.png'
import '../img/icon-34.png'

const console = chrome.extension.getBackgroundPage().console;
let startTime = Date.now();

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.request == "getStartTime") {
        sendResponse({done: startTime});
    }
});

Проблема здесь в том, что сообщения асинхронны, поэтому startingTime не обновляется вовремя, чтобы передать его в функцию рендеринга. Я хочу знать, как мне обойти это? Перед попыткой передачи сообщений я попытался обработать переменную напрямую с помощью startingTime = chrome.extension.getBackgroundPage().startTime;, но похоже, что она также может быть асинхронной, поскольку startingTime все еще не определено к тому времени, когда она попадает в функцию рендеринга.

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

Answer 1

Вы можете изменить ваш popup.js так, чтобы он не вызывал ReactDOM.render, пока он не получит данные по мере необходимости из фона.

chrome.runtime.sendMessage({request: "getStartTime"}, function(response) {
    const startingTime = response.done;
    render(
      <Timer currentTimer = {startingTime}/>,
      window.document.getElementById("app-container")
    );
});

Когда я сделал это для своих расширений, я заметил хромированную ошибку, из-за которой размеры всплывающих окон не были установлены правильно. Если это произойдет с вами, вы можете установить ширину и высоту в HTML