Willow

Willow was originally desinged and implemented as a Bilkent CS Senior Design Project. Later it was improved with new features and bug fixes.

Dependencies

Cheerio npm and node-fetch npm

Installation

In order to use this project as an extension to Google Chrome:

• Download/clone the project from this repository
• Install the following dependicies in the repository Cheerio npm and node-fetch npm
• Navigate to chrome://extensions or Chrome menu > More Tools > Extensions or Extensions menu button > Manage Extensions
• Make sure Developer mode is enabled (toggle switch on the top right)
• Click Load unpacked button and choose willow/demo/ as the extension directory

After these steps, the extension should be loaded and be ready for use. To see any implememented changes during the develepment process, click the reload button.

Usage

Once the extension is loaded, the user can browse through the Internet as they please and whevener they want to see the current graph of their browsing, they can click the extension icon on the top right corner. This will present the browse history as an interactive graph, where the nodes correspond to the web pages and the edges represent hyperlinks followed from one page to another. The currently viewable graph belongs to the current browse session. At any time the user has the option to start a new session (empty the graph and start from scratch). They may also export the current session at any time to import back at a later time (or exchange with a friend).

When the extension icon is clicked, by default the Willow extension window will be opened in a new dedicated tab. The user may also choose to view Willow on a side panel. This side panel is movable and resizable.

The user can revisit a desired web page by double-clicking on the associated node (or restore any previous session and visit the desired webpage from that session).

Discover web site map

Willow also provides a tool to crawl a particular URL and find all webpages underneath the given page. Willow also displays the number of broken links on a particular page, if any. This feature should be especially useful for web site developers as they can clearly see the navigation patterns from the home page to others as well as any broken links.

Keyword search

The user may also search a keyword using the Search tool availble in the toolbar. The nodes whose URL or title contain the keyword will be highlighted as a result.

Node annotations

• The green arrow on the upper left of a node indicates the current active page in a tab. So, if multiple tabs are opened after the session started, there might be multiple such pages (one per tab).

• The note icon on the lower right of a node indicates that a note has been added to the web page associated with this node.

The users are also allowed to change each node's border color, size, etc. for classification purposes.

Team

Cem Cebeci, Can Cebeci, Efe Dagdemir, Tuana Turkmen, Sezin Zeydan, Selbi Ereshova, and Ugur Dogrusoz of Computer Engineering Department at Bilkent University.