Save Page State

A browser extension to save the state of a page for further analysis

• DOM Snapshot
• MHTML file
• Screenshot
• Metadata

Install the extension from the chrome web store or firefox add-ons.

Or create a custom extension with this repo with limited access permission

In manifest.json (/src/manifest.json), replace <all_urls> with your own project URL pattern you wish to save the page states from.

{
	...
	"content_scripts": [
		{
			"matches": ["<all_urls>"], // <- change this to your url pattern
			"js": ["js/content.js"]
		}
	],
	"permissions": ["activeTab", "pageCapture", "<all_urls>"]  // <- change this to your url pattern
	...
}

npm i

npm run build

Builds to /build/prod

Create a zip file from /build/prod/chrome upload it to the chrome web store.

Create a zip file from /build/prod/firefox upload it to the firefox developer hub.

npm run dev:chrome // builds to /build/dev/chrome
npm run dev:firefox // builds to /build/dev/firefox

An HTML file containing the state of the DOM.

Note Firefox doesn't support saving an MHTML file natively yet.

An MHTML page with encapsulated resources, so you could immediately check the layout by opening the MHTML file in Chrome.

A PNG image of the viewport.

Text file with extra metadata useful for debugging with the exact same state.

• height: viewport height
• width: viewport width
• incognito: is page loaded in incognito mode
• status: page loading status
• title: page title
• url: page URL
• browser: browser
• browserVersion: browser version
• os: operating system