Charles
  • Introduction
    • 👋Welcome
  • Getting started
    • Quickstart guide
  • Opening actions
    • Popup, side bar and modal options
    • Trigger the extension with a floating button
    • Open the extension automatically on specific URLs
  • Key features
    • Features overview
    • Open website on install / uninstall
    • Get tab info
    • Get text selected by user
    • Get element text
    • Get element HTML
    • Set element inner text
    • Set element inner HTML
    • Open URL in sidebar modal
    • Open URL in fullscreen modal
    • Copy text to clipboard
    • Populate an input field
    • Simulate mouse click on an element
    • Capture screenshot
    • Open URL in new tab
    • Show native alert
    • Set an extension badge color and text
    • Change extension icon
    • Close extension
    • Save to Chrome storage
    • Injecting custom javascript
  • Extending Charles
    • Extending Charles with your own Javascript
  • Publishing to the Chrome Webstore
    • Prepare extension for submission
    • Registering as a Chrome Webstore developer
    • Publishing your extension
  • FAQ
    • Common questions
  • Troubleshooting
    • Charles Data Elements do not receive any values
    • Cannot log in (cookie issues)
    • Support
Powered by GitBook
On this page
  1. Key features

Capture screenshot

PreviousSimulate mouse click on an elementNextOpen URL in new tab

Last updated 5 months ago

Take a screenshot of the active tab’s viewport (i.e. the part that is currently visible on the screen):

  1. Add the element Charles: Screenshot to the page.

  2. Use the action Charles: Capture Screenshot to initiate a screenshot

  3. Once the screenshot is taken, the event screenshotCaptured is triggered. You can use the Charles: Screenshot's states

    1. Screenshot URL to access an image uploaded to the Bubble CDN. Please use :saved to S3 to make sure the image is permanently stored. This should be the main way of storing images.

    2. Base64 encoded image to save a base64 encoded image directly to Bubble’s databse. This can be useful if you need to use any 3rd party APIs that expect a base64 encoded image. Please note that the string contains a prefix: data:image/png;base64,iVBORw0KGgoAAA…