Как я могу установить состояние активной вкладки из массива вкладок текущего окна? - PullRequest
Новая
       1

Как я могу установить состояние активной вкладки из массива вкладок текущего окна?

0 голосов
/ 05 мая 2019

У меня есть расширение 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 на вкладки [0], но я пытаюсь избежать задержки.

1 Ответ

1 голос
/ 05 мая 2019

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 (результаты) в HTML5 localStorage, который является синхронным, поэтому он будет доступен при запуске всплывающего окна.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...