Я пытаюсь создать расширение для Chrome, поэтому я делаю уроки, чтобы выучить и прочесть кучу, но я изо всех сил.Я делаю этот урок .Но в долгосрочной перспективе от расширения мне нужно, чтобы пользователи могли войти в свою учетную запись, а затем, когда они просматривают, отправьте URL-адрес, по которому они находятся, в свою учетную запись.
всплывающее окно.html
<!doctype html>
<html>
<head>
<title>Add a Snippet</title>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<h1>Add a Snippet</h1>
<form id="form">
<textarea id="code"></textarea>
<button type="submit" id="checkPage">Add Snippet</button>
</form>
</body>
</html>
popup.js Чего я на самом деле не понимаю, так это того, что в соответствии с имеющимися там строками console.log и ошибкой происходит загрузкаDOMContent, и у него нет проблем с поиском формы по идентификатору (пусть f = document.getElementById ('form');).Но он бомбит, когда я пытаюсь подключить прослушиватель событий?
document.addEventListener('DOMContentLoaded', function() {
console.log('the domcontentloaded');
let f = document.getElementById('form');
f.addEventListener('submit', function(e){
console.log('the form was submitted');
e.preventDefault();
})
}, false);
manifest.json
{
"name": "My Awesome Plugin",
"description": "This extension will be awesome",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "This is Awesome"
},
"background": {
"scripts": ["jquery-2.2.3.min.js", "background.js","popup.js"],
"persistent": false
},
"permissions": [
"activeTab",
"declarativeContent",
"https://ajax.googleapis.com/",
"storage",
"tabs",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["login.js"]
}
],
"manifest_version": 2
}
login.js
console.log('login.js is ready to party');
Когда я загружаю, я получаю это в фоновом инспекторе (или как там это называется).Так что это не найти форму.![enter image description here](https://i.stack.imgur.com/PxG88.png)
Итак, я посмотрел на элементы, и я запутался, потому что они не показывают форму или текстовую область.Но когда я нажимаю на значок расширения Chrome, он там.![enter image description here](https://i.stack.imgur.com/V0RNn.png)
![enter image description here](https://i.stack.imgur.com/vMiGx.png)