Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vegetableman/vandal

Navigator for Web Archive
https://github.com/vegetableman/vandal

chrome-extension firefox-addon internet-archiving wayback-machine webarchive

Last synced: 20 days ago
JSON representation

Navigator for Web Archive

Lists

README

        



Navigator for Web Archive

![example workflow](https://github.com/vegetableman/vandal/actions/workflows/test.yml/badge.svg)
[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)
___

> Vandal is a browser extension that helps you quickly navigate the web archive and travel back in time without leaving the current tab.



## Install
[link-chrome]: https://chrome.google.com/webstore/detail/vandal/knoccgahmcfhngbjhdbcodajdioedgdo 'Version published on Chrome Web Store'

[Chrome][link-chrome] [][link-chrome] also compatible with [Brave][link-chrome]

[link-firefox]: https://addons.mozilla.org/en-US/firefox/addon/vandal-navigator/ 'Version published on AMO'
[Firefox][link-firefox] [][link-firefox]

---

- [Why?](#why)
- [Features](#features)
- [Limitations](#limitations)
- [Comparison to Wayback Machine](#comparison-to-wayback-machine)
- [Build](#build)
- [API and Tools Used](#api-and-tools-used)

## Why?
The goal of this project is to present an alternate navigation interface to [Wayback Machine](https://web.archive.org/) focused on ease-of-use. At the same time, it tries to capture the essence of ⌛ time-travel in it's own whimsical way.

## Features
Vandal supports the following features for navigation and inspection:
- 📅 Calendar View: The default navigation mode which uses the least amount of surface area with a mini calendar view. Supports a calendar input that shows archival stats and allows selection of month across the years.
- 📊 Graph View: Navigation mode based on graphs of year and month.
- 🧭 Navigator: Built-in browser with ◀️ ▶️ 🔄 actions.
- 🎮 Navigation Panel: A bottom panel with navigation buttons to zip through archived snapshots for a date or across the month.
- 🕛 History Panel: Access your navigation history for a website.
- 💡 Info Panel: Access your current navigation URL and redirection info.
- 🔩 Resource Drawer: A drawer that you can toggle to view timestamp differences of resources such as images, scripts, etc. relative to the page. This drawer updates automatically based on URL.
- ⌛ Historical View: Displays the snapshot of a website throughout the years. This feature is [experimental](https://github.com/vegetableman/vandal/issues/1) ⚠️.

## Limitations
- It uses Iframe to load a webpage which has inherent limitations, although Vandal does replicate the behaviour of a browser to some degree, for instance, navigation history, reload, etc. It does not work in cases where pages are using frame busters and when the document matching the URL itself is cached using service workers causing the webRequest API to fail. It does notify with an error message for such cases.
- It does not support saving page to Archive. Although, It does notify you to do so on an unarchived page.

## Comparison to Wayback Machine
Vandal is not affliated to Internet Archive. As for features, it's more of a subset to the mighty Wayback Machine.

## Build

### Requirements
Node.js version 14 or later is required.

Install dependencies:
```sh
npm install
```

To create a build:
```sh
npm run build
```

When working on the extension, run below to constantly build your changes:

```sh
npm run watch # Listen to file changes and automatically rebuild
```

Then load or reload it into the browser to see the changes.

### Loading into the browser

Once built, load it in the browser of your choice with [web-ext](https://github.com/mozilla/web-ext):

```sh
npx web-ext run --target=chromium # Open extension in Chrome
```

```sh
npx web-ext run # Open extension in Firefox
```

## API and Tools Used
Vandal uses the [Wayback Machine API](https://archive.org/help/wayback_api.php).

It is primarily built on frameworks - [XState](https://github.com/davidkpiano/xstate) and [React](https://github.com/facebook/react). Illustrations and logo was created on [Figma](https://figma.com/), video edited on [Kapwing](https://kapwing.com/) and icons have been plucked from the [Noun Project](https://thenounproject.com/).

Icons designed by:
[Christian Antonius](https://thenounproject.com/christian_antonius/), [Ralf Schmitzer](https://thenounproject.com/ralfschmitzer/), [Park Sung Hyo](https://thenounproject.com/parksunghyo126/), [Bhuvan](https://thenounproject.com/bhuvan.mahes/), [Sewon Park](https://thenounproject.com/cosmac/), [Alfa Design](https://thenounproject.com/alfadesign/), [Emmanuel Roy](https://thenounproject.com/emmanuelroy/), [unlimicon](https://thenounproject.com/unlimicon/), [Hui Qin Ng](https://thenounproject.com/hui_qin/), [Bluetip Design](https://thenounproject.com/bluetip/), [iconsmind.com](https://thenounproject.com/imicons/), [mikicon](https://thenounproject.com/mikicon/), [Bharat](https://thenounproject.com/bharatkumara321), [Aaron K. Kim](https://thenounproject.com/inspign/), [i cons](https://thenounproject.com/iconsguru/)