I am trying to build a chrome extension and I am having a hard time trying to call a function that is inside “content.js” from another regular js file.
the purpose function inside content.js is to fill all the input tags inside the DOM of the tab I am currently on to a given value that I choose inside my extension page.
manifest.json:
{
"manifest_version": 3,
"name": "",
"version": "1.0.0",
"description": "",
"author": "",
"icons": {
"48": "assets/icon48.png",
"128": "assets/icon128.png"
},
"action":{
"default_popup": "extension.html",
"default_title": ""
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content.js"]
}
],
"permissions": [
"activeTab",
"scripting"
]
}
js/content.js:
function changeInput(value) {
if (event.target.id == "input-btn") {
const passwordInputs = document.querySelectorAll("input[type='password']");
passwordInputs.forEach(input => {
input.value = value;
});
}
}
extension.html:
<html>
<head>
<link rel="stylesheet" href="css/main-page.css">
<link rel="stylesheet" href="css/login-page.css">
</head>
<body>
<button id="input-btn">change input value</button>
<script src="js/request_password.js"></script>
</body>
</html>
js/request_password.js:
document.addEventListener("click", async (event) => {
if (event.target.id == "input-btn") {
changeInput("Hello world");
}
});
I know that you can’t just call another function from a different file without exporting it but even with import/export, the call won’t work.
I am not sure but I think that I can’t call a content function from a non content script.
How can I call the content function?
Thanks for the help!