我希望在 chrome ext 中创建一个简单的 Accordion 来显示数据。我正在使用following JS tutorial但我似乎很难注册点击。
我使用以下方法返回了一些数据:
//background.js
...
// Looping through object's key value pair to place into divs
for (const [key, value] of Object.entries(params)) {
queryParams += `
<div class="text-sm my-1">
<span class="font-bold uppercase mr-1">${key}: </span><span class="font-normal font-mono capitalizev c-word-wrap">${value}</span>
</div>
`;
}
return (completeData += `
<div class="element my-3">
<div id="click-parent" class="question flex justify-between px-6 py-4 bg-purple-500">
<span class="text-base text-white font-bold">${pixelType}</span>
<button id="click-btn">
<i class="fas fa-plus-circle"></i>
</button>
</div>
<!-- OR -->
<div class="question flex justify-between px-6 py-4 bg-purple-500">
<span class="text-base text-white font-bold">${pixelType}</span>
<button id="click-parent">
<i id="click-btn" class="click-btn fas fa-plus-circle"></i>
</button>
</div>
<!-- end of other example -->
<div class="answer hideText">
<span id="pixel-url" class="c-word-wrap text-sm font-mono">${pixelUrl}</span>
<span id="query-params">${queryParams}</span>
</div>
</div>
`);
...
然后我将逻辑放在一个单独的文件中
//popup.js
document.addEventListener('DOMContentLoaded', function () {
// get data
document.getElementById('getCurrentURL').addEventListener('click', function () {
chrome.runtime.sendMessage({}, function (response) {
document.getElementById('data').innerHTML = response;
});
});
// accordion code
const elements = document.querySelectorAll('.element');
elements.forEach((element) => {
let btn = element.querySelector('.question button');
let icon = element.querySelector('.question button i');
var answer = element.lastElementChild;
var answers = document.querySelectorAll('.element .answer');
btn.addEventListener('click', () => {
alert('clicked ');
console.log('clicked');
answers.forEach((ans) => {
let ansIcon = ans.parentElement.querySelector('button i');
if (answer !== ans) {
ans.classList.add('hideText');
ansIcon.className = 'fas fa-plus-circle';
}
});
answer.classList.toggle('hideText');
icon.className === 'fas fa-plus-circle'
? (icon.className = 'fas fa-minus-circle')
: (icon.className = 'fas fa-plus-circle');
});
});
});
我正在像这样加载我的脚本......
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../main.css"/>
<!-- TailWind CSS -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex flex-col min-h-screen">
<main class="main flex-grow">
<h1 class="text-center py-2 text-xl font-bold">HCP365 Debugger</h1>
<section>
<div id="data" class=""></div>
</section>
</main>
<footer class="mb-4">
<div class="flex justify-center">
<button id="getCurrentURL" type="button" class="text-center text-base py-4 px-14 text-white font-bold drop-shadow bg-purple-500 capitalize outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 hover:bg-purple-800">get url</button>
</div>
</footer>
<!-- Scripts -->
<script src="popup.js"></script>
<script src="../background.js"></script>
<!-- Accordion -->
<script src="../fa.js"></script>
<script src="../accordion.js"></script>
</body>
</html>
如果有人能指导我哪里出错了，那就太好了。我还尝试在 chrome ext 之外复制该教程，效果非常好
文件结构
.
├── README.md
├── accordion.js
├── background.js
├── fa.js
├── images
│ ├── icon_128.png
│ ├── icon_16.png
│ ├── icon_32.png
│ └── icon_48.png
├── main.css
├── manifest.json
└── popup
├── popup.html
└── popup.js
更新
我找到了一个存储库，其中有人创建了一个简单的计算。在他们的 popup.js 中，他们有类似的东西
document.getElementById('clickBtn').addEventListener('click', () => {
document.getElementById('textChange').innerHTML = 'hello i was clicked';
});
我在 popup.html 中有一个 div 以及按钮。当我点击它时效果很好。
我继续像这样添加它......
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('getCurrentURL').addEventListener('click', function () {
chrome.runtime.sendMessage({}, function (response) {
document.getElementById('data').innerHTML = response;
});
});
// new code here --------------------------------
document.getElementById('btn').addEventListener('click', () => {
document.getElementById('textChange').innerHTML = 'hello i was clicked';
});
// end ---
});
使用动态按钮...但不起作用!现在这令人沮丧......至少我们知道这是动态内容的问题。
最佳答案
仅在 DOMContent 完全加载后，您可能需要将监听器添加到文档中。对于动态元素，您可能必须在元素的容器上添加 onClick 监听器
参见下面的示例:
// wait for the DOM to be loaded
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
// add listener only after DOM loaded
checkPageButton.addEventListener('click', function() {
alert('clicked');
}, false);
}, false);<!doctype html>
<html>
<head>
<title>Tester</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Tester</h1>
<button id="checkPage">Test this now!</button>
</body>
</html>关于javascript - 使用 vanilla JS 的 chrome ext 中的 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70189751/