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
Execade
ExecadeOP2y ago
@avi12
Avi
Avi2y 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
Execade
ExecadeOP2y ago
yes yes
Avi
Avi2y ago
?
Execade
ExecadeOP2y ago
just default with the activeTab permission
Avi
Avi2y ago
So
{
"manifest": {
"host_permissions": ["<all_urls>"]
}
}
{
"manifest": {
"host_permissions": ["<all_urls>"]
}
}
Try to change it to
{
"manifest": {
"permissions": ["activeTab"]
}
}
{
"manifest": {
"permissions": ["activeTab"]
}
}
Execade
ExecadeOP2y ago
I tried that already
Avi
Avi2y 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
Execade
ExecadeOP2y ago
Doesn't work for me, still the same error
Avi
Avi2y ago
I was able to capture a tab with this exact code Try to reload the extension That goes into background.ts
Execade
ExecadeOP2y ago
now it got this error Tabs cannot be edited right now (user may be dragging a tab).
Avi
Avi2y ago
GitHub
GitHub - avi12/test-capture-visible-tab
Contribute to avi12/test-capture-visible-tab development by creating an account on GitHub.
Avi
Avi2y ago
@Execade Let me know once you've figured it out 🙂
Execade
ExecadeOP2y ago
well something must have been on the wrong version
Arcane
Arcane2y ago
@Execade has reached level 3. GG!
Execade
ExecadeOP2y ago
when I copied the dependencies from you it works is it because I didn't have web-ext ?
Avi
Avi2y 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
Avi2y 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.
Execade
ExecadeOP2y ago
yeah sucks when something works and then it doesn't work anymore
Avi
Avi2y ago
That's why devs, and frontend devs in particular have high salaries 😁
Execade
ExecadeOP2y ago
wait nvm it doesn't work
Avi
Avi2y ago
How are you trying to capture the tab? CSUI? Popup? chrome.action? I'm pretty sure captureVisibleTab() must run in the background script
Execade
ExecadeOP2y ago
huh when I put it in a command it works
Avi
Avi2y 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
Execade
ExecadeOP2y ago
I wanted to put it in onActivated but that doesn't work I guess
Avi
Avi2y ago
Wdym? Send here the snippet you've tried
Execade
ExecadeOP2y ago
just the capture function inside the onActivated event I can send it tomorrow
Avi
Avi2y 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
Avi2y 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
Avi2y ago
I updated the code here
Execade
ExecadeOP2y 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
Avi2y 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
Avi2y 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);
Execade
ExecadeOP2y ago
makes sense
Avi
Avi2y ago
Lmk what progress you've made Right now I'm on my phone as it's almost 2:00 a.m. 🙃
Execade
ExecadeOP2y ago
good night 🙂
Avi
Avi2y ago
How's your progress? Did you/are you going to remove the setTimeout?
Execade
ExecadeOP2y ago
currently I got stuck on another problem where saving the image doesn't work
Avi
Avi2y ago
Use chrome.downloads
dinislam
dinislam4mo 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
Avi4mo 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.
Execade
ExecadeOP4mo 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
dinislam4mo 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
dinislam4mo ago
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
Avi4mo 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
Avi4mo 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
The "activeTab" permission  |  Chrome Extensions  |  Chrome for Dev...
How to use the activeTab permission in your Chrome Extension.
No description
Execade
ExecadeOP4mo ago
what error did you get? in some cases you need to use setTimeout as you cant capture instantly
Avi
Avi4mo 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
Execade
ExecadeOP4mo ago
well it works for me
Avi
Avi4mo ago
Can you make a repo to demonstrate a POC?
Want results from more Discord servers?
Add your server