Git Product home page Git Product logo

screenshot-capture's Introduction

Screenshot Capture / Browser Extension

Install: Chrome / Edge / Opera / Brave / Chromium / Vivaldi

Features

  • Secure by design
  • Capture Viewport
  • Crop and Save (automatic save)
  • Crop and Wait (manual save)
  • Configurable Keyboard Shortcut
  • Save screenshot as PNG or JPG image file
  • Copy screenshot to clipboard as Data URL String or Binary Image
  • Preserve or downscale screenshot size on HDPI displays like Retina
  • Unique screenshot date/time file name
  • No special permissions required
  • Free and Open Source

Options

  1. Pin the extension to your browser toolbar
  2. Click on the extension button using your Right Mouse Button
  3. Select Options from the context menu

Table of Contents

Capture Method

Crop and Save

  1. Activate the extension by using the keyboard shortcut or by clicking on the extension button
  2. Hold down your left mouse button anywhere on the page and drag your mouse in any direction
  3. Release the mouse button when you are ready, the selected area will be cropped

Crop and Wait

  1. Activate the extension by using the keyboard shortcut or by clicking on the extension button
  2. Hold down your left mouse button anywhere on the page and drag your mouse in any direction
  3. Adjust the selected are to crop and/or move it around
  4. When you are ready activate the extension again by using the keyboard shortcut or by clicking on the extension button, the selected area will be cropped

Capture Viewport

  1. Activate the extension by using the keyboard shortcut or by clicking on the extension button
  2. The visible area of the screen will be captured

Image Format

  • PNG - better image quality but larger file size. Best suited for cropping and capturing simple web pages

  • JPG - smaller file size with slightly lower image quality. Useful when capturing the entire screen area especially with lots of images on screen or when capturing still shots of videos. The quality of the JPEG can be adjusted from 100 to 0 (highest to lowest)

Screenshot Scaling

  • Preserve scaling - the screenshot will be saved with the page scaling that you are seeing on the screen

  • Downscale to actual size - on HDPI displays like Retina or zoomed pages the screenshot will be downscaled to the original page size

Save Format

  • To File - save the screenshot to a file. Depending on your download preferences you will be either prompted to save the file or the file will be saved automatically in your download folder

  • To Clipboard - copy the screenshot to your clipboard:

    • Data URL String - the screenshot will be copied to the clipboard as Data URL String
    • Binary Image - the screenshot will be copied to the clipboard as raw Binary Image
    • Confirmation Dialog - toggle the confirmation dialog on copy to clipboard

Keyboard Shortcut

  1. Navigate to chrome://extensions/shortcuts
  2. Find the Screenshot Capture extension and set key combination for the Take Screenshot action

Save Location

  1. Navigate to chrome://settings/downloads
  2. Change the default download Location
  3. Use the Ask where to save each file before downloading switch to toggle the autosaving

Caveats

The extension won't work on the following origins:

  • chrome and extension settings pages - chrome:// and chrome-extension://
  • the official chrome web store - https://chromewebstore.google.com/
  • your home page

To enable the extension on local file:/// URLs:

  1. Navigate to chrome://extensions
  2. Locate the Screenshot Capture extension and click on the Details button
  3. Make sure that the Allow access to file URLs switch is turned on

Copy to clipboard:

  • it won't work on domains served on insecure http:// protocol, but it will work on http://localhost
  • when using Capture Viewport you will be asked by the browser to grant read access to the clipboard
  • Capture Viewport won't work on PDF documents, use Crop and Save instead and select the entire screen area

Manual Install

The following instructions applies for: Chrome, Edge, Opera, Brave, Chromium and Vivaldi.

Note that in any of the following cases you won't receive any future updates automatically!

Load packed .crx

  1. Go to releases and pick a release that you want to install
  2. Download the screenshot-capture.crx file
  3. Navigate to chrome://extensions
  4. Drag and drop the markdown-viewer.crx file into the chrome://extensions page

Load unpacked .zip

  1. Go to releases and pick a release that you want to install
  2. Download the screenshot-capture.zip file and extract it
  3. Navigate to chrome://extensions
  4. Make sure that the Developer mode switch is enabled
  5. Click on the Load unpacked button and select the extracted directory

