Repository: vrtdev/save-page-state
Branch: master
Commit: 5f63806b474c
Files: 14
Total size: 18.2 KB

Directory structure:
gitextract_29hjcguj/

├── .babelrc
├── .gitignore
├── .prettierrc
├── LICENCE
├── README.md
├── config/
│   ├── config.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── package.json
└── src/
    ├── js/
    │   ├── background.js
    │   ├── content.js
    │   └── helpers/
    │       └── index.js
    ├── manifest.chrome.json
    └── manifest.firefox.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}


================================================
FILE: .gitignore
================================================
### Intellij ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf

# Generated files
.idea/**/contentModel.xml

# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml

# Gradle
.idea/**/gradle.xml
.idea/**/libraries

# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn.  Uncomment if using
# auto-import.
# .idea/modules.xml
# .idea/*.iml
# .idea/modules

# CMake
cmake-build-*/

# Mongo Explorer plugin
.idea/**/mongoSettings.xml

# File-based project format
*.iws

# IntelliJ
out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Cursive Clojure plugin
.idea/replstate.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties

# Editor-based Rest Client
.idea/httpRequests

# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser

### Intellij Patch ###
# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721

# *.iml
# modules.xml
# .idea/misc.xml
# *.ipr

# Sonarlint plugin
.idea/sonarlint

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

#DynamoDB Local files
.dynamodb/

### Project ###
# build folder
build/


================================================
FILE: .prettierrc
================================================
{
  "semi": false,
  "singleQuote": true
}


================================================
FILE: LICENCE
================================================
The MIT License (MIT)

Copyright (c) 2016 Listen 1

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: README.md
================================================
<div align="center">
	<br>
	<br>
	<img width="126" src="media/header.png" alt="Save Page State">
  <h3>Save Page State</h3>
	<br>
	<br>
</div>

> 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 `<all_urls>` with your own project URL pattern you wish to save the page states from.

