Question

我正在使用React中的Chrome扩展程序，该扩展程序在后台脚本上调用异步函数。为此，用户单击内容脚本上的按钮以触发此功能。在脚本执行期间，该按钮显示一个正在加载的图标，并且在后台脚本完成后应还原。我在扩展程序https://github.com/tshaddix/webext-redux

中使用webext-redux for Redux

我没有正常工作，因此如果运行内容脚本的浏览器窗口保持打开状态，那么这里的一些伪代码会起作用

内容脚本

componentDidMount() {
   chrome.runtime.onMessage.addListener(
        (request) => {
            if(request.action === "syncComplete") {
                this.props.dispatch(syncing(false))
            }
        });
}

sync() {
  this.props.dispatch(syncing(true));
  chrome.runtime.sendMessage({action: "sync"});
}

render() {
  <a onClick={() => this.sync()}>
    {this.props.syncing ? (<span><Icon type="loading" /> Syncing...</span>) : "Force Sync" }
  </a>
}

背景脚本

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  if(request.action === "sync") startImport();
  return true
});

async function startImport() {
     ...
  // Large async function
  // On complete or fail do:
  chrome.tabs.query({url: "https://example.com/*"}, (tabs) => {
      for (var i=0; i<tabs.length; ++i) {
          chrome.tabs.sendMessage(tabs[i].id, {action: "syncComplete"});
      }
  });
}

但是，我遇到的问题是，如果用户关闭了内容脚本选项卡和背景，则我的异步功能正在后台脚本中运行（有意使用户可以继续浏览内容脚本所在的站点）脚本完成后，没有任何内容脚本正在运行，无法接收Chrome消息来调度同步操作。这样，整个扩展程序就停留在按钮上的永久“加载”状态。

有人知道我如何解决这个问题，或者是否有可能从后台脚本中分派动作？

Answer 1

选项卡关闭后，内容脚本实例及其标签也将消失，并且无法将操作从后台页面分派到该内容脚本。（即使用户对该选项卡执行Ctrl-Shift-T，它也会有一个新的Tabid。）

您提到您的扩展程序陷入了“加载状态”。解决此问题的一种方法是在后台页面的Notes.hs:30:6: error: … • Duplicate MachineTypes are not allowed in Machines Can't add 'Flyer to '[ 'Flyer, 'Worker] ...中保留一个标志，例如localStorage。下次加载localStorage.hasPendingUpdate标签时，请在后台页面发送消息，询问是否有任何待处理的更新。如果有，则后台页面将向该选项卡发送挂起的更新。

使用webext-redux

1 个答案: