Firefox Screenshots: the best way to take screenshots on the web.
Switch branches/tags
Clone or download
Martin and mozilla-pontoon Pontoon: Update Romansh (rm) localization of Firefox Screenshots
Localization authors:
- Martin <>
Latest commit bd6fcea Oct 18, 2018
Failed to load latest commit information.
.circleci Fix Postgres installation in CircleCI (#5033) Oct 12, 2018
bin Fix npm audit fail issue 4803 (#4948) Sep 27, 2018
docs Enable favorite shots on My Shots. (#4934) Oct 3, 2018
locales Pontoon: Update Romansh (rm) localization of Firefox Screenshots Oct 18, 2018
server A11y - Add lang attribte to <html> tag Oct 15, 2018
shared Fix #4748, add channel column to shot uploads (#4928) Sep 20, 2018
static Merge pull request #4950 from mozilla-services/update-homepage-conten… Oct 15, 2018
test Update tests to use the new, simpler way of accessing nsIDOMWindowUti… Oct 10, 2018
webextension Add 'pinned' option for page action. (#4982) Oct 4, 2018
.babelrc Upgrade babel to latest version. Jun 21, 2016
.codecov.yml Change to only report coverage changes (#3400) Aug 28, 2017
.dockerignore Migrate Screenshots to pure WebExtension (#4864) Sep 12, 2018 Submit shot image to Watchdog on save. (#4377) Jun 8, 2018
.eslintignore Migrate Screenshots to pure WebExtension (#4864) Sep 12, 2018
.eslintrc.yml Use double quotes. (#3977) Feb 2, 2018
.gitignore update color schemes on shot view and shot index view Sep 25, 2018
.nsprc Fix npm audit fail issue 4803 (#4948) Sep 27, 2018
.sass-lint.yml clean up home Aug 10, 2017
.zap-baseline.conf Update ZAP command in circleci (#3321) Oct 16, 2017 Bump version to 34.0.0 and update CHANGELOG to reflect annotation, wa… Aug 1, 2018
CODEOWNERS Add flod as string owner. Fixes #3369 (#3475) Sep 8, 2017 Add a couple security bug contributors Jul 31, 2017
Dockerfile Update Node.js to v8.12.0 Sep 17, 2018
LICENSE Initial commit Nov 18, 2014
Makefile Migrate Screenshots to pure WebExtension (#4864) Sep 12, 2018 fixed command Oct 4, 2018
l10n.toml Add l10n.toml file for screenshots, with revised list of languages. Jul 31, 2017
package-lock.json Update dependency express to v4.16.4 Oct 14, 2018
package.json Update dependency express to v4.16.4 Oct 14, 2018
pytest.ini Skip test_file_managemnt tests by default Dec 27, 2017
renovate.json add 'code quality' label to renovate May 21, 2018
setup.cfg (chore): Add Flake8 to lint tests, change some files to have .py exte… Mar 15, 2017

Firefox Screenshots

CircleCI Build Status

Screenshots server status page

This is a screenshot tool for Firefox. It is available in Firefox 56 and later versions, as part of the default Firefox distribution.

The project was initially launched through Test Pilot as Page Shot.

It is made up of both an add-on (using WebExtensions) and a website using Node.js. The add-on is in addon/webextension/, and the website is in server/

Ian has been blogging about the design, definition, and development process.

(This project used to include general page freezing; this functionality has been forked off into pagearchive.)

You can find more information about Firefox Screenshots at the Mozilla Wiki page:

Installation and Setup

Install Nightly or Developer Edition.

(Skip this step if you do not want to run a local server.) Install Postgres. And do one of the following:

Install Node.js. Version 8.x is required.

Clone the repository. Navigate to the project directory and run npm install.

There are two scripts to run the server locally and develop the add-on:

  • ./bin/run-server will run the server on http://localhost:10080 and automatically restart if there are changes.
    • If nodemon crashes you can try to start the server with ./bin/run-server --restart
    • Take a look at and/or source for some of the options available through environment variables.
  • ./bin/run-addon will build a few parts of the addon (into addon/webextension/build/) and start Firefox with the add-on installed. The add-on will be refreshed automatically as you change files. We recommend you open about:debugging to help debug the extension.
  • ./bin/run-addon --setup-profile will setup a Firefox profile for your development; this way you can make persistent changes to the profile that you will use just for Screenshots development. (note: this will only look for the firefox command or Nightly, Developer Edition, Aurora editions on OSX)

If you want to develop the add-on but not the server you can run ./bin/run-addon -s

By default, Screenshots will connect to a Postgres database on localhost:5432. To change which database and user it connects to set/export the environmental variables: RDS_USERNAME, RDS_PASSWORD, and RDS_HOSTNAME

The server will automatically setup the tables in your database, and keep them up to date over time (using pg-patcher).

If you have growl and growlnotify installed on Mac OS X, you will get growl notifications when the server build has started and completed.

We apologize but we have no story for development on Windows (though the add-on runs on Windows). We welcome feedback.

Linting and Testing

npm run test will run tests as well as eslint. You can control the tests with the following shell/environment variables:

  • MOZ_HEADLESS - when this variable is set, the Selenium tests will run in headless mode.
  • SCREENSHOTS_BACKEND - the server where the addon will try to save shots if the default http://localhost:10080 is not available or desirable.

For example, MOZ_HEADLESS=1 SCREENSHOTS_BACKEND= npm run test will run the tests headlessly against

npm run test:server will run the server tests. This require Python and the local server running on http://localhost:10080.

Getting to know the code

There is documentation in addon/, addon/webextension/, addon/webextension/background/, and addon/webextension/selector/ that talks about the code layout and architecture of the add-on.

server/ talks about how the server React pages are setup, along with the server-side rendering of pages.

There is also documentation in docs/.


There is an IRC channel #screenshots on (you can use this link for chat access via the web if you do not otherwise use IRC). There are IRC logs available.

Planning and ideation is happening in the issue tracker. We have several milestones:

Issue tags otherwise aren't very structured. Research is primarily analysis of other products that do something interesting, or some source material that could provide insight. Input on these (things like "I like this product because...") is very helpful!

We do some research on other projects, collecting the results in this Google Drive folder.


Firefox Screenshots localization is managed via Pontoon, not direct pull requests to the repository. If you want to fix a typo, add a new language, or simply know more about localization, please get in touch with the existing localization team for your language, or Mozilla’s l10n-drivers for guidance.