Building Chrome Extension to search site through HTML, but eventlistener doesn't seem to be grabbing anything.
I have the input in the popup html, but I am unable to register a listener to that input.
how would i get the input text in the content.js listener?
manifest.json
{
"manifest_version": 3,
"name": "Search Site",
"description": "Search Birds & Fish on https://obscurecritters.weebly.com",
"version": "1.0",
"action": {
"default_popup": "extension_script.html",
"default_icon": "Extension_Icon.png",
"default_title": "Get pages source"
},
"permissions": [
"scripting",
"activeTab"
],
"content_scripts": [
{
"matches":["https://obscurecritters.weebly.com/*"],
"css": ["style.css"],
"js": ["content.js"]
}
]
}
extension_script.html
<!DOCTYPE html>
<html lang="en">
<body>
<form id="form">
<input name="animal_name" placeholder="Search..." />
<button id="submit">Search</button>
</form>
</body>
</html>
content.js
window.addEventListener('DOMContentLoaded', (event) => {
console.log('Running on Load')
const f = document.getElementById('submit').addEventListener('click', search_images);
});
function seach_images() {
console.log('Running Search Images')
let all_gallery_photos = document.querySelectorAll('.galleryImage')
console.log(all_gallery_photos)
all_gallery_photos.forEach(filter_images)
}
function filter_images() {
//ignore for now
}