Question

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

我能够使它对于活动的tab = true起作用，并将itemURL设置为tabs [0]，但试图避免延迟。

Answer 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中，这是同步的，因此将在弹出窗口开始时可用。

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

1 个答案: