OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to open Chrome Extension's side panel clicking a button inside the popup?

  • Thread starter Thread starter prox
  • Start date Start date
P

prox

Guest
I have a chrome extension and want to use the recently added chrome.sidePanel API to open the side panel and show my chrome extension there when a user click a button inside the extension's popup.

I have tried the following code:

App.tsx

Code:
const handleOpenSidePanel = async () => {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    const currentTabId = tabs[0].id;
    chrome.runtime.sendMessage({ type: 'openSidePanel', tabId: currentTabId });
  });
}

background.js

Code:
chrome.runtime.onMessage.addListener((message, tab) => {
  if (message.type === "openSidePanel") {
    chrome.sidePanel.open({ windowId: tab.windowId});
  }
});

manifest.json

Code:
"permissions": [
  "sidePanel",
  "tabs"
],
"side_panel": {
  "default_path": "index.html"
}
...

When I click on the button, I get the following error and the side panel doesn't open:

Uncaught (in promise) Error: At least one of "tabId" and "windowId" must be provided

<p>I have a chrome extension and want to use the recently added <a href="https://developer.chrome.com/docs/extensions/reference/api/sidePanel" rel="nofollow noreferrer">chrome.sidePanel API</a> to open the side panel and show my chrome extension there when a user click a button inside the extension's popup.</p>
<p>I have tried the following code:</p>
<p>App.tsx</p>
<pre><code>const handleOpenSidePanel = async () => {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
const currentTabId = tabs[0].id;
chrome.runtime.sendMessage({ type: 'openSidePanel', tabId: currentTabId });
});
}
</code></pre>
<p>background.js</p>
<pre><code>chrome.runtime.onMessage.addListener((message, tab) => {
if (message.type === "openSidePanel") {
chrome.sidePanel.open({ windowId: tab.windowId});
}
});
</code></pre>
<p>manifest.json</p>
<pre><code>"permissions": [
"sidePanel",
"tabs"
],
"side_panel": {
"default_path": "index.html"
}
...
</code></pre>
<p>When I click on the button, I get the following error and the side panel doesn't open:</p>
<p><code>Uncaught (in promise) Error: At least one of "tabId" and "windowId" must be provided</code></p>
 

Latest posts

U
Replies
0
Views
1
user3658366
U
G
Replies
0
Views
1
Giampaolo Levorato
G
M
Replies
0
Views
1
Marcelo Rodrigo Nascimento
M
Top