Build

  1. Clone this repository
  2. Execute sh build/package.sh chrome
  3. Navigate to chrome://extensions
  4. Make sure that the Developer mode switch is enabled
  5. Click on the Load unpacked button and select the cloned directory

Manifest v2

  1. Clone the mv2 branch (Screenshot Capture v2.0)
  2. Navigate to chrome://extensions
  3. Make sure that the Developer mode switch is enabled
  4. Click on the Load unpacked button and select the cloned directory

License

The MIT License (MIT)

Copyright (c) 2014-present Simeon Velichkov [email protected] (https://github.com/simov/screenshot-capture)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

screenshot-capture's People

Contributors

djcrashdummy avatar jbravo-tejeda avatar simov 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

screenshot-capture's Issues

Firefox support

What about Firefox support? As now there is only support for browsers based on chromium
Firefox has basic (+#11) screenshot capture, but this tool is more configurable (which I dont think Firefox has), so I can set it as seamless as its possible

Custom uploader support

I don't know if this extension supports uploading yet however if it could support SXCU files (the file for custom uploaders for the popular desktop screenshotting software. These are just basic JSON files with the uploader's name, domain and the http request type you've got to make to upload the photo. You can have a look at MagicCap which is a mac/linux alternative to ShareX that supports these SXCU files and having one for chrome would be great!

Shortcut key to 'capture viewport' and Save Format "To Clipboard (Binary Image)" don't work on pdf URL

I commented on the Chrome extension page, but I should have opened an issue because I have github account.

Shortcut key to 'capture viewport' and Save Format "To Clipboard (Binary Image)" don't work on pdf, such as https://tdnet-pdf.kabutan.jp/20230810/140120230810539937.pdf.

Steps to reproduce:

  • Go to the extension option
  • Check the Capture Method "Capture Viewport"
  • Check Save Format "To Clipboard (Binary Image)"
  • Set Shortcut key ex. Alt + s
  • Open pdf ex. https://tdnet-pdf.kabutan.jp/20230810/140120230810539937.pdf on Chrome
  • Press Alt + s, the favicon of the extension blinks, but the image doesn't copy to the clipboard.

I am building a simple Chrome extension to copy the visible area to the clipboard with a shortcut,
but the same error happens and I can't copy the image on the pdf URL though I can copy the image on the non-pdf URL.

Background does not fade out

Why the background does not fade out like this when i select an area? This is inconvinient a little bit, i'd like to get this feature.
This is screenshot from the Jcrop docs.
Screenshot 2023-04-16 at 18 03 04

Option to disable Confirmation dialog

This tool is simple and fast. There is just one annoying dialog that appears if you capture screens directly to the clipboard.

Screenshot Capture:
Binary Image
Saved to Clipboard!

It would be great if you could include the option don't show this again or just disable in settings.

Setting default options?

Hi. Thanks for the great extension. Is it possible to set some default options upon install? I was thinking something like this, but find the code in the extension is over my head:

var initialState = {
  method: 'crop',
  format: 'png',
  save: 'url',
  dpr: true,
  icon: false
};

Is something like this possible? Thanks :)

An opiton menu for canceling alert

Great tool ,very easy to use,thank you very much!

Could you offer an opiton menu for canceling alert. Such alert is annoying.

alerts for example:

//    'Screenshot Capture:',
//    'Binary Image',
 //   'Saved to Clipboard!'

 //   'Screenshot Capture:',
 //   'Data URL String',
  //  'Saved to Clipboard!'

Any chance to work on local files ?

I work on lots of PDFs and HTMLs that are stored locally , since this extension is awesome I wonder if anyone can enable it for local files as well
( currently clicking button on local files on browser wont do the trick)

Some website cannot crop or wrong result

I found that there are some website cannot trigger the jCrop or wrong result
for example:
Cannot crop
https://chrome.google.com/webstore/category/apps?hl=zh-TW&_feature=website

I dont know how to say this problem
http://deepliquid.com/content/Jcrop_Examples.html

also this extension need create element in current page, so all non web page cannot crop anything

And current my extension is use captureVisibleTab to send the base64 image to new tab
and set the jCrop with it, so i dont have above problem

Image result not correctly in Mac retina display

Hello,
When i try to crop some area using Macbook pro retina
the result of image not match with my cropped target
maybe in retina display, the pixel is very high, so the result of image cannot display correctly

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.