npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@webrecorder/archivewebpage

v0.14.1

Published

Create Web Archives directly in your browser

Downloads

397

Readme

ArchiveWeb.page is a JavaScript based application for interactive, high-fidelity web archiving that runs directly in the browser. The system can be used as a Chrome/Chromium based browser extension and also as a standalone Electron app.

The system creates, stores, and replays high-fidelity web archives stored directly in the browser's storage (via IndexedDB).

For more detailed info on how to use the extension and standalone app, see the ArchiveWeb.page User Guide.

The browser extension is available on the Chrome Web Store.

Downloads for the desktop are are available on the GitHub Releases page.

Architecture

The extension makes use of the Chrome debugging protocol to capture and save network traffic, and extends the ReplayWeb.page UI and the wabac.js service worker system for replay and storage.

Development

The Chromium extension and Electron app are built from the same source code for ease of development.

Prerequisites

  • Node >=12
  • Yarn Classic (v1)

Installation

To build the extension or Electron app locally for development, do the following:

  1. Clone this repo:
    git clone https://github.com/webrecorder/archiveweb.page.git
  2. Change the working directory:
    cd archiveweb.page
  3. Install dependencies:
    yarn install
  4. Make development build:
    yarn build-dev

The development build can now be used to develop the extension or Electron app.

Developing the Chromium extension

To install the extension locally, load the development build as an unpacked extension:

  1. Open the Chrome Extensions page (chrome://extensions).

  2. Choose 'Load Unpacked Extension' and point to the ./dist/ext directory in your local copy of this repo.

  3. Click the extension icon to show the extension popup, start archiving, etc...

Update extension on code changes

To watch source code files and recompile the development build on change, run:

yarn run start-ext

Now, saving changes to source will automatically rebuild the dist/ext directory.

After making changes, the extension still needs to be reloaded in the browser.

  1. From the Chrome extensions page, click the reload button to load the latest version.

  2. Click the extension icon to show the extension popup, start recording, etc... The dev build of the extension will be a different color from the production version.

Developing the Electron app

To start the Electron app using development build:

yarn run start-electron

The Electron app will open recording in a new window. It is is designed to support Flash, better support for IPFS sharing.

Update app on change

Currently, the dev workflow for the Electron app does not support automatically rebuilding on file changes.

After making changes, rerun yarn run build-dev and yarn run start-electron to view your changes in the app.

Standalone Build

To create a platform-specific binary, run:

yarn run pack

The standalone app will then be available in the ./dist/ directory.