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 = const tree =
Add URLs to tree
// Set domainstreetree // Set pathstreetreetree
Get URL domain/path in tree
tree // returns domaintree // returns pathtree // returns undefined
Generate object representation of tree
tree // {// com: {// subdomains: {// foo: {// subdomains: {// bar: {// path: {// subpaths: {// bam: {// subpaths: {// fob: {},// boo: {}// }// }// }// },// subdomains: {// baz: {// path: {// searchParams: {// testing: ['123']// }// }// }// }// }// }// }// }// }// }
Generate string representation of tree
tree // .com// .foo// .bar// /bam// /boo// /fob// .baz// ?testing=123
Generate HTML representation of tree
tree // <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 domainstree // returns truetree // returns false // Delete pathstree // returns truetree // returns false // Check string representationtree // .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!