Issues using the captureVisibleTab API using side panel

4 views

Skip to first unread message

Mikael Gotlib

unread,

9:50 AM (3 hours ago) 9:50 AM

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.

Reply all

Reply to author

Forward

0 new messages