wingleung/save-page-state

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

Save Page State

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

Highlights

• DOM Snapshot
• MHTML file
• Screenshot
• Metadata

Install

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

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

Customize

Restrict 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
	...
}

Install dependencies

npm i

Build

npm run build

Builds to /build/prod

Publish

Chrome

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

Firefox

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

Development

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

Features

DOM Snapshot

An HTML file containing the state of the DOM.

MHTML file (chrome only for now)

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.

Screenshot

A PNG image of the viewport.

Metadata

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

Maintainer

save-page-state's Issues

Create a better developer setup

There's some duplication going on.

Might be better to look into either improving the current setup or using a boilerplate setup

Another page saving concept

I believe there is other way to save page with current state, the page is saved as HTML, and consisting these methods:

• Compile image as base64, then embedded as data URI
• Store <iframe> content as srcdoc attribute
• Insert style sheets and scripts into <style> and <script> tags respectly

So WDYT?

Build step should package code

Currently the build step outputs to the /build/prod folder.

Probably better to add a Zip packager to webpack, so the end product is a versioned zip file you can just upload to Chrome webstore

Spec

• use a webpack zip plugin (https://www.npmjs.com/package/zip-webpack-plugin)
• output a versioned zip file (e.g. save-page-state-1.0.2.zip)

Add support for chrome 47 / MP Pro 1,1

Add support for Chrome 47. Mac Pro 1,1 users can affor maximally OS: 10.10. Also does not seem to load state but file...

Firefox Support

Any plans to support Firefox?

Need better naming

It seems that does not save 'state' in a page.
I think dom-snapshot or dom-capture or something looks better.