通常我从控制台运行JS，但它很烦人，所以我想创建一个简单的Chrome扩展，它会为我运行它。理想情况下，无需打开任何额外的弹出窗口，只需单击扩展图标即可。
我尝试的是：
1.我创建了一个包含popup.html、popup.js、manifest.json、icon16.png、icon48.png和icon128的文件夹。
1.对于manifest.json
{
"manifest_version": 3,
"name": "My Simple Extension",
"version": "1.0",
"description": "A simple Chrome extension to manipulate quiz elements.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"permissions": [
"activeTab"
],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}字符串
1.对于popup.js
document.getElementById('run-script').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: runCode,
});
});
});
function runCode() {
document.querySelectorAll('input[type="radio"][disabled]').forEach(function(radio) {
radio.removeAttribute('disabled');
});
document.querySelectorAll('.is-selected').forEach(function(element) {
element.classList.remove('is-selected');
});
document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
radio.checked = false;
});
document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
radio.value = '';
});
document.querySelectorAll('.wpProQuiz_answerIncorrect').forEach(function(element) {
element.classList.remove('wpProQuiz_answerIncorrect');
});
document.querySelectorAll('.wpProQuiz_answerCorrectIncomplete').forEach(function(element) {
element.classList.remove('wpProQuiz_answerCorrectIncomplete');
});
document.querySelectorAll('.wpProQuiz_answerCorrect').forEach(function(element) {
element.classList.remove('wpProQuiz_answerCorrect');
});
document.querySelectorAll('.wpProQuiz_incorrect').forEach(function(element) {
element.style.display = 'none';
});
document.querySelectorAll('.wpProQuiz_response').forEach(function(element) {
element.style.display = 'none';
});
document.querySelectorAll('.wpProQuiz_QuestionButton').forEach(function(element) {
element.style.display = 'block';
});
}型
1.对于popup.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 300px;
height: 100px;
margin: 0;
padding: 10px;
font-family: sans-serif;
}
button {
width: 100%;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<button id="run-script">Run Script</button>
<script src="popup.js"></script>
</body>
</html>型
1.安装扩展后，当我点击图标。按钮出现，但当我单击它时，什么也没有发生，控制台抛出以下警告：
DevTools failed to load source map: Could not load content for https://kurzy.aeroweb.cz/wp-content/cache/autoptimize/css/bundle.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE型
1.还有一件事我该如何改变我的JS，让它在图标点击时工作，而不需要用一个按钮打开弹出窗口？
1条答案
按热度按时间5t7ly7z51#
至于回答下面我的问题（感谢wOxxOm），需要替换触发器：
字符串