I am developing a chrome-extension, where I am trying to inject a function into the page. Injecting a regular function works without problems.
But as soon as I try to inject anything with async-functions, I get an error similar to this:
Uncaught ReferenceError: g is not defined
For example, injecting an async-function directly.
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: async () => {
console.log("Does it work?");
}
});
Or even if I inject a regular function, but have an async function inside:
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => {
(async function () {
console.log("Does it work?");
})();
}
});
It can't be right, that I am forced to write and inject synchronous code, making me unable to use the async/await functionality... Can it? What am I doing wrong?
EDIT: ---------------
Upon further investigation, I can see that this function
async () => { console.log("Does it work?"); };
Get translated to this
function(){return e.apply(this,arguments)}
Which explains the ReferenceError but still leaves me clueless as to why this happens.
EDIT2: ---------------
So I tried to resort to "synchronous" code for now. But hoped I at least could use promises without async/await - But also no...
chrome.storage.local.set({ someArray: [] })
.then(() => console.log("It worked?"));
The code above results in the following error:
Cannot read properties of undefined (reading 'then')
So no promises and no async/await for any injected code... Is this really the case?
Injecting async function should not cause a problem. I have included a minimal example below to demonstrate.
manifest.json
{
"name": "TEST",
"version": "0.0.1",
"manifest_version": 3,
"permissions": [
"scripting",
"activeTab"
],
"host_permissions": [
"<all_urls>"
],
"background": {
"service_worker": "background.js"
}
}
background.js
function inject(tab) {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: async () => {
window.alert("I'm here!");
}
})
}
// first open tab with some web page -> try inject there
chrome.tabs.query({
url: "https://*/*"
}, function (tabs) {
inject(tabs.shift())
});
Regarding OP and each edit:
Uncaught ReferenceError: g is not defined - identifier g does not exist: check what it is and where is it supposed to be defined
EDIT 1: if using a compiler/bundler, renaming may be the source of a reference error
EDIT 2: chrome.storage.local.set docs on usage indicate it needs a callback . There is no return value, i.e. it is undefined, cannot chain a then after it.