将 JS 事件侦听器添加到 Chrome 扩展弹出窗口
[英]Add JS Event Listener to Chrome Extension Popup
问题描述
I'm building a Chrome Extension, and I'm having some trouble adding an event listener.
我正在构建一个 Chrome 扩展程序，但在添加事件侦听器时遇到了一些问题。 I want to add it to a button within the popup.我想将它添加到弹出窗口中的按钮。
Here's the JS -这是JS-
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('checkButton').onclick = grabLinks;
});
And here's the popup HTML -这是弹出窗口 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 -另外，这里是 manifest.json 以防万一 -
{
"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 -事件处理程序中的错误：TypeError：无法设置 null 的属性“onclick”
Then it keeps repeating this error over and over again.然后它一遍又一遍地重复这个错误。 - Uncaught TypeError: Cannot read property 'addListener' of undefined -未捕获的类型错误：无法读取未定义的属性“addListener”
3 个解决方案
解决方案1
2 2019-10-23 07:26:20
Your popup.js should be added into popup.html instead of add to background scripts.您的popup.js应添加到popup.html中，而不是添加到后台脚本中。 Like so:像这样：
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
and then your popup.js should be placed in popup.html :然后你的popup.js应该放在popup.html中：
<h3>Duplink</h3>
...
<p>Link is:<span id="message"></span></p>
<script src="popup.js"></script>
解决方案2
0 2019-10-23 03:44:17
use addEventListener to bind the event to button also:还使用 addEventListener 将事件绑定到按钮：
Check the code below:检查下面的代码：
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('checkButton');
btn.addEventListener('click', function() {
alert("button clicked");
});
});
解决方案3
0 2019-10-24 23:32:33
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 compareArr = linksArr.includes(URL);
//Alert if link exists on page, or not
if (compareArr === true) {
document.getElementById('message').innerHTML = " On the page - Don't Add Link";
}
else {
document.getElementById('message').innerHTML = ' Not on the page - Add Link';
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.