https://github.com/shadowzzh/quick-nav

A browser plug-in automatically generates a page content outline (TOC), and users can click on an entry in the outline to quickly navigate to the appropriate section of the page
https://github.com/shadowzzh/quick-nav

chrome-extension lit manifest-v3 toc typescript vite webcomponents

Last synced: 8 months ago
JSON representation

A browser plug-in automatically generates a page content outline (TOC), and users can click on an entry in the outline to quickly navigate to the appropriate section of the page

• Host: GitHub
• URL: https://github.com/shadowzzh/quick-nav
• Owner: Shadowzzh
• License: mit
• Created: 2023-12-19T09:05:57.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-26T13:48:03.000Z (over 1 year ago)
• Last Synced: 2024-12-29T20:37:24.626Z (9 months ago)
• Topics: chrome-extension, lit, manifest-v3, toc, typescript, vite, webcomponents
• Language: TypeScript
• Homepage:
• Size: 28.6 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
English · [简体中文](./docs/README.zh-EN.md) (by ChatGPT)



    



Quick Nav


A browser extension. Automatically generates a table of contents (TOC) for page content, allowing users to click on items in the outline to quickly navigate to the corresponding sections of the page.

## Preview



    



## Features

### Display

  

    

      Basic Function

      Draggable

    

  

  

    

      

      

    

  

  

    

      Window Size Modification

      Double-Click to Return to Original Position

    

  

  

    

      

      

    

  

  

    

      Expand | Hide

      Show | Hide Level 1

    

  

  

    

      

      

    

  

  

    

      Quick Maximize

      Refresh

    

  

  

    

      

      

    

  

  

    

      Expand All | Hide All

      Theme Color

    

  

  

    

      

      

    

  

### Asynchronous Loading of Code

This extension injects a simple piece of code only when the page loads, not affecting the page's load speed. The main part of the code is requested only when the plugin icon is clicked (as shown below).

![assets](./docs/images/assets.png)

![assets](./docs/images/assets_code.png)

![assets](./docs/images/gif/async.gif)

## Technology Stack

- [Vite](https://vitejs.dev)

- [Lit](https://lit.dev)

## To-Do

- [x] Close the plugin

- [ ] Search functionality

- [ ] Maximize / Minimize

- [ ] Return to the top

- [ ] Icon hints

- [ ] Navigate to the selected node

- [ ] Personalization settings

  - [ ] Background blur transparency

  - [ ] Custom colors

  - [ ] Enable / Disable icon hints

- [x] Draggable

- [x] Window size modification

- [x] Double-click to return to original position

- [x] Double-click border to maximize window

- [x] Refresh

- [x] Dark mode

- [x] Expand / Collapse

- [x] Expand / Collapse level 1

## Conclusion

Suggestions and ideas💡, CodeReview 💻 from all experts are welcome.