Javascript 如何将当前窗口选项卡数组中的状态设置为活动选项卡？

我有一个Chrome扩展，它显示当前活动选项卡的链接预览，但是当打开它时，当然会延迟渲染，因为它正在调用API。我想抓取所有当前的窗口选项卡URL，并预渲染链接预览以准备就绪，并且仅在扩展打开时显示活动选项卡

constructor(props) {
    super(props);
    this.state = {
        itemURL: 'https://www.getpennywise.io'
    };
}


componentDidMount() {
    chrome.tabs.query({ currentWindow: true }, tabs => {
        let OpenTabs = [];
        for (let i = 0; i < tabs.length; i++) {
            const itemURL = new URL(tabs[i].url);
            OpenTabs.push(itemURL);
        }
        // this.setState({
        //     itemURL: itemURL,
        console.log(OpenTabs);
    });
};

render() {
    return (
        <MicrolinkCard
            url={this.state.itemURL}
            size='large'
            contrast='true'
        />
    )
}

构造函数（道具）{
超级（道具）；
此.state={
项目URL:'https://www.getpennywise.io'
};
}
componentDidMount（）{
chrome.tabs.query（{currentWindow:true}，tabs=>{
让OpenTabs=[]；
for（设i=0；i

---

我可以让它在active tab=true和settings itemURL to tabs[0]中工作，但我正在尝试避免延迟。

chrome.*API是异步的，因此总是会有延迟

查询

中声明的脚本中的选项卡，以便更快地获得结果：

popup.html

popup.js

let tabs;

chrome.tabs.query({currentWindow: true}, tabs_ => {
  tabs = tabs_;
  window.dispatchEvent(new Event('gotTabs'));
});

Promise.all([
  new Promise(resolve =>
    window.addEventListener('gotTabs', resolve, {once: true})),
  new Promise(resolve =>
    document.addEventListener('DOMContentLoaded', resolve, {once: true})),
]).then(() => {
  // create component here using 'tabs' variable
});

另一个解决方法是始终通过API中的各种事件跟踪后台脚本中的选项卡活动，并将JSON.stringify（结果）保存在HTML5 localStorage中，该存储是同步的，因此在弹出窗口开始时可用