Chrome Extension Content Script Not Firing
Question
I'm working on a simple chrome extension to see how they're done, and I've followed tutorials but still can't get it working properly.
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/*"]
}]
}
Nothing in the test.js is working properly. It's not console.logging anything and no action is taken when I click the button, so the addEventListener isn't working either. I've reloaded the extension, it's properly set to dev mode and it's appearing on my browser bar with the popup working, but none of the content script is working? Any help is greatly appreciated, thanks in advance!
2 answers
solution1
1 ACCPTED 2020-08-22 23:40:53
As far as I understood, you have one script ( test.js ) that's being referenced both as a Content Script and as a script in the Popup
The script in the popup.html will only run in the context of the popup
The content script, however, will only run in the actual page
You can communicate between them usingmessages , which I believe is what you need.
solution2
0 2020-08-22 22:22:36
This line looks kinda plain and funny... can you do that these days?
testButton.addEventListener('click', console.log('test click'));
Shouldn't it be more like...
testButton.addEventListener('click',function(e){
console.log('test click');
},true); // <-- should it bubble?
Also, should you be using an expensive event listener when you could just...
testButton.onclick=function(e){console.log('test click');};
Eh?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.