web-tree

This repo has two components:

• An npm library for constructing URL trees
• A Firefox add-on that builds a URL tree as you browse and allows you to view the tree and filter by domain and/or path

Add-on

Install

You can install it here!

For development

1. Clone the repo and bundle the library for the browser with npm run bundle
2. Open Firefox and enter about:debugging#/runtime/this-firefox into the search bar
3. Click "Load Temporary Add-On"
4. Select add-on/manifest.json from the project directory

Usage

Open devtools in Firefox and click on web-tree.

You should see show and clear buttons in the panel and a filter input.

The show button will display an expandable/collapsible subtree that falls under the filtered domain/path (if any).

The clear button wipes the state of the tree clean.

Library

Install

npm i web-tree

Usage

Create a tree

'use strict'

const Tree = require('web-tree')

const tree = new Tree()

Add URLs to tree

// Set domains
tree.set('https://foo.com')
tree.set('https://bar.foo.com')

// Set paths
tree.set('https://baz.bar.foo.com?testing=123')
tree.set('https://bar.foo.com/bam/fob')
tree.set('https://bar.foo.com/bam/boo')

Get URL domain/path in tree

tree.get('https://foo.com')             // returns domain
tree.get('https://bar.foo.com/bam/fob') // returns path
tree.get('https://foo.com/')            // returns undefined

Generate object representation of tree

tree.toObject()

// {
//   com: {
//     subdomains: {
//       foo: {
//         subdomains: {
//           bar: {
//             path: {
//               subpaths: {
//                 bam: {
//                   subpaths: {
//                     fob: {},
//                     boo: {}
//                   }
//                 }
//               }
//             },
//             subdomains: {
//               baz: {
//                 path: {
//                   searchParams: {
//                     testing: ['123']
//                   }
//                 }
//               }
//             }
//           }
//         }
//       }
//     }
//   }
// }

Generate string representation of tree

tree.toString()

// .com
//   .foo
//     .bar
//       /bam
//         /boo
//         /fob
//       .baz
//         ?testing=123

Generate HTML representation of tree

tree.toHTML()

// <button class="web-tree-btn">.com</button>
// <div class="web-tree-div">
//   <button class="web-tree-btn">.foo</button>
//   <div class="web-tree-div">
//     <button class="web-tree-btn">.bar</button>
//     <div class="Web-tree-div">
//       <button class="web-tree-btn">/bam</button>
//       <div class="web-tree-div">
//         <button class="web-tree-btn">/boo</button>
//         <div class="web-tree-div">
//         </div>
//         <button class="web-tree-btn">/fob</button>
//         <div class="web-tree-div">
//         </div>
//       </div>
//       <button class="web-tree-btn">.baz</button>
//       <div class="web-tree-div">
//         <p>?testing=123</p>
//       </div>
//     </div>
//   </div>
// </div>

Delete URLs from tree

// Delete domains
tree.delete('https://baz.bar.foo.com')     // returns true
tree.delete('https://bam.bar.foo.com')     // returns false

// Delete paths
tree.delete('https://bar.foo.com/bam/fob') // returns true
tree.delete('https://foo.com/')            // returns false

// Check string representation
tree.toString()

// .com
//   .foo
//     .bar
//       /bam
//         /boo

Test

npm test

Lint

npm run lint

Documentation

npm run doc

Contributing

Please do!

If you find a bug, want a feature added, or just have a question, feel free to open an issue. In addition, you're welcome to create a pull request addressing an issue. You should push your changes to a feature branch and request merge to develop.

Make sure linting and tests pass and coverage is 💯 before creating a pull request!