Giter Club home page Giter Club logo

blipshot's Introduction

⚠️ Note: this extension is not under active development anymore.
See: https://github.com/folletto/Blipshot/issues/28
⚠️ Note: the extension on the store is from a different owner, originally from this codebase
Ref: https://chrome.google.com/webstore/detail/mdaboflcmhejfihjcbmdiebgfchigjcf

Blipshot - Google Chrome Extension

Real fast and simple one-click full-page screenshots with support for drag & drop. BSD Licensed.

WHAT IS BLIPSHOT

Blipshot is a one-click screenshot extension: just click on the icon and the page screenshot will be created: you can then drag'n'drop it wherever you want. Why wasting time if you just want a screenshot? ;)

This extension works on Windows, Mac and Linux.

REUSABLE LIBRARIES

This extension contains two reusable libraries:

  • Screenshotter - Screenshotting a full page in Chrome is a little difficult since there's no internal function to do that. There are various workarounds and Blipshot contains an implementation of one of these. The screenshotter[.DOM].js library (2 files) is designed to be as reusable as possible, please do it if you want to make full screen screenshots, until Chrome will implement full page screenshot in its core (Bug #45209).
  • Blanket Style Set - A small library, packed to be used in a Chrome extension and with minimal client page impact, that allows to reset and set back a specific CSS property to all the DOM nodes. Used by Blipshot as a workaround for fixed positioned elements. Thanks to @guille for the original code.

KNOWN LIMITATIONS

  • Blipshot can't screenshot the Chrome Extensions website (Google policy)
  • Blipshot can't screenshot a page loaded before it was installed (Chrome limitation)
  • Waiting for Google to fix Bug #45209 now Bug #469663: whole tab screenshot
  • Waiting for Google to fix Bug #69227: data URL crashes

