Сценарий контента Youtube загружается, но отображается внутри DOM после перезагрузки [дубликат] ⇐ Javascript
-
Гость
Сценарий контента Youtube загружается, но отображается внутри DOM после перезагрузки [дубликат]
Я пытаюсь создать расширение для YouTube, для которого мне нужно манипулировать его DOM. Манипулирование Домом работает, но не при первой загрузке, а после однократной перезагрузки страницы.
Код моего измененного файла сценария:
импортировать React из «реагировать»; импортировать { createRoot } из "реагировать-дом/клиент"; импортировать приложение из "./src/App"; импортировать "./src/index.css"; объявить const chrome: любой; if (typeof браузер === "не определено") { вар браузер = Chrome; } класс Main расширяет React.Component { оказывать() { возвращаться ( ) } } функция addReactApp() { if(!location.pathname.startsWith('/watch')){ возвращаться; } constsideBox = document.getElementById("вторичный"); constsideBox_inner = document.getElementById("вторичный-внутренний"); const videoPlayer = document.getElementsByClassName("html5-video-container"); console.log("видеоплеер",видеоплеер) console.log("sideBox_inner",sideBox_inner) console.log("sideBox",sideBox) if (sideBox &&sideBox_inner && videoPlayer) { const app = document.createElement("div"); app.id = "tubechat-ai"; SideBox.prepend (приложение); constContainer = document.getElementById("tubechat-ai"); console.log("контейнер",контейнер) если (контейнер) { const root = createRoot (контейнер); root.render( ); } } еще { console.log("Не все необходимые элементы присутствуют."); } } document.addEventListener('yt-navigate-finish', addReactApp); если (document.body) addReactApp(); еще document.addEventListener('DOMContentLoaded', addReactApp); Файл манифеста для расширения:
{ «manifest_version»: 3, "name": "Tubechat.ai", "версия": "1.0.0", "разрешения": [ "активная вкладка", "хранилище", «сценарий», «веб-навигация», "вкладки", "уведомления" ], "host_permissions": [ "http://www.youtube.com/*", "https://www.youtube.com/*" ], "действие": { "default_popup": "index.html", "default_icon": { "16": "my-assets/logo.png", "48": "my-assets/logo.png", "128": "my-assets/logo.png" } }, "значки": { "16": "my-assets/logo.png", "48": "my-assets/logo.png", "128": "my-assets/logo.png" }, "content_scripts": [ { "соответствует": ["*://www.youtube.com/*"], "js": ["content.js"], "css": ["my-assets/index.css"], "run_at": "document_end" } ], "фон": { "service_worker": "background.js" } } Я пытался изменить манифест, поместив тег run_at в скрипт содержимого, но это тоже не сработало
Я пытаюсь создать расширение для YouTube, для которого мне нужно манипулировать его DOM. Манипулирование Домом работает, но не при первой загрузке, а после однократной перезагрузки страницы.
Код моего измененного файла сценария:
импортировать React из «реагировать»; импортировать { createRoot } из "реагировать-дом/клиент"; импортировать приложение из "./src/App"; импортировать "./src/index.css"; объявить const chrome: любой; if (typeof браузер === "не определено") { вар браузер = Chrome; } класс Main расширяет React.Component { оказывать() { возвращаться ( ) } } функция addReactApp() { if(!location.pathname.startsWith('/watch')){ возвращаться; } constsideBox = document.getElementById("вторичный"); constsideBox_inner = document.getElementById("вторичный-внутренний"); const videoPlayer = document.getElementsByClassName("html5-video-container"); console.log("видеоплеер",видеоплеер) console.log("sideBox_inner",sideBox_inner) console.log("sideBox",sideBox) if (sideBox &&sideBox_inner && videoPlayer) { const app = document.createElement("div"); app.id = "tubechat-ai"; SideBox.prepend (приложение); constContainer = document.getElementById("tubechat-ai"); console.log("контейнер",контейнер) если (контейнер) { const root = createRoot (контейнер); root.render( ); } } еще { console.log("Не все необходимые элементы присутствуют."); } } document.addEventListener('yt-navigate-finish', addReactApp); если (document.body) addReactApp(); еще document.addEventListener('DOMContentLoaded', addReactApp); Файл манифеста для расширения:
{ «manifest_version»: 3, "name": "Tubechat.ai", "версия": "1.0.0", "разрешения": [ "активная вкладка", "хранилище", «сценарий», «веб-навигация», "вкладки", "уведомления" ], "host_permissions": [ "http://www.youtube.com/*", "https://www.youtube.com/*" ], "действие": { "default_popup": "index.html", "default_icon": { "16": "my-assets/logo.png", "48": "my-assets/logo.png", "128": "my-assets/logo.png" } }, "значки": { "16": "my-assets/logo.png", "48": "my-assets/logo.png", "128": "my-assets/logo.png" }, "content_scripts": [ { "соответствует": ["*://www.youtube.com/*"], "js": ["content.js"], "css": ["my-assets/index.css"], "run_at": "document_end" } ], "фон": { "service_worker": "background.js" } } Я пытался изменить манифест, поместив тег run_at в скрипт содержимого, но это тоже не сработало
Мобильная версия