Question

我正在使用babel软件包在React中制作我的第一个chrome扩展程序，该软件包可以跟踪每个网页上的时间。我在后台启动了开始时间，但是当他们点击弹出窗口时需要访问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在到达render函数时仍未定义。

任何帮助，甚至只是正确方向上的一点都会非常感激，因为我对这个障碍的想法已经用完了。

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")
    );
});

当我为扩展程序完成此操作时，我注意到了一个Chrome错误，其弹出尺寸未正确设置。如果您遇到这种情况，可以在HTML

中设置宽度和高度

Chrome扩展程序：从background.js获取变量到popup.js

1 个答案: