Issues using the captureVisibleTab API using side panel

Mikael Gotlib

unread,

Jul 22, 2024, 9:50:28 AM7/22/24

to Chromium Extensions

I'm trying to build an chrome extension that captures and displays screen shots using a side panel.

I've managed to successfully use the following code from a popup. However when I migrate the same code across to run from a side panel I'm getting what appears to be permission errors. However, I believe I've provided all the right permissions.

I've tried various combos, including calling the API via the service worker and passing it back, but it all results in the same error.

I've included the code below:

manifest.json

{
  "manifest_version": 3,
  "name": "SidePanel - Screenshot Extension",
  "version": "1.0",
  "description": "Take Screenshots",
  "minimum_chrome_version": "116",
  "background": {
    "service_worker": "service-worker.js"
  },
  "side_panel": {
    "default_path": "sidepanel-global.html"
  },
"permissions": ["tabs","activeTab", "sidePanel"],
  "icons": {
    "16": "images/icon-16.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },

  "action": {
    "default_title": "Launch DoDid"
  }

}

sidepanel-global.html

<!DOCTYPE html>
<html>
<head>
  <title>Screenshot Extension</title>
  <script src="screenshot.js"></script>
</head>
<body>
  <button id="capture">Capture Screenshot</button>
  <div id="screenshotContainer"></div>
</body>
</html>

Screenshot.js

document.addEventListener("DOMContentLoaded", function() {
    const captureButton = document.getElementById("capture");
    const screenshotContainer = document.getElementById("screenshotContainer");
  
    captureButton.addEventListener("click", function() {
      chrome.tabs.captureVisibleTab(function(screenshotDataUrl) {
        const screenshotImage = new Image();
        screenshotImage.src = screenshotDataUrl;
        screenshotContainer.appendChild(screenshotImage);
      });
    });
  });

I get the following error message:

Unchecked runtime.lastError: Either the '<all_urls>' or 'activeTab' permission is required.

Jackie Han

unread,

Jul 22, 2024, 6:51:39 PM7/22/24

to Mikael Gotlib, Chromium Extensions

This is because the "activeTab" permission in sidepanel behaves differently than in popup page.

I reported as issue last year: https://issues.chromium.org/issues/40916430

You can workaround with "<all_urls>" host permission.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/b6fa440e-3811-453b-83a8-58b7b282046fn%40chromium.org.

Mikael Gotlib

unread,

Jul 24, 2024, 4:26:00 AM7/24/24

to Chromium Extensions, Jackie Han, Chromium Extensions, Mikael Gotlib

Thanks Jackie, but I was under the impression "<all_urls>" was deprecated. I did already try that never the less, but I get the following error, when I add it When I add it to "permissions" in the Manifesto

Permission '<all_urls>' is unknown or URL pattern is malformed.

I found the below discussion on the same topic, which you appear to have been involved in. It looks like the conclusion from that conversation was that it's a bug...if you've since found a workaround I'd really appreciate it if you could provide a bit more details,

https://groups.google.com/a/chromium.org/g/chromium-extensions/c/DET2SXCFnDg/m/wctQuRgFAAAJ

Thanks,

Mikael

Jackie Han

unread,

Jul 24, 2024, 4:26:24 AM7/24/24

to Mikael Gotlib, Chromium Extensions

I was under the impression "<all_urls>" was deprecated. I did already try that never the less, but I get the following error, when I add it When I add it to "permissions" in the Manifesto

"host_permissions": ["<all_urls>"],

👆 This is host permissions in MV3.

Mikael Gotlib

unread,

Jul 27, 2024, 1:22:12 AM7/27/24

to Jackie Han, Chromium Extensions

You're an absolute legend, thank you so much - I spent sooo much time trying to figure out why it wasn't working!

Create your WiseStamp email signature

‌

Reply all

Reply to author

Forward