I am trying to use this code modified to use the background.js page instead of popup.js to handle running Chrome API and building the full screen Canvas image.

The reason is that my extension shows a Modal window on the website. Because my app also allows user to select a region for a screenshot and than returns that image in the form of filling in a form filed and showing preview for a Bookmarking app.

If I was to use the Popup.js instead, it would close my Bookmark app when user chose to do a selection screenshot and then would be unable to re-open that window again to fill in the new data captured.

So I moved to a Modal window in a content.js file.

My problem now with trying to use this code in my content script and a Background.js file is that on 1st iteration Background should create the canvas. On 2nd, 3rd, etc...the code errors as it cannot find the canvas!

Apparently Background handles this differently.

Any ideas how I might get this working?

For a little while now, I haven't been able to take screenshots and have had to resort to other tools. They're terribly bloated and not as nice as this one so I figured I'd create an issue to see if a fix could be had.

I've tried both local URLs for development (http://local.something) or remote sites (https://google.com) and they both result in:

Screen capture in progress, your finished image will open in a new window once completed. Please wait for the progress bar to finish.

Uh oh, something went wrong! Try reloading the page, verifying javascript is enabled, and running this again.

If the problem persists, please report the error in the Chrome webstore. Please include the URL you tried it on and the version of Chrome.

Here's what console spits out:

page.js:89 fullHeight 4656 fullWidth 1484
page.js:90 windowWidth 1484 windowHeight 1339
page.js:91 xDelta 1484 yDelta 1139
page.js:94 arrangements [0,3317], [0,2178], [0,1039], [0,-100]

I checked to be sure my Chrome is up to date and I appear to be on the latest:

Version 53.0.2785.89 (64-bit)

Let me know if I can provide any additional details. Thanks!

I thought this was the app that already did it, but I guess not, or I can't find out how. Problem: When you have a webpage with a gradient background that does NOT scroll with the page, when you take a full page screenshot in "sections" ...you end up with a repeating background that goes from dark to light, to dark, to light, to dark, to light...over and over again, and it looks crappy. Most sites with this type of background have a general single color underneath the background image as a fall-back, and that is the desireable way to capture the full page on this type of thing...I had something that did it once, but can't find what I did them with.

(ref: https://worship101.org for one example)

Looks like in incognito mode we need to open the image in a non-incognito window.

Maybe a result of changing from window.open to chrome.tabs.create?
ca5b989#diff-d8c11c63dfd474a75f05fbbdba0889f8R268

Doesn’t appear to be an option to open a tab in a non-incognito window? https://developer.chrome.com/extensions/tabs#method-create

Potentially might have to identify incognito mode and tell the user to open the URL in a non-incognito window? (ugh…)

The following tweet is inside a modal taller than the page and the extension doesn’t make it scroll:

https://twitter.com/feministculture/status/711056750288318464

via web store support - wooo weee - Mar 29, 2016

some blocks are repeated.

Hey

I just installed your Chrome extension and like other extensions I have tried it repeats the left sidebar menu in WordPress.

This is my favorite extension and really, great work!

Lately I've been encountering horizontal lines where the screenshots are being merged.

The page over http://mrcoles.com/full-page-screen-capture-chrome-extension/ shows multiple people having the issue and no solution. (ctrl+f 'black')

I took it upon me to investigate and turns out it's due to Windows' moniter scaling being other than 100%.

E.g.

• Moniter scaling 100%
  

• Moniter scaling 125%
  

• Moniter scaling 150%
  

What's the limitation from the webstore to allow your extension to capture the screen of another extension? I made an extension called Destiny Item Manager and users have been asking for a screen shot feature. I tried yours and got the blocked message.

Is it just a permission that has to be given to enable interaction with Chrome extensions?

I am using this extension for a project. It works quite well.
While going through the code a saw a function "splitNotifier". I realise that this will happen when there are more than one screenshots. But I haven't been able to figure out the scenario where this will happen. Please explain this.

extensions::uncaught_exception_handler:8 Error in event handler for (unknown): TypeError: Cannot read property 'size' of undefined
at chrome-extension://ldacmkkiekeppnjkkmffnkfklhkpmcih/scripts/api.js:291:27
at chrome-extension://ldacmkkiekeppnjkkmffnkfklhkpmcih/scripts/api.js:268:11
at chrome-extension://ldacmkkiekeppnjkkmffnkfklhkpmcih/scripts/api.js:41:7

Very nice screen capture app, but I was just wondering if you might know how to recording screen as well .

Since you mentioned in the README that you couldn't test, I thought I should (happily) report:

• Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36 [Chromium actually]

I don't think "notifications" needs to be in the manifest permissions.

via flyingrhino - http://mrcoles.com/full-page-screen-capture-chrome-extension/#comment-3063645445

Hi, Firstly - LOVE YOUR WORK !!!
Thank you very much for making our lives so much happier with this wonderful extension.

Secondly, a small bug - Using Vivaldi browser (win8.1 and Linux mint 17.3 xfce), when I make the capture, it always has the pacman message box at the top right of the final image.
A possible solution is to capture the first part of the screen BEFORE displaying the pacman , then display it as you scroll.
This can be implemented by adding a small delay before displaying the pacman. In order to satisfy users who are not affected by this bug, the delay can be user-configurable in the settings from 0 mSec to ?? mSec .

Bug appears on every page I try to capture.
If you need me to upload/email you example screenshots, please feel free to contact me.

Thanks again !

Currently you can only capture what's displayed on screen. It'd be cool to allow capturing the page in its entirety, not just what's visible to the user.

As suggested here #19

For example:

var node = document.createElement('style');
node.innerHTML = '* { background-attachment: static !important; } .takeover { position: absolute !important; } body { background: black }';
document.head.appendChild(node);

Currently the application has a buffer for capturing the top of the screen in order to try and not repeat fixed position content in the header. There is nothing to handle this issue with footers.

Example pages with this problem:

• http://www.designboom.com/design/interview-with-graphic-designer-gareth-hague-06-23-2014/
• https://www.grafik.net/category/talent/kathy-lam (some other issues that might be tough to stop on this one)

Hi,
and thanks for a great chrome extension!

I have one feature request. It would be really great if it was possible to include the web browser outside the image. I use it primarily to show users how their web page looks and that would make it so simple to show :)

