web-tree
v2.2.0
Published
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
Downloads
2
Readme
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
- Clone the repo and bundle the library for the browser with
npm run bundle
- Open Firefox and enter
about:debugging#/runtime/this-firefox
into the search bar - Click "Load Temporary Add-On"
- 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 filter
ed 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!