时间戳

首页 > 解决方案 > Chrome 扩展：从 background.js 获取变量到 popup.js

javascript - Chrome 扩展：从 background.js 获取变量到 popup.js

问题描述

我正在使用 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")
);

背景.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在它到达渲染函数时仍然未定义。

任何帮助甚至是正确方向的一点都将不胜感激，因为我对这个障碍的想法已经不多了。

标签： javascriptreactjsgoogle-chromegoogle-chrome-extension

解决方案

您可以将 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 中设置宽度和高度

推荐阅读