Как настроить выполнение триггера только на активной вкладке, но не выполнять его на открытых вкладках?

Question

Арнольд

расширения-для-браузеров

Как настроить выполнение триггера только на активной вкладке, но не выполнять его на открытых вкладках?

Как можно изменить код в файле contentScript.tsx, чтобы действия в функции отслеживания изменений storage касались только активной вкладки, результат отображался только в этой вкладке? <br/><br/><pre><code class="javascript">const App =() =&gt;{
  const [error, setError] = useState&lt;boolean&gt;(false)

  useEffect(() =&gt;{
    chrome.storage.onChanged.addListener((changes, area) =&gt;{
      if(area === "local" &amp;&amp; changes.hasOwnProperty("isForbidden")){
        const newValue = changes["isForbidden"].newValue
        setError(newValue)
      }
    })

    return () =&gt; {
      chrome.storage.onChanged.removeListener();
    }
  },[])

  return(
    &lt;&gt;
      {error?
      &lt;&gt;
      &lt;div&gt;Ошибка&lt;/div&gt; 
        &lt;/&gt; 
        :null
      }
    &lt;/&gt;
  )
}</code></pre>

24 мая 2024 г. 4:51

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы настроить выполнение триггера только на активной вкладке, вы можете использовать методы chrome.tabs.getCurrent() или chrome.tabs.query() для определения активной вкладки. Затем в функции обработчика события onChanged проверяйте, соответствует ли вкладка активной перед выполнением действий.

Чтобы изменить код в файле contentScript.tsx и обрабатывать изменения storage только для активной вкладки, вам необходимо отправить сообщение от content script к background script, чтобы определить активную вкладку. Затем, используя полученную информацию об активной вкладке, выполнить обновление только на необходимой вкладке.

Примерно так это можно сделать:

```javascript
const App = () => {
  const [error, setError] = useState<boolean>(false)

  useEffect(() => {
    chrome.runtime.sendMessage({ message: "getActiveTab" }, (response) => {
      if (response && response.tabId === chrome.tabs.getCurrent().id) {
        chrome.storage.onChanged.addListener((changes, area) => {
          if (area === "local" && changes.hasOwnProperty("isForbidden")) {
            const newValue = changes["isForbidden"].newValue
            setError(newValue)
          }
        })
      }
    })

    return () => {
      chrome.storage.onChanged.removeListener();
    }
  },[])

  return(
    <>
      {error?
        <>
          <div>Ошибка</div> 
        </> 
        : null
      }
    </>
  )
}
```

В этом коде мы отправляем сообщение "getActiveTab" в background script, который возвращает информацию об активной вкладке. Затем мы сравниваем информацию об активной вкладке с информацией из события onChanged, и если они совпадают, то выполняем необходимые действия.

Answer 2

Проверяй значение document.visibilityState