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

【问题标题】：How can I setState to Active Tab from an array of Current Window Tabs?如何从当前窗口选项卡数组中将状态设置为活动选项卡？
【发布时间】：2019-05-05 19:45:59
【问题描述】：

我有一个 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'
        />
    )
}

我能够让它在 active tab = true 并将 itemURL 设置为 tabs[0] 的情况下工作，但我试图避免延迟。

【问题讨论】：

标签： javascript node.js reactjs google-chrome google-chrome-extension

【解决方案1】：

chrome.* API 是异步的，所以总会有延迟。

查询<head> 内声明的脚本中的选项卡，以便更快地获得结果：

popup.html

<head>
  <script src="popup.js"></script>
  <!-- other scripts
  <script src="script1.js"></script>
  <script src="script2.js"></script>
  -->     
</head>

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

另一种解决方法是通过chrome.tabs API 中的各种事件始终跟踪后台脚本中的选项卡活动，并将 JSON.stringify(results) 保存在 HTML5 localStorage 中，这是同步的，因此它将在弹出窗口开始时可用。

【讨论】：