🧩 Plasmo Developers•2y ago

captureVisibleTab()

when I use chrome.tabs.captureVisibleTab() I get this error Error: Either the '<all_urls>' or 'activeTab' permission is required. but I have both of those permissions in the manifest.json

50 Replies

ExecadeOP•2y ago

@avi12

Avi•2y ago

Did you try to have only activeTab? I didn't specifically use captureVisibleTab, but I did use other tab functions in the past Oh wait What's your manifest? I'm assuming you're trying to run the function from background.ts

ExecadeOP•2y ago

yes yes

Avi•2y ago

ExecadeOP•2y ago

just default with the activeTab permission

Avi•2y ago

{
  "manifest": {
    "host_permissions": ["<all_urls>"]
  }
}

{
  "manifest": {
    "host_permissions": ["<all_urls>"]
  }
}

Try to change it to

{
  "manifest": {
    "permissions": ["activeTab"]
  }
}

{
  "manifest": {
    "permissions": ["activeTab"]
  }
}

ExecadeOP•2y ago

I tried that already

Avi•2y ago

chrome.action.onClicked.addListener(async tab => {
  await chrome.tabs.create({
    url: await chrome.tabs.captureVisibleTab(tab.windowId)
  });
});

chrome.action.onClicked.addListener(async tab => {
  await chrome.tabs.create({
    url: await chrome.tabs.captureVisibleTab(tab.windowId)
  });
});

That's my manifest @Execade

ExecadeOP•2y ago

Doesn't work for me, still the same error

Avi•2y ago

I was able to capture a tab with this exact code Try to reload the extension That goes into background.ts

ExecadeOP•2y ago

now it got this error Tabs cannot be edited right now (user may be dragging a tab).

Avi•2y ago

https://github.com/avi12/test-capture-visible-tab

GitHub

GitHub - avi12/test-capture-visible-tab

Contribute to avi12/test-capture-visible-tab development by creating an account on GitHub.

Avi•2y ago

@Execade Let me know once you've figured it out 🙂

ExecadeOP•2y ago

well something must have been on the wrong version

Arcane•2y ago

@Execade has reached level 3. GG!

ExecadeOP•2y ago

when I copied the dependencies from you it works is it because I didn't have web-ext ?

Avi•2y ago

Everything's possible with Plasmo 😁 A few days ago I pushed an update to my 100K extension come on that day I was able to run

plasmo dev --target=firefox-mv3

plasmo dev --target=firefox-mv3

Then today I pursued updating another extension of mine, but discovered that this exact command breaks After a few hours of banging my head, I discovered that the issue was the Plasmo version, which surprisingly didn't cause an issue on the popular extension

Avi•2y ago

Nope, web-ext is simply a tool by Mozilla that makes it easy to debug and package extensions You can just as easily install the extension on your daily driver Chrome and it should work the same https://npm.im/web-ext

npm

web-ext

A command line tool to help build, run, and test web extensions. Latest version: 7.5.0, last published: a month ago. Start using web-ext in your project by running npm i web-ext. There are 26 other projects in the npm registry using web-ext.

ExecadeOP•2y ago

yeah sucks when something works and then it doesn't work anymore

Avi•2y ago

That's why devs, and frontend devs in particular have high salaries 😁

ExecadeOP•2y ago

wait nvm it doesn't work

Avi•2y ago

How are you trying to capture the tab? CSUI? Popup? chrome.action? I'm pretty sure captureVisibleTab() must run in the background script

ExecadeOP•2y ago

huh when I put it in a command it works

Avi•2y ago

So if you're trying to capture from a popup/content script, you'd need to ping the background first, e.g.

// popup
function capture() {
  chrome.runtime.sendMessage("capture");
}

// popup
function capture() {
  chrome.runtime.sendMessage("capture");
}

// background
chrome.runtime.onMessage.addListener(async action => {
  if (action === "capture") {
    const [tab] = await chrome.tabs.query({ currentWindow: true, activeTab: true });
    const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId);
  }
});

// background
chrome.runtime.onMessage.addListener(async action => {
  if (action === "capture") {
    const [tab] = await chrome.tabs.query({ currentWindow: true, activeTab: true });
    const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId);
  }
});

NGL I don't 100% remember the chrome.tab.query API

ExecadeOP•2y ago

I wanted to put it in onActivated but that doesn't work I guess

Avi•2y ago

Wdym? Send here the snippet you've tried

ExecadeOP•2y ago

just the capture function inside the onActivated event I can send it tomorrow

Avi•2y ago

I was able to get it to work with onActivated when used <all_urls> Though keep in mind that if you're using onActivated alone, from my experience it only works when navigating between tabs, i.e. it doesn't trigger when clicking a URL

Avi•2y ago

If you want it to trigger when clicking a URL, you need to add a onUpdated listener https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated

Chrome Developers

chrome.tabs - Chrome Developers

Build the next generation of web experiences.

