Here is my problem. I want to open a side panel after creating an incognito window and attach the panel to the new window in background in chrome extension.
Here is a code example in background.
const nwid = await new Promise<number> ((resolve, reject) => {
chrome.windows.create({
url: 'about:blank',
incognito: true,
type: 'normal'
}, function(newWindow) {
console.log(newWindow);
chrome.storage.local.set({uiCrxAttached: true})
if (chrome.runtime.lastError) {
console.error('Error creating window:', chrome.runtime.lastError);
reject(chrome.runtime.lastError);
}
chrome.storage.local.remove(['uiCrxAttached']);
resolve(newWindow?.id!);
});
})
chrome.tabs.query({ active: true, windowId: nwid }, async function (tabs) {
if (tabs.length > 0) {
const activeTab = tabs[0];
console.log(activeTab);
chrome.sidePanel.open({tabId: activeTab.id!, windowId: nwid})
} else {
console.log('No active tab found.');
}
});
But it returns an error in open side panel, as Error: sidePanel.open() may only be called in response to a user gesture. I am pretty sure that the side panel and the permission in manifest is ok because it will open the side panel when I removed the code about opening new incognito window. Here is my manifest:
{
"name": "Devcube CRX",
"version": "0.11.0",
"manifest_version": 3,
"icons": {
"16": "16.png",
"32": "32.png",
"48": "48.png",
"128": "128.png"
},
"content_scripts": [
{
"run_at": "document_end",
"all_frames": true,
"matches": [
"*://*/*"
],
"js": [
"content-script.js"
]
}
],
"web_accessible_resources": [
{
"resources": [
"background.js",
"index.js",
"execute.js",
"index.css"
],
"matches": [
"<all_urls>"
]
}
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"action": {
"default_icon": {
"16": "16.png",
"32": "32.png"
},
"default_title": "Record"
},
"commands": {
"record": {
"suggested_key": {
"default": "Shift+Alt+R"
},
"description": "Start recording"
},
"inspect": {
"suggested_key": {
"default": "Shift+Alt+C"
},
"description": "Start inspecting"
}
},
"side_panel": {
"default_path": "index.html"
},
"options_ui": {
"open_in_tab": false
},
"host_permissions": [
"*://*/*"
],
"permissions": [
"debugger",
"tabs",
"contextMenus",
"storage",
"sidePanel",
"windows",
"scripting"
],
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'"
}
}
I expected it open the side panel after opening an incognito window and attach the panel to the new window.
Here is my problem. I want to open a side panel after creating an incognito window and attach the panel to the new window in background in chrome extension.
Here is a code example in background.
const nwid = await new Promise<number> ((resolve, reject) => {
chrome.windows.create({
url: 'about:blank',
incognito: true,
type: 'normal'
}, function(newWindow) {
console.log(newWindow);
chrome.storage.local.set({uiCrxAttached: true})
if (chrome.runtime.lastError) {
console.error('Error creating window:', chrome.runtime.lastError);
reject(chrome.runtime.lastError);
}
chrome.storage.local.remove(['uiCrxAttached']);
resolve(newWindow?.id!);
});
})
chrome.tabs.query({ active: true, windowId: nwid }, async function (tabs) {
if (tabs.length > 0) {
const activeTab = tabs[0];
console.log(activeTab);
chrome.sidePanel.open({tabId: activeTab.id!, windowId: nwid})
} else {
console.log('No active tab found.');
}
});
But it returns an error in open side panel, as Error: sidePanel.open() may only be called in response to a user gesture. I am pretty sure that the side panel and the permission in manifest is ok because it will open the side panel when I removed the code about opening new incognito window. Here is my manifest:
{
"name": "Devcube CRX",
"version": "0.11.0",
"manifest_version": 3,
"icons": {
"16": "16.png",
"32": "32.png",
"48": "48.png",
"128": "128.png"
},
"content_scripts": [
{
"run_at": "document_end",
"all_frames": true,
"matches": [
"*://*/*"
],
"js": [
"content-script.js"
]
}
],
"web_accessible_resources": [
{
"resources": [
"background.js",
"index.js",
"execute.js",
"index.css"
],
"matches": [
"<all_urls>"
]
}
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"action": {
"default_icon": {
"16": "16.png",
"32": "32.png"
},
"default_title": "Record"
},
"commands": {
"record": {
"suggested_key": {
"default": "Shift+Alt+R"
},
"description": "Start recording"
},
"inspect": {
"suggested_key": {
"default": "Shift+Alt+C"
},
"description": "Start inspecting"
}
},
"side_panel": {
"default_path": "index.html"
},
"options_ui": {
"open_in_tab": false
},
"host_permissions": [
"*://*/*"
],
"permissions": [
"debugger",
"tabs",
"contextMenus",
"storage",
"sidePanel",
"windows",
"scripting"
],
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'"
}
}
I expected it open the side panel after opening an incognito window and attach the panel to the new window.
Share Improve this question asked 10 hours ago HaldencoltHaldencolt 1 New contributor Haldencolt is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1- This question is similar to: "Error: `sidePanel.open()` may only be called in response to a user gesture." Received this when open side panel with keyboard shortcut. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – DarkBee Commented 7 hours ago
2 Answers
Reset to default 0I found a solution that is somehow complicated. I send a chrome runtime event after opening the window and open the side panel in the listener. It works. I think the error is because there can not be any await before sidePanel.open(), like this .
The error happens because sidePanel.open() must be triggered by a user action, like clicking a button. Since creating the incognito window happens in the background without user interaction, Chrome blocks the side panel from opening.
Instead of opening the incognito window automatically, let the user click a button first. Then, in response, open the window and side panel.
Hope this helps!