Как открыть модал React на активной странице с боковой панели расширения Chrome? ⇐ Javascript

[Anonymous]

Я разрабатываю расширение Chrome с боковой панелью, и мне нужно открыть модал React на активной веб -странице, когда нажимается кнопка внутри боковой панели. Однако, поскольку расширение работает в отдельном DOM (внутри боковой панели), модал не отображается на основной веб -странице.
< /p>
Что я пробовал:
Использование порталов - порталы работают только в одном и том же приложении React, но, поскольку расширение работает в другом DOM, это не работает. /p>
Инъекция скрипта контента < /strong> - я использовал chrome.runtime.sendmessage из моего расширения, чтобы отправить сообщение в сценарий content.js, который затем вводит простой modal () на странице. p>
my setup:
manifest.json (разрешения и конфигурация для боковой панели) < /p>
founal.js (обрабатывает события расширения и отправляет сообщения в сценарии контента) strong> (инъекции модального при получении сообщения)
component React (rewritemodal.tsx) - это модал, который я хочу показать на активной веб -странице .
code
manifest.json
"manifest_version": 3,
"name": "ABC",
"version": "1.0.0",
"description": "ABC",
"action": {
"default_popup": "index.html",
"default_title": "ABC"
},
"side_panel": {
"default_path": "index.html",
"open_at_install": true
},
"permissions": ["tabs", "scripting", "activeTab"],
"host_permissions": ["*://*/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_end"
}
]
}
< /code>
background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "SHOW_MODAL") {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs[0]) {
chrome.tabs.sendMessage(tabs[0].id, { type: "INJECT_MODAL" });
}
});
}
});
< /code>
content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "INJECT_MODAL") {
console.log("Injecting modal...");

if (document.getElementById("extension-modal")) return;

const modal = document.createElement("div");
modal.id = "extension-modal";
modal.style.position = "fixed";

modal.style.zIndex = "9999";

modal.innerHTML = `

Modal
This modal is injected
Close

`;

document.body.appendChild(modal);

document.getElementById("close-modal-button").addEventListener("click", () => {
modal.remove();
});
}
});
< /code>
React modal < /p>
import React, { useEffect, useState } from "react";

interface odalProps {
isOpen?: boolean;
onClose?: () => void;
}

export default function Modal({ isOpen = false, onClose = () => {} }: ModalProps) {
const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
if (isOpen) {
setIsVisible(true);
document.body.style.overflow = "hidden";
} else {
const timer = setTimeout(() => setIsVisible(false), 200);
document.body.style.overflow = "unset";
return () => clearTimeout(timer);
}
}, [isOpen]);

if (!isVisible) return null;

return (
style={{
display: isOpen ? "block" : "none",
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
background: "rgba(0, 0, 0, 0.5)",
zIndex: 1000,
}}
>

Injected Modal

Close



);
}
< /code>
Проблема: < /strong> < /p>

Модальный в content.js вводит правильно, но я хочу отобразить мой компонент реагирования
(rewritemodal.tsx) вместо ручного создания.
< /li>
Поскольку приложение React работает внутри боковой панели расширения, я не могу напрямую использовать reactdom.render (). < /li>
Я попробовал
chrome.scripting.executescript (), чтобы ввести реагировать на страницу, но
я не смог получить свой модальный компонент должным образом. < /li>
< / ul>
Что мне нужна с помощью: < /strong> < /p>

Как я могу внедрить свой модальный React Modal в активной веб -странице динамически? >
< /li>
Как я могу правильно внедрить свой модал реагирования, гарантируя, что он остается интерактивным? < /p>
< /li>
< /уль>

Подробнее здесь: https://stackoverflow.com/questions/794 ... side-panel