Я создал собственный оверлей в React, который появляется при первом щелчке по моему значку расширения chrome. Наложение вводится как теневой элемент внизу дерева DOM. Когда он отображается, он покрывает весь вид, что и является желаемым эффектом. Теперь я хотел бы закрыть оверлей, щелкнув значок расширения, но не могу понять, как к этому подойти. Я пытаюсь достичь той же функциональности, что и расширение Loom.
Вот текущий поток:
- Щелкните значок начального расширения -> chrome сообщение, отправленное в сценарий содержимого -> сценарий содержимого запускает изменение состояния для отображения наложения
- Значок расширения нажат снова -> сообщение отправлено в сценарий содержимого, чтобы получить видимое состояние наложения -> ответ на сообщение отправлен во всплывающее окно. js с состоянием наложения -> если наложение отображается, отправьте сообщение обратно в сценарий содержимого, чтобы закрыть наложение, иначе откройте его.
При попытке закрыть с помощью щелчка значка я вижу, что состояние компонента overlayVisible читается как false, даже если оно открыто. У меня такое чувство, что я неправильно подхожу к управлению государством.