TODO

  • Fix horizontal scrollbar evaluation (now it assumes that the page hasn't the scrollbar)

MAY DO

  • Try to find a faster way to grab screen parts (directly to canvas?)
  • Store images in a local WebSQL database for late retrieval
  • Find a way to "download" them in a block (zip?)

CHANGELOG

  • 1.2.4 (08/08/2021)

    • Fixed Chrome 92 issue #25 by introducing throttling. Capturing is now slower. Thanks Chrome.
    • Fixed position:fixed not being reset to avoid repetitions
  • 1.2.3 (29/08/2018)

    • Fixed "day" in file name (was: weekday) #19.
  • 1.2.2 (02/10/2017)

    • Fixed scrolling due to change in API behaviour in Chrome 61 (scrollingElement), see #17.
  • 1.2.1 (06/08/2017)

    • Limit height to 32766px due to Chromium/Skia own limitations.
    • Show error message if image generated has issues.
    • More reliable height calculation for all pages.
  • 1.2 (30/03/2017)

    • Implemented click to download instantly.
    • Added check if the script is loaded.
    • Workaround for Chrome blocking drag'n'drop on HTTPS sites (not ideal, no nice name).
    • Increased filenames "precision" by adding seconds to the name.
    • Moved HTML to separate template.
    • Slight visual tweaking.
  • 1.1.1 (24/08/2014)

    • Updated icons.
  • 1.1.0 (24/08/2014)

    • Fixed: Added code to workaround pages with fixed elements. This should allow screenshotting a number of pages with fixed elements (some will still have repeating elements). This has been built as a reusable library (blankedStyleSet.js). Thanks @guille.
  • 1.0.6 (12/04/2014)

    • Fixed: Changed permission to <all_urls> to workaround a Chrome change / bug.
  • 1.0.5 (14/01/2013)

    • Fixed: WebKitBlobBuilder was deprecated, using Blob instead. Thanks to @ble for the code snippet.
    • Updated: Manifest V2.
  • 1.0.4 (20/02/2012)

    • Fixed: re-introduced page names and timestamp on file names.
  • 1.0.3 (19/02/2012)

    • Fixed: added workaround to screenshot big pages (thanks to @ble). It's a workaround for Chrome Bug #69227.
    • Added info message when you try to screenshot a Chrome Store page (it's not allowed).
  • 1.0.2 (16/08/2010)

    • First public release.

LICENSE

Copyright (C) 2010-2021, Erin Casali
Licensed under BSD Opensource License (free for personal and commercial use)

Time is very slow for those who wait.

blipshot's People

Contributors

ble avatar folletto avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blipshot's Issues

Screenshot only of visible viewport

Does this still work for full page screenshots? Every-time I use the extension it snaps the first frame and shows it in the top right corner of screen and doesn't try to scroll or anything?

Full screen Blipshot bug for luddite

Hi there, I use Blipshot a lot for work and it's suddenly not taking the whole page, just the visible. I see a thread about this but not being technical none of it or the links makes sense. How can I resolve this as a stupid person? Thanks in advance!

Bug: drag'n'drop of pageshot thumbnail to Finder (filesystem) fails due to permission issues

Bug description

If one drags the thumbnail of the created pageshot and drops it somewhere in the filesystem (in the Mac Finder) a file with the proper naming scheme "pageshot of '<title>' @ " is written, but it is empty, has a file size of 0 bytes.

After the drag'n'drop action Chrome reveals the status bar, and shows the file like other file downloads. But in it's second row the troubled BlipShot file states "Failed — Blocked".

Reproducability

My conclusion

Very likely this is the bug condition:
If the protocol of a webpage is HTTPS then BlipShot fails, if it's HTTP then BlipShot works.

The permission issue seems to have nothing to do with the target (filesystem) but with the source (website), more specifically the scheme (HTTPS). And also nothing with the content type of the side, or a web browser plugin / extension conflict. The protocol raises the bug condition!

Target

I tried different locations on my computer. ~/Desktop, ~/Downloads, etc. They all had correct file permissions. Could not figure out any pattern.

Source

I had troubles reproducing this bug, sometimes BlipShot worked as expected and sometimes it failed with drag'n'drop to filesystem.

Success on i.e. http://origami.design/
Failure on i.e. https://www.flinto.com/

I tried more systematically. And then it occurred to me: It's the protocol which decides whether it works or not!

Affected versions

  • Blipshot 1.1.1 (currently up to date)
  • Chrome 54.0.2840.98 (currently up to date)
  • OS: Both on OS X 10.9 Mavericks as well as on macOS 10.12 Sierra

Workaround

Right click the troublemaking file, then select "Save image as…"
This works, but you get an ugly filename like 3c428027-8d8e-43c0-a02d-441a5700664d.png and loose the more usable file naming scheme.

Automatically hide sticky elements when scrolling to take a screenshot

This affects many websites, but for me, the main problem are sites from the Stack* family. All of them feature a similar layout, with a sticky header that is always glued to the top of the screen. The problem is that this header gets repeated in the screenshot multiple times, more often than not hiding content behind it, e.g.

image

You can test this yourself by taking a screenshot of https://stackoverflow.com/questions/12503871/removing-path-and-extension-from-filename-in-powershell.

The workaround I use is to simply right click the header, click "inspect element" and then press the Del key to quickly remove it completely from the HTML before taking the screenshot. It would however be nice if the extension was able to do something like this automatically (or better, keep the header only on the top of the screenshot).

Bug: Wrong day in filename date

The day in the filename is off by a semi-random number of days.

I.e, screenshots taken today, the 28th of August 2018, are named pageshot of 'WFM' @ 2018-08-02-1016'57.png, but screenshots taken on the 24th were named pageshot of 'WFM' @ 2018-08-05-1534'52.png.

Don't ignore the scrollbar width

I just tried Blipshot with Chrome 17 on Mac OS X 10.7.3 and it works very easy and reliable but it makes a narrower screenshot than full width because it ignores the part of the scrollbar. If the extension would wait 1-2 seconds the scrollbar would be gone and it could take a screenshot over the full width.
Even if it takes a little bit longer that would be very nice.
Thanks

Full page screenshot not working

Seems to be capturing only the visible part of the tab, noticed on line 60 in screenshotter.DOM.js it says there's a bug where it doesn't screenshot correctly, is this what you meant by that? I could swear this was working a little while ago

Screengrabs seem not to be working this morning

I'm using Chrome Version 24.0.1312.52, on OS 10.7.5.

I've tried to screenshot the following sites:

We go through the 'grab, make, done' steps, but no thumbnail is shown.

Any ideas?

CSV browser details from support details.com, pasted below:

OS Type,OS Version,Browser Type,IP Address,Javascript Enabled,Cookies Enabled,Color Depth,Screen Resolution,Browser Window Size,Flash Version,User Agent
Apple,Mac OS X 10.7.5 Intel,Chrome,31.24.7.150,Yes,Yes,24,1920 x 1080,1394 x 850,11.5.31,"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"

Happy to attach images if helpful, but I can't think of anything that's relevant to attach off the top of my head…

Screenshot with on Chrome and github.com

For work I have to screenshot often github.com and most of the time the screenshot is like 15px thinner than the window (cropping on the right). How can I debug/help? Thanks!

This plugin isn't in development anymore

Screenshot 2022-08-28 at 17 19 49

When I started the Blipshot extension in 2010 I had a lot of fun digging into Chrome API, and figuring out a quick and intuitive way to take screenshots. A lot of the extensions at the time were really complicated, and I needed something that just took a screenshot.

It doesn't seem difficult, but there are some nasty API required because the Chrome API never quite released the right tools to do this well. Lots of workarounds and adjustments.

Fast forward to 2022, after 12 years I managed to keep the extension running by keeping up with all the changes to the API needed, often in the form of additional restrictions or bugs. I feel 12 years is a quite a long time for an individual developer even if the extension is quite simple in its interface, and I'm proud of the work done and of the over 30,000 users I had over the years. Quite a testament to how good it was given I never publicized it or anything.

Today, Chrome requires another API change, with Manifest V3, and unfortunately this time it requires an extensive rewrite. In my initial analysis I feel it might be an almost complete rewrite to again work around sandbox and some structural changes. What was a fairly lean and smart plugin is now a massive drain on my time just to keep it running unchanged.

After quite some time of reflection and talking with some friends, I thus have taken the difficult decision to stop developing it, until the day Manifest V2 will be officially retired in January 2023 according to current timelines.

I'm glad this extension has been so useful for so many people.
Thank you everyone.

Screenshot 2022-08-28 at 17 21 32

Screenshot 2022-08-28 at 17 22 51

Time stamp : only one per minute

Hi,

I really like this add in. I want to use it several times a minute, but the timestamp is per minute. If I save multiple shots in one minute to one folder I can't because the file already exists.

Is there a way to either

  • use a serial timestamp (1,2,3)
  • use the seconds in the timestamp

Thanks a lot!

Chrome 92 broke capture of more than 2 scrolls

Error:

Unchecked runtime.lastError: This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.

Introduced in Chrome 92:

Apparently Chrome was crashing when screen was captured too fast, so they just decided to throttle it.

I wonder when we're finally going to get a proper full page API, but for the time being, let's again look for another workaround...

Thanks to JTL for the report.

Doesn't work with Plex

Keeps requesting to "reload the page". Blipshot still doesn't work immediately after reloading the page.

image

Request for hot-key screen shots

I'd love to be able to take screenshots of some UI elements that require hovering, which I can't figure out how to do with Blipshot. Blipshot requires clicking on the icon, which means I can't get a shot of the hover behavior.

If there were a hot-key or a way to do a delayed screenshot I could do it.

Bug: fixed elements repeat multiple times in screenshots (JS)

This is a great extension and I love that you've made the implementation so reusable and easy to follow! I did notice that some fixed elements such as side ads, video ads and footers tend to reappear in multiple stitched sections. Something with the BlanketStyleSet library?

Date & time format should be more like ISO 8601

YYYY-MM-DD-HHMM'SS, i.e, 2018-08-02-1016'36, is a strange date and time format.

Preferably something like the ISO 8601 format (YYYY-MM-DDTHH:MM:SS i. e, 2018-08-28T10:39:01) should be used. I would also be OK with YYYY-MM-DD HH:MM:SS i. e, 2018-08-28 10:39:01, which is more readable.

Split the full-page screnshot library

The library screenshotter.*.js is currently only partially abstract.

To make it properly abstract, it requires to:

  1. Move away the HTML writing of the screenshot from screenshotReturn
  2. Extract the events that are triggering the UI class (badges)
  3. Write some better documentation!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.