Для этого расширения Chrome любой элемент DOM, который я пытаюсь получить, возвращается как null. Я пробовал несколько разных веб-сайтов и пытался получить элементы DOM по ID, классу и имени. Ниже приведена последняя попытка на wikipedia.org
manifest.json
{
"manifest_version": 3,
"name": "Тест",
"version": "1.0",
"description": "тестирование",
"content_scripts": [
{
"run_at": "document_end",
"js": ["scripts/content.js"],
"matches": [
"*://*.wikipedia.org/*",
"*://wikipedia.com/*"
]
}
],
"action": {
"default_popup": "hello.html"
}
}
hello.html
<html>
<body>
<h1>Привет, расширения</h1>
<script src="./scripts/content.js"></script>
</body>
</html>
content.js
document.addEventListener('DOMContentLoaded', function() {
const domElem = document.getElementById('www-wikipedia-org')
console.log(domElem);
});
window.onload = function() {
const domElem = document.getElementById('www-wikipedia-org')
console.log(domElem);
}
Ответ
Проблема, с которой вы столкнулись, может быть связана с несколькими аспектами вашей Chrome-расширения. Давайте пройдемся по шагам, чтобы убедиться, что все сделано правильно и чтобы помочь вам устранить проблему.
1. Проблема с выбором элемента
В вашем коде вы пытаетесь получить элемент с id равным www-wikipedia-org. Убедитесь, что такой элемент действительно существует на странице. Если элемента с таким id нет, он вернет null. Например, на главной странице Википедии элемента с таким id нет.
Попробуйте изменить строку в content.js, чтобы получить другой элемент, который точно существует на странице. Например, вы можете получить заголовок страницы:
document.addEventListener('DOMContentLoaded', function() {
const domElem = document.querySelector('h1');
console.log(domElem);
});2. Проверка манифеста
Ваш manifest.json настроен правильно. Убедитесь, что расширение загружено и активно. Вы можете проверить это, зайдя в chrome://extensions/ и убедившись, что ваше расширение включено и не содержит ошибок.
3. Структура hello.html
В вашем hello.html вы загружаете content.js через <script src="./scripts/content.js"></script>. Это не нужно, так как у вас уже есть content_scripts в манифесте, и скрипт будет загружен автоматически при загрузке страницы, соответствующей указанных вами matches.
Рекомендуется удалить этот тег <script> из hello.html. Вот как должен выглядеть ваш hello.html:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>4. Отладка
Чтобы проверить, работает ли ваше расширение, добавьте несколько отладочных сообщений в content.js, например:
console.log('Скрипт content.js запущен');
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM полностью загружен');
const domElem = document.querySelector('h1'); // или другой элемент
console.log(domElem);
});5. Проверка разрешений
Если вы всё ещё получаете null, убедитесь, что у вашего расширения есть разрешения на доступ к сайтам, на которых вы пробуете его использовать. Если вы добавили другие URL в matches, проверьте, что они корректные.
Заключение
После выполнения этих проверок и изменений ваш код должен начать возвращать соответствующие DOM-элементы. Если проблема все еще остается, проверьте консоль разработчика в Chrome (нажмите F12), чтобы увидеть ошибки и отладочную информацию, которая может указать на другие возможные проблемы.