Расширение Chrome addEventListener null
Я только начал изучать JS несколько недель назад и пытаюсь создать расширение для Chrome. Я создал файлы manifest.json, popup.html, popup.js и content.js.
Когда я пытаюсь запустить консоль фоновой страницы в Chrome, чтобы проверить, работает ли popup.js, я продолжаю получать сообщение об ошибке:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at popup.js:8
Я попытался переместить скрипт в html в нижнюю часть тела, но он по-прежнему заканчивается ошибкой, и я попытался реализовать:
document.addEventListener('DOMContentLoaded', function () {
// My code here.. ( Your code here )
});
в моем popup.js и методе windows.onload, но до сих пор не смог избавиться от ошибки.
Если бы кто-то мог указать на какие-либо ошибки в моем коде и сказать, что не так, я был бы очень признателен. Спасибо
ВСПЛЫВАЮЩЕЕ HTML
<!DOCTYPE html>
<html>
<head>
<title>Like IG Links</title>
</head>
<body>
<h3><center>Paste Links Below</center></h3>
<hr>
<textarea rows = "10" cols = "60" id = "urls"></textarea>
<br>
<textarea rows = "1" cols = "5" id = "counter" disabled></textarea>
<br>
<br>
<button type = "submit" align = "center" style = "width:60px;"
id = "start">Start</button>
<br>
<br>
<button type = "submit" align = "right" style = "width:60px;"
id = "stop">Stop</button>
<script type = "text/javascript" src = "popup.js"></script>
</body>
</html>
СОДЕРЖАНИЕ JS
console.info('CHROME');
POPUP JS
console.info('background running');
function loadUrls() {
console.info("123");
}
var startbutton = document.getElementById("start");
startbutton.addEventListener('click', loadUrls);
МАНИФЕСТ JSON
{
"manifest_version": 2,
"name": "Like IG Links",
"version": "1.0",
"description": "Like IG Links",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"background": {
"scripts": ["popup.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", "storage", "activeTab"]
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Удалите из манифеста часть фонового сценария. После обновления расширения ошибки должны исчезнуть. В расширении, над которым я работаю, у меня были jquery.js и popup.js в HTML и в манифесте. Тег фонового сценария для манифеста предназначен для логики, которая отслеживает события браузера и постоянно на них реагирует, а не для js, стоящих за расширением HTML.
Предлагаю сначала прочитать о расширениях архитектура. Фоновая страница и всплывающее окно - это разные вещи, и вы ищете элемент на фоновой странице, который является пустым шаблоном html с прикрепленным к нему скриптом, поэтому он не найдет ваш
startbutton. Когда вы щелкаете значок расширения, все работает так, как ожидалось, и вы не увидите никаких ошибок во всплывающей консоли, которые вы получите, выбрав соответствующий вариант после щелчка правой кнопкой мыши по значку расширения на панели инструментов.