Avi•2y ago

I updated the code here

ExecadeOP•2y ago

now I found a workaround how to make it work all the time

chrome.tabs.onActivated.addListener(async (activeTab)=>{
    setTimeout(async() => {
        await chrome.tabs.create({
            url: await chrome.tabs.captureVisibleTab()
          });
     }, 100);
  
})

chrome.tabs.onActivated.addListener(async (activeTab)=>{
    setTimeout(async() => {
        await chrome.tabs.create({
            url: await chrome.tabs.captureVisibleTab()
          });
     }, 100);
  
})

Avi•2y ago

TBH you shouldn't use setTimeout unless this is your last resort, as it could result in unintended consequences Check out https://youtu.be/8eHInw9_U8k for more info

Google Chrome Developers

YouTube

Scheduling Tasks - HTTP 203

Tasks, microtasks, nanotasks... JavaScript has it all. Or maybe not. What are they? How do you use them? What do they even mean? Surma rips off Jake’s event loop talk and tells you all about scheduling callback functions in JavaScript. Jake’s event loop talk → https://goo.gle/jake-event-loop JavaScript Counters the Hard Way → https://goo.gle/3...

Avi•2y ago

It's better to extract the anonymous function into a named one and reuse it in multiple listeners so your code becomes predictable Like

chrome.tabs.onActivated.addListener(captureScreenshot);
chrome.tabs.onUpdated.addListener(captureScreenshot);

chrome.tabs.onActivated.addListener(captureScreenshot);
chrome.tabs.onUpdated.addListener(captureScreenshot);

ExecadeOP•2y ago

makes sense

Avi•2y ago

Lmk what progress you've made Right now I'm on my phone as it's almost 2:00 a.m. 🙃

ExecadeOP•2y ago

good night 🙂

Avi•2y ago

How's your progress? Did you/are you going to remove the setTimeout?

ExecadeOP•2y ago

currently I got stuck on another problem where saving the image doesn't work

Avi•2y ago

Use chrome.downloads

dinislam•5mo ago

hey folks @avi12 @Execade , I've just been running into the same-ish issues. I'm trying to capture the tab when that tab's CS sends a message to the SW. Turns out you need <all_urls> host permission for that, and not just the activeTab permission. Apparently, the activeTab is only sufficient if the user invokes the extension directly.

Avi•5mo ago

AFAIK <all_urls> and activeTab are never needed at the same time In fact, if you use the former it automatically includes the letter, because it implies that not only that you need to access the active tab but also every other possible domain The downside of using the former is that if your extension is already published, it will cause the user's Chrome to disable it and prompt the user to manually re-enable it Generally speaking, if you send a message from the content script to the background script while having activeTab, you can manipulate that tab, as well as capture it, e.g.

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === "capture") {
    const imageUrl = await chrome.tabs.captureVisibleTab(sender.tab.windowId);
  }
});

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === "capture") {
    const imageUrl = await chrome.tabs.captureVisibleTab(sender.tab.windowId);
  }
});

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab

MDN Web Docs

tabs.captureVisibleTab() - Mozilla | MDN

Creates a data URL encoding the image of an area of the active tab in the specified window. You must have the or activeTab permission.

ExecadeOP•5mo ago

Interesting I recently remembered this and somehow it works I need both for it to work but don't ask why not possible because you get the "user is dragging tab.." error onUpdate works but only when the url changes

dinislam•5mo ago

I literally tried this and it didn't work. I only want to capture the tab when a content script sends a message to the SW

dinislam•5mo ago

https://stackoverflow.com/questions/35985266/capture-chrome-tab-without-browse-action @avi12

Stack Overflow

Capture chrome tab without browse action

I have a simple method which captures current tab, and it works only when this method triggered by click on extension button (i.e. browserAction). But when I use this method in setTimeout event it

Avi•5mo ago

This question is from 2016, might not be applicable to Manifest V3 I'll admit that I haven't actually tried, I typed it on my phone and assumed it works 😅

Avi•5mo ago

I coded a small extension to test it, and indeed I was not able to invoke the capture from the content script Furthermore, this is what the documentation states: In addition, I was only able to get a media stream ID with getMediaStreamId Despite having "permissions": ["tabCapture"], I wasn't able to call capture

Chrome for Developers

chrome.tabCapture | API | Chrome for Developers

Chrome for Developers

The "activeTab" permission | Chrome Extensions | Chrome for Dev...

How to use the activeTab permission in your Chrome Extension.

ExecadeOP•5mo ago

what error did you get? in some cases you need to use setTimeout as you cant capture instantly

Avi•5mo ago

To my understanding, according to the screenshot I shared, you cannot work around it; it's a limitation in the API You will have to invoke the ext in one of the 4 aforementioned ways to take the screenshot

ExecadeOP•5mo ago

well it works for me

Avi•5mo ago

Can you make a repo to demonstrate a POC?

Gaming

Programming

captureVisibleTab()