Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 5 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 (9 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
[](https://chrome.google.com/webstore/detail/save-page-state/aokllhajmkihfihciggkmpgdhgecgaic)  
[](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
[](https://github.com/wingleung)