My Chrome extension is functioning properly when using JavaScript alone.
However, when attempting to incorporate TypeScript with Webpack, I encountered an issue where the function foo could not be found.
Uncaught ReferenceError: foo is not defined
Here is a snippet from my manifest.json:
"content_scripts":
[
{
"js": ["global.js", "content.js"],
"matches": ["https://*.my-domain.com/*"],
"run_at": "document_end"
}
],
Within content.ts :
console.log("content.js");
let afterDOMLoaded = () =>
{
foo()
.then((result) => console.log(result))
.catch((error) => console.error(error));
}
if (document.readyState === 'loading')
{
document.addEventListener('DOMContentLoaded', afterDOMLoaded);
}
else
{
afterDOMLoaded();
}
In global.js :
console.log("global.js");
let foo = async () =>
{
await something();
}
I've also included a tsconfig.json file and webpack.config.js in my project setup. However, despite following the correct script loading order as indicated by console.log output:
global.js
content.js
The issue persists that if I define foo right at the top of content.ts, everything works seamlessly.
At this point, it's unclear whether the problem lies within webpack or TypeScript. Any insights would be greatly appreciated.