Web Nav

This typescript (react) and rust (wasm) chrome extension bridges the web navigation efficiency gap between bookmarks and repetitive google searches

Abstract

This project uses rust wasm to hierarchically categorize chrome history in the form of a graph, then suggests web pages related to a search query to make repetitive (but specific) web navigation more efficient.

This extension does not provide an alternative to bookmarks, rather it is right between the repetitive navigation of bookmarks and the specificity of a google search.

It is for navigating to that one email or page on any website (in your chrome history) through a little typing and one click, rather than going through multiple pages and sitting through annoying load times to get there.

If you don't know the name of the specific page, you can search for the general website that the page would be under, and through clicking "view sublinks," wasm will do its magic, and a scrollable list will popup that is bound to include your desired page!

Features

Click through the drop downs for more information and example use cases

Searching through previously visited websites by webpage title

A few examples:

• Navigating directly to a class's grades (example search query: "chem grades" -> click) instead of logging into canvas, clicking on chemistry, and then clicking on grades
• Opening a specific folder on github (example seach query: "Web_nav readme" -> click) instead of logging into github, opening Web_Nav, then clicking on readme

For anything specific that you can think of, just try to search for it in the Web_Nav!

Navigating through the sub-links of a web-page (clickme!)

When the title of a main webpage is known, you can easily get to all of its sub pages.

This is extremely helpful when, for example, you know that you want to go to a specific assignment for a class, but you don't know the assingment's name. Do this:

• Search [classname]
• Click "view sublinks"
• Then scroll to find the assignment!

Here are the sublink graphs of a few websites I use daily. The first is instructure (canvas) for highschool and the second is Github!

The example displayed below shows a typical github (web_nav)igation.

• Search "Web_Nav"
• "View Sublinks"
• Find a specific folder or go to issues and click "open"

This example also shows the sub-sub-link functionality for nested sublinks. There are back and forward buttons to help with this type of navigation.

Click above to read about this feature ^^^^^

Installation

The extension is (finally) listed on the chrome-web-store at WEB_NAV_EXTENSION

To install and use locally:

1. Clone repo into a desired directory using git clone https://github.com/Feel-ix-343/Web_Nav.git
2. Navigate to the webnav_analysis directory, and run wasm-pack build --release --target web in the command prompt. This will build the rust wasm code and produce an npm package in the webnav_analysis/pkg directory
   • Note, you will need to have rust and wasm-pack installed
3. Navigate to the extension directory, and run npm install to install dependencies. Then run npm run build to produce the extension files in the extension/dist directory. If you want to load on file change, run npm run watch
4. Open chrome://extensions and turn on developer mode
5. "Load Unpack" the ./extension/dist/ directory and open the extension