我正在开发一个简单的chrome扩展，看看它们是如何完成的，我已经学习了教程，但仍然无法正常工作。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Extension</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
</head>
<body>
<div class="popup">
<div class="step-1-test-extension flex-container active">
<div class="step-number">
<p>1</p>
</div>
<div class="step-explanation">
<p>Go to Link Test.</p>
</div>
<a href="https://www.facebook.com" id="test-button" target="_blank" rel="noopener noreferrer" class="button">Visit Facebook</a>
</div>
</div>
<script src="test.js"></script>
</body>
</html>
test.js:
window.onload = () => {
let testButton = document.getElementById('test-button');
testButton.innerText = 'test';
testButton.addEventListener('click', console.log('test click'));
console.log('Chrome extension go');
}
Manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "Quick Test Extension",
"version": "1.0.0",
"icons": {"128": "icon_128.png"},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"],
"content_scripts": [{
"js": ["test.js"],
"matches": ["https://www.facebook.com/*"]
}]
}
test.js中没有任何内容正常工作。它不是console.log，当我单击按钮时也没有采取任何操作，所以addEventListener也不起作用。我已经重新加载了扩展，它被正确地设置为开发模式，它出现在我的浏览器栏上，弹出窗口正在工作，但内容脚本都不工作？非常感谢任何帮助，提前感谢！
据我所知，您有一个脚本(test.js(被引用为内容脚本和弹出菜单中的脚本
popup.html中的脚本将仅在弹出窗口的上下文中运行
但是，内容脚本将仅在实际页面中运行
您可以使用消息在他们之间进行通信，我相信这正是您所需要的。
这句话看起来有点平淡有趣。。。这些天你能做到吗？
testButton.addEventListener('click', console.log('test click'));
难道不应该更像。。。
testButton.addEventListener('click',function(e){
console.log('test click');
},true); // <-- should it bubble?
此外，当您可以。。。
testButton.onclick=function(e){console.log('test click');};
呃？