https://github.com/wingleung/save-page-state

A chrome extension to save the state of a page for further analysis
https://github.com/wingleung/save-page-state

analysis chrome-extension devtools mhtml screenshot snapshot state

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wingleung/save-page-state
• Owner: wingleung
• License: mit
• Created: 2018-12-12T08:45:03.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-14T00:04:59.000Z (almost 2 years ago)
• Last Synced: 2024-11-03T03:31:00.044Z (11 days ago)
• Topics: analysis, chrome-extension, devtools, mhtml, screenshot, snapshot, state
• Language: JavaScript
• Size: 974 KB
• Stars: 230
• Watchers: 8
• Forks: 12
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


	


	


	

  
Save Page State

	


	




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

[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/aokllhajmkihfihciggkmpgdhgecgaic.svg)](https://chrome.google.com/webstore/detail/save-page-state/aokllhajmkihfihciggkmpgdhgecgaic) ![](https://img.shields.io/david/vrtdev/save-page-state.svg) ![](https://img.shields.io/david/dev/vrtdev/save-page-state.svg)

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)

## Highlights

- [DOM Snapshot](#dom-snapshot)

- [MHTML file](#mhtml-file)

- [Screenshot](#screenshot)

- [Metadata](#metadata)

## Install

Install the extension from the [chrome web store](https://chrome.google.com/webstore/detail/save-page-state/aokllhajmkihfihciggkmpgdhgecgaic) or [firefox add-ons](https://addons.mozilla.org/nl/firefox/addon/save-page-state/).

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

## Customize

### Restrict Access Permission

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

```javascript

{

	...

	"content_scripts": [

		{

			"matches": [""], // <- change this to your url pattern

			"js": ["js/content.js"]

		}

	],

	"permissions": ["activeTab", "pageCapture", ""]  // <- 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](https://developer.chrome.com/webstore/publish#upload-your-app).

#### Firefox

Create a zip file from `/build/prod/firefox`

[upload it to the firefox developer hub](https://addons.mozilla.org/nl/developers/).

### 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

[![Wing Leung](https://github.com/wingleung.png?size=100)](https://github.com/wingleung)