```javascript
{
	...
	"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](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)


================================================
FILE: config/config.js
================================================
const path = require('path')

module.exports = {
  entry: {
    background: './src/js/background',
    content: './src/js/content'
  },
  output: {
    filename: './js/[name].js'
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        include: path.resolve(__dirname, '../src/js')
      }
    ]
  }
}


================================================
FILE: config/webpack.config.dev.js
================================================
const _ = require('lodash')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const VersionFilePlugin = require('webpack-version-file-plugin')

const config = require('./config.js')

module.exports = (env = { vendor: 'chrome' }) => _.merge({}, config, {
  mode: 'development',

  output: {
    path: path.resolve(__dirname, `../build/dev/${env.vendor}`)
  },

  devtool: 'source-map',

  plugins: [
    new CopyWebpackPlugin([{ from: './src' }], {
      ignore: ['js/**/*', 'manifest*.json', '.DS_Store'],
      copyUnmodified: false
    }),
    new VersionFilePlugin({
      packageFile: path.resolve(__dirname, '../package.json'),
      template: path.resolve(__dirname, `../src/manifest.${env.vendor}.json`),
      outputFile: path.resolve(__dirname, `../build/dev/${env.vendor}/manifest.json`)
    })
  ],

  watch: true
})


================================================
FILE: config/webpack.config.prod.js
================================================
const _ = require('lodash')
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const VersionFilePlugin = require('webpack-version-file-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = require('./config.js')

module.exports = (env = { vendor: 'chrome' }) => _.merge({}, config, {
  mode: 'production',

  output: {
    path: path.resolve(__dirname, `../build/prod/${env.vendor}`)
  },

  optimization: {
    minimizer: [new UglifyJsPlugin()]
  },

  plugins: [
    new CopyWebpackPlugin([{ from: './src' }], {
      ignore: ['js/**/*', 'manifest*.json', '.DS_Store'],
      copyUnmodified: true
    }),
    new VersionFilePlugin({
      packageFile: path.resolve(__dirname, '../package.json'),
      template: path.resolve(__dirname, `../src/manifest.${env.vendor}.json`),
      outputFile: path.resolve(__dirname, `../build/prod/${env.vendor}/manifest.json`)
    }),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' })
  ]
})


================================================
FILE: package.json
================================================
{
  "name": "save-page-state",
  "version": "1.1.1",
  "description": "Extension to save a state of a page for remote analysis",
  "scripts": {
    "build": "npm run build:chrome && npm run build:firefox",
    "build:chrome": "mkdir -p ./build/prod && mkdir -p ./build/prod/chrome && npx webpack --env.vendor=chrome --config ./config/webpack.config.prod.js",
    "build:firefox": "mkdir -p ./build/prod && mkdir -p ./build/prod/firefox && npx webpack --env.vendor=firefox --config ./config/webpack.config.prod.js",
    "dev:chrome": "mkdir -p ./build/dev && mkdir -p ./build/dev/chrome && npx webpack --env.vendor=chrome --config ./config/webpack.config.dev.js",
    "dev:firefox": "mkdir -p ./build/dev && mkdir -p ./build/dev/firefox  && npx webpack --env.vendor=firefox --config ./config/webpack.config.dev.js",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "author": "Wing Leung",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "babel-loader": "^8.0.4",
    "copy-webpack-plugin": "^4.6.0",
    "husky": "^1.2.0",
    "lint-staged": "^8.1.0",
    "lodash": "^4.17.11",
    "prettier": "^1.15.3",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-version-file-plugin": "github:mvanede/webpack-version-file-plugin"
  },
  "dependencies": {
    "detect-browser": "^4.5.0",
    "file-saver": "^2.0.2",
    "jszip": "^3.2.1"
  }
}


================================================
FILE: src/js/background.js
================================================
import JSZip from 'jszip'
import saveAs from 'file-saver'

import {
  getTimestamp,
  getBrowserData,
  formatJSONtoPlain,
  base64toBlob
} from './helpers'

window.browser = window.browser || window.chrome

let browserData = null
let pageTitle = null
let currentTab = null
let metaData = null

const getFileName = () =>
  `snapshot_${getTimestamp()}_${pageTitle.replace(
    /[<>:"\/\\|?*\x00-\x1F ]/g,
    '_'
  )}`

const getImageBlob = image =>
  base64toBlob(image.replace(/^data:image\/\w+;base64,/, ''), 'image/jpeg')

const captureVisibleTab = () =>
  browserData.isChrome
    ? new Promise(resolve => {
        browser.tabs.captureVisibleTab(null, {}, image => resolve(image))
      })
    : browser.tabs.captureVisibleTab()

const generateMHTML = () =>
  new Promise(resolve => {
    chrome.pageCapture.saveAsMHTML({ tabId: currentTab }, htmlData => {
      resolve(htmlData)
    })
  })

const downloadFile = (blob, fileName) => {
  if (browserData.isChrome) {
    saveAs(blob, fileName)
  } else {
    browser.tabs.sendMessage(currentTab, {
      action: 'saveFile',
      file: {
        content: blob,
        name: fileName
      }
    })
  }
}

const generatePageStateZip = async dom => {
  const file = new Blob([dom], { type: 'text/html' })
  const fileName = getFileName()

  const zipArchive = new JSZip()
  const zipRoot = zipArchive.folder(fileName)

  zipRoot.file('dom/snapshot.html', file)
  zipRoot.file('metadata.txt', formatJSONtoPlain(metaData))

  const image = await captureVisibleTab()
  zipRoot.file('screenshot.png', getImageBlob(image))

  if (browserData.isChrome) {
    const htmlData = await generateMHTML()
    zipRoot.file('layout/snapshot.mhtml', htmlData)
  }

  const blob = await zipArchive.generateAsync({ type: 'blob' })
  downloadFile(blob, `${fileName}.zip`)
}

const savePageState = tab => {
  browserData = getBrowserData()
  pageTitle = tab.title
  currentTab = tab.id
  metaData = {
    height: tab.height,
    width: tab.width,
    incognito: tab.incognito,
    status: tab.status,
    title: tab.title,
    url: tab.url,
    browser: browserData.name,
    browserVersion: browserData.version,
    os: browserData.os
  }

  browser.tabs.sendMessage(tab.id, { action: 'captureDOM' })
}

const handleBackgroundAction = ({ action, dom }) => {
  switch (action) {
    case 'captureDOM':
      generatePageStateZip(dom).then(() => console.log('downloaded page state'))
      break
    default:
      break
  }
}

browser.browserAction.onClicked.addListener(savePageState)

browser.runtime.onMessage.addListener(handleBackgroundAction)


================================================
FILE: src/js/content.js
================================================
import { DOMtoString } from './helpers'

window.browser = window.browser || window.chrome

const click = node => {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent(
      'click',
      true,
      true,
      window,
      0,
      0,
      0,
      80,
      20,
      false,
      false,
      false,
      false,
      0,
      null
    )
    node.dispatchEvent(evt)
  }
}

const saveAs = (blob, name, opts) => {
  var URL = window.URL || window.webkitURL
  var a = document.createElement('a')
  name = name || blob.name || 'download'

  a.download = name
  a.rel = 'noopener' // tabnabbing

  // Support blobs
  a.href = URL.createObjectURL(blob)
  setTimeout(function() {
    URL.revokeObjectURL(a.href)
  }, 4e4) // 40s
  setTimeout(function() {
    click(a)
  }, 0)
}

const handlePageAction = req => {
  switch (req.action) {
    case 'captureDOM':
      browser.runtime.sendMessage({
        action: 'captureDOM',
        dom: DOMtoString(document)
      })
      break
    case 'saveFile':
      console.log('saving file...', req)
      saveAs(req.file.content, req.file.name)
      break
    default:
      break
  }
}

browser.runtime.onMessage.addListener(handlePageAction)


================================================
FILE: src/js/helpers/index.js
================================================
const { detect } = require('detect-browser')

const getTimestamp = () => {
  const time = new Date()
  const months = [
    'jan',
    'feb',
    'mar',
    'apr',
    'may',
    'jun',
    'jul',
    'aug',
    'sep',
    'oct',
    'nov',
    'dec'
  ]
  const month = months[time.getMonth()]
  const date = time.getDate()
  let hour = time.getHours()
  hour = hour < 10 ? `0${hour}` : hour
  let min = time.getMinutes()
  min = min < 10 ? `0${min}` : min
  let sec = time.getSeconds()
  sec = sec < 10 ? `0${sec}` : sec

  return `${date + month}_${hour}${min}${sec}`
}

const getBrowserData = () => {
  const browserData = detect() || {}

  return {
    ...browserData,
    isChrome: browserData.name === 'chrome'
  }
}

const formatJSONtoPlain = jsonData => {
  let plainTxt = ''

  for (const name in jsonData) {
    plainTxt = `${plainTxt + name}: ${jsonData[name]}\n`
  }

  return plainTxt
}

const base64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data)
  const byteArrays = []

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize)

    const byteNumbers = new Array(slice.length)
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i)
    }

    const byteArray = new Uint8Array(byteNumbers)

    byteArrays.push(byteArray)
  }
  const blob = new Blob(byteArrays, { type: contentType })
  return blob
}

const DOMtoString = document_root => {
  var html = '',
    node = document_root.firstChild
  while (node) {
    switch (node.nodeType) {
      case Node.ELEMENT_NODE:
        html += node.outerHTML
        break
      case Node.TEXT_NODE:
        html += node.nodeValue
        break
      case Node.CDATA_SECTION_NODE:
        html += '<![CDATA[' + node.nodeValue + ']]>'
        break
      case Node.COMMENT_NODE:
        html += '<!--' + node.nodeValue + '-->'
        break
      case Node.DOCUMENT_TYPE_NODE:
        // (X)HTML documents are identified by public identifiers
        html +=
          '<!DOCTYPE ' +
          node.name +
          (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') +
          (!node.publicId && node.systemId ? ' SYSTEM' : '') +
          (node.systemId ? ' "' + node.systemId + '"' : '') +
          '>\n'
        break
    }
    node = node.nextSibling
  }
  return html
}

export {
  getTimestamp,
  getBrowserData,
  formatJSONtoPlain,
  base64toBlob,
  DOMtoString
}


================================================
FILE: src/manifest.chrome.json
================================================
{
  "name": "Save Page State",
  "version": "<%= package.version %>",
  "description": "<%= package.description %>",
  "manifest_version": 2,
  "icons": { "128": "images/icon.png" },
  "browser_action": {
    "default_icon": "images/icon.png"
  },
  "background": { "scripts": ["js/background.js"] },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/content.js"]
    }
  ],
  "permissions": ["<all_urls>", "activeTab", "pageCapture"]
}


================================================
FILE: src/manifest.firefox.json
================================================
{
  "name": "Save Page State",
  "version": "<%= package.version %>",
  "description": "<%= package.description %>",
  "manifest_version": 2,
  "icons": { "128": "images/icon.png" },
  "browser_action": {
    "default_icon": "images/icon.png"
  },
  "background": { "scripts": ["js/background.js"] },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/content.js"]
    }
  ],
  "permissions": ["<all_urls>", "activeTab"]
}