I'm building a Chrome Extension, and I'm having some trouble adding an event listener. I want to add it to a button within the popup.
Here's the JS -
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('checkButton').onclick = grabLinks;
});
And here's the popup HTML -
<!DOCTYPE html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<h3>Duplink</h3>
<p>Check if a link is already on this page.</p>
<form>
URL: <input id="URL" type="text" name="URL"><br>
<input id='checkButton' type="submit" value="Submit">
</form>
<p>Link is:<span id="message"></span></p>
</body>
</html>
Also, here's the manifest.json just in case -
{
"name": "Duplink",
"version": "1.0",
"description": "Check for duplicate links on DotDash sites",
"manifest_version": 2,
"background": {
"scripts": [
"background.js",
"popup.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "Duplink"
},
"permissions": [
"activeTab",
"storage"
]
}
When I unpack the extension, I get this error. - Error in event handler: TypeError: Cannot set property 'onclick' of null
Then it keeps repeating this error over and over again. - Uncaught TypeError: Cannot read property 'addListener' of undefined
I'm building a Chrome Extension, and I'm having some trouble adding an event listener. I want to add it to a button within the popup.
Here's the JS -
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('checkButton').onclick = grabLinks;
});
And here's the popup HTML -
<!DOCTYPE html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<h3>Duplink</h3>
<p>Check if a link is already on this page.</p>
<form>
URL: <input id="URL" type="text" name="URL"><br>
<input id='checkButton' type="submit" value="Submit">
</form>
<p>Link is:<span id="message"></span></p>
</body>
</html>
Also, here's the manifest.json just in case -
{
"name": "Duplink",
"version": "1.0",
"description": "Check for duplicate links on DotDash sites",
"manifest_version": 2,
"background": {
"scripts": [
"background.js",
"popup.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "Duplink"
},
"permissions": [
"activeTab",
"storage"
]
}
When I unpack the extension, I get this error. - Error in event handler: TypeError: Cannot set property 'onclick' of null
Then it keeps repeating this error over and over again. - Uncaught TypeError: Cannot read property 'addListener' of undefined
Share Improve this question edited Oct 24, 2019 at 22:25 Tbbd asked Oct 23, 2019 at 2:03 TbbdTbbd 351 gold badge1 silver badge6 bronze badges 2-
Could you provide your full
popup.html? – Toan Quoc Ho Commented Oct 23, 2019 at 7:19 - I added the full popup.html (Without CSS). – Tbbd Commented Oct 24, 2019 at 22:26
3 Answers
Reset to default 1use addEventListener to bind the event to button also:
Check the code below:
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('checkButton');
btn.addEventListener('click', function() {
alert("button clicked");
});
});
Your popup.js should be added into popup.html instead of add to background scripts. Like so:
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
and then your popup.js should be placed in popup.html:
<h3>Duplink</h3>
...
<p>Link is:<span id="message"></span></p>
<script src="popup.js"></script>
I figured some things out!
I changed the input type to button to prevent the default action. (Submitting a form) -
<h3>Duplink</h3>
<p>Check if a link is already on this page.</p>
<form>
URL: <input id="URL" type="text" name="URL"><br>
<input id='checkButton' type="button" value="Submit">
</form>
<p>Link is:<span id="message"></span></p>
And put binded the event to the button.
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('checkButton');
btn.addEventListener('click', function() {
//Get URL from input
var URL = document.getElementById('URL').value;
//Get all links
var links = document.querySelectorAll('.article a');
//Convert Nodelist to Array
var linksArr = [];
links.forEach(node => linksArr.push(node.href))
//Compare Link to Array
var pareArr = linksArr.includes(URL);
//Alert if link exists on page, or not
if (pareArr === true) {
document.getElementById('message').innerHTML = " On the page - Don't Add Link";
}
else {
document.getElementById('message').innerHTML = ' Not on the page - Add Link';
}
});
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745001492a4605521.html
评论列表（0条）