Pretty much just need the same functionality in the firefox plugin grabthemall, where you can provide the plugin with a new line delimited file containing the url's you wish to grab and it then does so automatically dumping the result in to an output directory.

Hello MrColes!

Looks like your most excellent Full Page Screen Capture Ver 2.2 is not compatible with Chrome V 62.0.3202.09 (Official Build) (64-bit) on Windows 7.

When I click on the camera icon I get:

Screen capture in progress, your finished image will open in a new window once completed. Please wait for the progress bar to finish.

Uh oh, something went wrong! Try reloading the page, verifying javascript is enabled, and running this again.

If the problem persists, please report the error in the Chrome webstore. Please include the URL you tried it on and the version of Chrome.

thank you for your great works.
I'v met a problem: when i open pdf file in chrome, it's multiple pages, but this capture tool just get one page instead of multiple pages with auto scroll.

I'v noticed that, the page's html has just one "embed" element and it occupies whole body, so document.body.clientHeight....etc is always 1 page height, but the embed element can scroll internally.

hope this can help you fix it if you have time.

Chrome version 59.0.3071.86

Via chrome web store support tab.

Hi, I'm using this extension to rasterize svg images. And I found out that on some svg files, especialy on big ones, the bottom-left part of the raster image is corrupted. Seems as some part of the image is moved down.

Original svg is here: https://goo.gl/oGN5bG

Unchecked runtime.lastError while running tabs.captureVisibleTab: Failed to capture tab: unknown error.

chrome.tabs.captureVisibleTab throws this error,why?

On this page, http://jblevins.org/projects/markdown-mode/ using Chrome 30.0.1599.69 on Mac OS X 10.8.4 document.width is somehow undefined. I open the JS console and the document object has no width (or height) attribute.

This might be relevant https://code.google.com/p/chromium/issues/detail?id=113528

As a result, arrangements is empty, the background (popup) script tries to do its thing, but screenshot.canvas is undefined. The popup console window shows the error. The extension popup just sits there.

Hi I would like to ask - is possible to set up jpg printscreen instead of png as default? I haven't found any settings. Thanks a lot it's really a great plugin
K.

Chrome on a 15" retina MacBook Pro

For some reason, in v0.13, I’m only getting half of a page, width-ways. take a look at this screenshot of my GitHub home screen:

Hi,

I have been looking at the project to try some modifications. Maybe I am lacking fundamental understanding of Chrome extensions but I am unable to find the directory (and its content) 'capture' in the repository.
In Chromes dev tools, I can see it but do not know how to get there to make changes.

Can someone give me a pointer?

Not sure why PNG image generated can not be directly copy and pasted into Microsoft Word - what gets pasted is a small blank square.

I have to either paste into MS Paint and then copy and paste from that into Word, or save the PNG first and go from there.

