How to take screenshot of a tab in chrome extension - google-chrome-extension

I am adding screenshot support to my extension, I want to take screenshot of a tab when a specific event is triggered, for example, a url is accessed. Now I am able to take screenshot of current tab using chrome.tabs.capturevisibletab, but the problem is that the event can be triggered by a tab that is not currently visible. So instead of visible tab, how can I take screenshot of any specific tab?

The method name is clear: capturevisibletab.
You can put the focus on the tab you want to snapshot, invoke the method and the restore the focus on the previous tab though.
You will need to add the <all_urls> permission in your manifest file.

Related

How do you get all visible tabs in chrome?

I need to get the tab ids of all VISIBLE tabs in chrome. Note that this is different from currently active tabs or current tab. The user will have the current tab visible, but may have another chrome browser window in the background that may be visible on screen but won't be the current tab. I need the id of that tab as well, and all tabs like it. How can I do this? Can I do this in a way that minimizes permission use (Only using activeTab if possible).
I think that first you have to retrieve all the chrome instances.
you can do this with getAll method.
Then you can loop over all instances and for each look for the active tabs.
there is a SO answer related to this, which may help
You can use chrome.tabs.query.

How to take screenshot of a whole webpage from browser in a single image

In lots of place i saw that people using long screenshot of a full webpage for presentation. I tried with snipping tool but i am not able to take screenshot of whole webpage in a single image. I want to know that how i can take long screenshot from browser like this
If you are using Google Chrome then this answer will be beneficial for you.
Just follow some simple step to take long screenshot of a webpage.
Step 1: Click the three dots, point to “More Tools,” then click on “Developer Tools.” Alternatively, you can press Ctrl+Shift+I on Windows or ⌘+Shift+I on Mac to open the Developer Tools pane.
Step 2: In the top right corner of the pane, click the three dots icon, then click “Run Command.” Alternatively, press Ctrl+Shift+P on Windows and ⌘+Shift+P on Mac.
Step 3: In the command line, type “Screenshot,” then click “Capture full-size screenshot” from the list of commands available.
The image should save automatically, but if you’re prompted to save the screenshot, select a destination on your computer, then click “Save.”
Note : This feature is ideal on websites with text-based content opposed to web apps, as it could potentially only capture the viewable screen.
For more descriptive answer go through this link
You can use this free Screen Capture tool at CtrlQ.org.
You just need to put the url of the page of which you want to take the screenshot.
For example, Here is a screenshot of your question
You can use Awesome screenshot. It's extension is also easily available for chrome. Just add it to chrome and you will have option to take screenshot as you want. Here is the link.
You can click on capture entire page option as here in the screenshot:

How to get gmail full screenshot

I'm trying to get full screenshot of HTML mail on Gmail.
Chrome extensions which like Screen Capture (by Google) does't work enough.
What should I do?
You'll not be able to take the complete screenshot of an email in Gmail default window. You need to take a different route to accomplish this i.e.
Click on the Print, it will open a new tab with Print dialogue.
Close/Cancel the Print dialogue (don't close the new tab).
Use Nimbus Screenshot or any other extension to take the screenshot of the HTML email.
Yes, Screen Capture by Google doesn't work for a long time. I recommend you Nimbus Screenshot. It is also a Chrome screenshot extension. And I just used it to get a full screenshot of HTML mail on Gmail. Hope it works for you.
I have tried everything with Nimbus but it simply wont work. Fragment Area takes the entire screenshot but only the visible part is saved rest image is blank.
Instead try clicking on the 'Print' icon on the upper right corner of your mail and save it as PDF.

Chrome extension, popup does not display correctly for dynamic popup DOM modification

I am building a chrome extension, a simple feature I want it to have is that when some clicks on the extension icon, it finds some info on the current page that my extension is visiting, and send the message from my content script to my popup, and my popup will add those info to it. now I pretty much finished all the work, there is only one problem left which is the layout of my popup does not display correctly. I have some thought about why it happens, I think it is because since the popup opens when you click on the icon, and then it finds the info on the page, and then it sends the message back to my popup, but the size of popup is already defined and displayed, so it does not rend it correctly, am I right? How should I fix it.
I think your content script should retrieve the info from the current page immediately (on load) and send this information to the background script.
The background script can store this information either in a variable, or in localStorage/Chrome storage. When opening the popup you can retrieve this information and show it immediately. This way you would avoid the racing condition.

Can I hide my extension's icon by default?

My Chrome extension doesn't need an icon - it's a one-liner extension that doesn't want to take up space on your extension bar.
How can I hide the icon by default?
Due to a change spearheaded by Google, all extensions now must have an icon in the toolbar area or the "overflow" in the menu.
Even if you don't have a browser_action, your extension will display an icon (or failing that, a tile with extension name's first letter). If you do not declare a browser_action, it will be greyed out and non-interactive, but will still be there.
The idea of this change is to provide visibility of otherwise potentially stealthy extensions ("Hey user, did you even know you have those installed?"). It's, let's put it, debatable whether it's the best approach, but that was Google's decision.
To suppress this behavior, add "converted_from_user_script": true to the extension's manifest.json. This works as of Chrome 61.
It used to be that visiting a link to a user script (ending in .user.js) caused Chrome to package up the user script as a content script extension with a generated manifest which included the converted_from_user_script key. Of course, this no longer works because all extensions (except in developer mode) now have to come from the Chrome Web Store.
Google thought it best to make the icon mandatory and I think so too, for reasons already pointed out by Xan.
Now of course you 're right, when you say that many extensions have no need for an icon, but the requirement of one still gives your extension an identity and Google still gives the user the opportunity to remove it from the toolbar. He simply has to right click the extension's icon and then choose Hide in Chrome menu.
I know, many users don't really bother to read all of the options under right click, or even right click it at all. But most of them still will make a single left click, to see if there is any option in the fancy new extension they added. You can take advantage of this by making a simple window where you point out their option of hiding the icon.
If you don't want an icon, you can omit the browser_action parameter from your manifest.json (the default_icon option is where you usually specify the icon). The browser_action section is what controls what you see in the toolbar.

Resources