When I test a PNG file from a regular website, it doesn't have this problem, what gives?

Hi,

the extension doesn't seem to work on pages with framesets (it doesn't scroll at all).

I tried inside a TYPO3 backend.

It would be an option to be able to select a frame to create a screenshot of, if that's possible.

Besides that, it's still a great tool for all webpages that are less than 15 years old ;-).

Best and thanks,
Benni.

Here are the steps to reproduce the crash:

1. Assign a keyboard shortcut for 'Activate the extension'
2. Hide the browser action by right-clicking it and selecting 'Hide Button'
3. Use the previously assigned keyboard shortcut

Expected behavior:
Don't show the popup, but still capture the page

Hiding the scrollbar would be a nice additional touch. For now I apply the following rule manually.

::-webkit-scrollbar { width: 0 !important }

why (also v 0.0.9) in your opinion create repeated screen for that link?

(i attach the result)
(as you can see, it repeat the on top screen during all the height of the page)

I am doing some server-side rendering work with ReactJS and wanted to take a screenshot of a page as it renders with JavaScript disabled. The chomper UI comes up but it just doesn't show any progress. I was confused for a minute and then realized...

Hello,

Many developers and users that care about security in Chrome prefer open source extensions, when this is not clearly stated the extension might get dismissed wrongfully.

Please add a link :-)

I've run a couple of full page scrolling captures which worked fine, but a recent one just results in a blank image. Something I'm doing?

Was capturing this page:https://twitter.com/GAIN_Torbay/followers using Chrome Version 37.0.2062.120 m

Hi
I'd like your extension and the way you share it with community. Why in your opinion I can create screenshots but it seems that they are broken and I see only left side of the screen?

example

Hi sir! How are you?

Can you please add the ability to save screenshots from the same website under a different name? I like to compare screenshots of the same website, but you can only create one screenshot from each site. As soon as you create another, the first one can't be saved anymore even though it is opened in it's own tab.

Two questions:

1. Do you know if this extension has any issues with CORS in terms of using canvas.toDataUrl on tainted vs non-tainted images?
2. Do you think it's at all possible to capture iframe content? Most of what I read makes it seem impossible.

Eg, http://www.quackit.com/html/templates/frames/frames_example_1.html.

document.documentElement.scrollHeight, etc are all window.innerHeight.

For me since version 52.0.2726.0 of chrome canary (64-bit) the extension seems to work up to the point where a new tab opens to display the image but no image appears and tab is stuck with a spinner indicator. Any ideas?

for example to include a timestamp instead of the web address.

When using Device mode to simulate mobile or tablet, the screenshots often have "breaks" between chunks of the page view.

Likely caused by custom zooms when emulating a screen.

Via report from web store support:

Hi - thank you for a great product, I use it every day! Would be amazing if full page screen shots could be taken within the chrome inspect element device mode. I often need to capture mobile layouts and when I do so using this app there are large white gaps between the content.

I'm thinking about refactoring the code to make it easy for other extensions to capture pages. I thought I'd outline the approach here to see if you're interested & if it sounds reasonable.

I'd move the popup JS that talks to the content script into a separate file. There'd be a function that you'd call to ask for a capture of the current tab. You'd pass it a callback, which would be called with the image (the blob, I guess). The current extension could do its current thing, just using the extracted code as an API.

Then if someone else (me, for example) wanted to integrate screen captures, they'd just grab that extracted JS and the page.js file, etc.

I'd probably replace the communications with a named port that gets opened and closed so as to be isolated from any other comms going on in an extension that incorporated the capture API code.

It'd also be possible to just make a new github repo with only the code for the capture functionality, and no extension. Then this extension and others could use a git submodule to have access to the code. For now though I think it's fine just to separate the capture code from the usage of the result, the pac-man progress indicator, etc.

I want to add capture to an extension I have. So I'm going to do this kind of work in any case, but it'd be much better to not simply fork the existing code (although that would be quicker in the short term :-))

Thoughts?

Thanks for this nice extension.

I think it is a very quick alternatives to other more complicated extension.
Though it lack the ability to launch with a keyboard combination, which is useful, when for example you want to act on screen and copy what it show.

The extension fails for this page: http://urbanglasgow.co.uk/ftopic1654-0-asc-0.php

This is the first page of a forum thread, it's a long one, with lots of images. The extension goes through the usual motions but when complete a blank tab is opened. The URL of the tab is the usual extension temporary filename, but there's nothing on the actual canvas—so nothing to save.

It works just fine for page 2 of that thread, which is considerably shorter!

I'm assuming that this is something to do with the length of the page?