「2023.005|EN」TagMark: Maybe a Better Browser Bookmark Solution

Posted on Views: Word count in article: 2k Reading time ≈ 7 mins.

What Is TagMark

TagMark is a tag-based bookmark solution I created for:

  • Those who have a multitude of bookmarks and want to efficiently organize, easily retrieve, and share them with others.
  • Individuals who frequently work with GitHub, have starred numerous repositories, yet struggle with how to efficiently retrieve and effectively utilize this vast amount of information.

Watch this video TagMark - Introduction and User Guide for details:

Here is the demo page of TagMark, which collected all my bookmarks:

https://pwnfan.github.io/my-tagmarks / https://tagmark.pwn.fan

Features of the page:

  • Substantial tag based bookmarks
    • 2700+ tagged bookmarks (1800+ curated Github Repos) mainly focus on cybersecurity and related development
    • 1000+ tags with detailed tag definitions
  • Full featured tags
    • tag definitions (show / hide definition by left click on tags)
    • tag overview with counts
    • color difference depending on counts
  • Simple but powerful header filter for each column
    • thick client: static, pure frontend and js based, so it's fast responding
    • simple and useful filter grammar
    • quickly input tag name into filter by just a right click
    • press CTRL/CMD with left click in any filter input to call out multiple language document (English / Japanese / Chinese)
  • Supporting for URL GET parameters based filtering
    • static, pure frontend and js based
    • easy for sharing
  • Columns related things
    • detailed Github repository information
    • suppressible columns
  • Template Tag Doc

What Is A "Browser Bookmark Solution"

Before introducing details about TagMark, let's talk about what is a browser bookmark solution.

In my opinion, a browser bookmark solution usually contains two basic parts:

  1. a browser bookmark collector
  • for collecting(bookmark) urls for us when we view them in browser and consider their page content are useful and want to get back to later
  • optional products
    • browser built-in bookmark collector
    • Diigo Web Collector(Google Chrome Extension)
    • Diigolet: a light-weight version of Diigo Web Collector, and Diigolet is not a Chrome extension, but just a piece of javascript code.
  1. a bookmark manager
  • should have a good mechanism to store and structure the collectted bookmarks
  • should have a GUI for viewing, finding specified bookmark(s) we want
  • optional products

Why Do We Need Tags For Bookmarks

The content of most modern web page(url) is complex and may refer to multiple topics, making it difficult to classify it into one category.

However, traditional bookmark solutions such as browser built-in bookmark solution stores bookmarks in a hierarchical category(tree) structure.

Take my bookmarks for example:

1
2
3
4
5
6
7
Bookmark Bar
├── ...
├── Sec         # Cyber Security
│   ├── Tools       # Tools relating to Cyber Security
│   ├── ...
├── Tools       # Tools
│   ├── Charts      # Tools for marking Charts

Bookmark Bar > Sec folder has a child-folder Bookmark Bar > Sec > Tools and sibiling-folder Bookmark Bar > Tools, what is confused and disordered, may be I should create a new Bookmark Bar > Tools > Sec 😵‍💫 ? This is caused by the diversity of morden page(url) content and limititon from the hierarchical category(tree) structure of the bookmark manager.

This can be easily solved by a non-hierarchical and equative-level structure of tags instead of troditional catogary. This is what Diigo and TagMark do.

Why Not Diigo Bookmark Manager (Diigo My Library)

I hava tried several tag based bookmark solutions, Diigo is the only one meeting my needs.

Diigo Web Collector(Google Chrome Extension) and Diigo My Libraby are enough for most of my use cases, and are more powerful than just a bookmark manager:

  • Bookmarks: Still the easiest way to collect the sites you want to get back to later.
  • Tags: Tag your collected web pages with relevant terms for easy future retrieval
  • Highlights: Highlight text directly on any web page for personal reference or collaboration.
  • Sticky Notes: Add text, comments or reminders directly on any web page with sticky notes.
  • Outliner: Structure your research by automated streamlining through Diigo or by your own personal customization.
  • Groups: Share your research with colleagues, classmates and friends through our collaborative platform for knowledge sharing.
  • Archived Web Pages: Store your online resources with annotations intact forever, regardless of whether the original source is still active. (Premium Feature)
DiigoDiigo Home Page Diigo at a glance


Diigo also has iPhone adn Android apps able to share your bookmarks between PC and Mobile. This is great.

but Diigo My Libraby still has some weak points in my use cases:

  • Tags
    • there is nothing to explain a tag: usually we name a tag name as short as possible to opitimize the appearance when one page has quite a number of tags, but sometimes short words like acronym has confused meanings and we cannot recall the right one when we originally create the tag. So If there is a way for me to connect a tag to the definition of it, that will be great.
  • Filter
    • the filter speed is not fast: I have about 240 bookmarks and 190 tags in my library, which is just my collection of the past 3 years, and this is not a plenty of data in my opinion
    • the filtering function is limited: suppose I want to fitler security (tag sec) tools which do reconnaissance (tag recon) jobs, and should be implemented in Python (tag python) or Golang (tag golang) , the filter apply a or relation instead of the wanted and
    • a filter option for filtering added time of the bookmark is wanted: maybe a related filter for each property(information) of a bookmark is the ultimate solution
  • GUI
    • an alternative dark theme is wanted
    • the max limit of showing the bookmarks one page is not enough: max number is 96, and going to the next page is sometimes slow
  • Other
    • Github Information is wanted: as a cyber security practitioner and aslo a developer, a lot of pages collected by me in the bookmark are often Github Repos. Github repos with more stars and a higher update frequency of the code are usually more guaranteed for high quality and rapid frequent bug fix releases. So when I need to choose an Open Source tool/module/library/software from Github, those information is really important.

TagMark's Solution: How To Build Your Own TagMark

  • browser bookmark collector which support tags: here we directly use Diigo Web Collector(Google Chrome Extension) (or Diigolet) as our collector, which supports tags and is good enough
  • bookmark manager: TagMark related projects
    • tagmark-py (this repo)
      • exporting tagged bookmarked data from other third party services, e.g. diigo
      • converting other bookmark formats into Tagmark format, i.e tagmarks.jsonl
      • checking every tag has a been defined, i.e. checking tag consistency in tagmarks.jsonl and tags.json
      • getting tag definitions automatically with ChatGPT, i.e setting the values of the key definition in tags.json
      • making document from a template containing tag related syntaxes, i.e making tag-doc.md
    • tagmark-ui
      • a web page showing tagmarks.jsonl, tags.json and related docs
    • my-tagmarks
      • my own bookmarks data stored as TagMark data tagmarks.jsonl and tags.json
      • a Github Pages repo serving tagmark-ui and showing all my bookmarks, i.e https://pwnfan.github.io/my-tagmarks / https://tagmark.pwn.fan
      • a Github README including curated topics (i.e. tags) from my personal bookmarks

here we give a typical workflow of building your own TagMark solution

Steps note and customizing suggestions:

  • Steps requiring manual works
    • #1:
      • the first time involves a full workload of tagging all your bookmarks, which may take a considerable amount of time, but subsequent efforts only involve incremental tasks, which are much more easier
      • diigo related resources
        • Chrome Extension: Diigo Web Collector - Capture and Annotate
        • Diigo Website
        • Diigo Tools / Export
    • #2a.x
      • use alternative #2b is suggested
      • #2a.1 does't work well recently, may be due to some problems on the Diigo Tools / Export service side，which impelled me to made an alternative #2b instead
      • notice that #2b exploits a web API of diigo and acts like a crawler to retrieve your own bookmarks, it's a trade-off option so we'd better not frequently use it, and I have added some sleep time between successive requests
      • Diigo has its own official API for retrieving bookmarks but it is a premium (paid) feature, may be it's a better option to become a premium user and add the related retrieving feature (plugin) into tagmark-py export subcommand
    • #4.3
      • optional but suggested if you want reading-friendly tag names and exact tag definitions shown in the web page (i.e. tagmark-ui)
      • similar to #1, the first time involves a full workload, which may take a considerable amount of time, but subsequent efforts only involve incremental tasks and are much more easier
    • #6.x
      • optional, if you don't need a TagMark tag doc, you can skip these steps
      • may take a considerable amount of time if you have many bookmarks and tags, and want to well categorize them into different topics, but fortunately this is just an one-off work
  • #7, #8, and #9 form a unit in which the prerequisite dependencies are Steps #1 through #6. However, Steps #7, #8, and #9 are independent of each other and have no interdependencies
  • Some steps are auto done by Github Actions, most of which are located in repo my-tagmarks
    • to ensure these actions function correctly, you may need to set repo vars and secrets which will be used in these actions
      • #6.2 and #6.3
        • my-tagmarks/.github/workflows/update-tag-doc.yml
          • ${{ secrets.GH_PAT_TAGMARK }}
      • #7:
        • my-tagmarks/.github/workflows/update-tagmark-data.yml
          • ${{ secrets.GH_PAT_TAGMARK }}
          • ${{ vars.TAGMARK_DATA_EXPIRED_HOURS }}
      • #8: trigger when tagmark-ui has new commit
        • tagmark-ui/.github/workflows/github-page-update.yml: used to notify repo my-tagmarks of the tagmark-ui code updates, if you do not need this feature, you can disable it and skip setting repo vars and secrets
          • ${{ secrets.GH_PAT_TAGMARK }}
          • ${{ vars.GH_PAGES_REPO }}
        • my-tagmarks/.github/workflows/update-tagmark-ui.yml: used to receive the notify from tagmark-ui and synchronize the tagmark-ui code into my-tagmarks, if you do not need this feature, you can disable it and skip setting repo vars and secrets
          • ${{ secrets.GH_PAT_TAGMARK }}
          • ${{ env.TAGMARK_UI_DIR }}
      • #9
        • my-tagmarks/.github/workflows/github_pages.yml: no vars and secrets needed
    • so the repo vars and secrets need to set are
      • ${{ secrets.GH_PAT_TAGMARK }}
        • it is a personal access tokens (aka PAT) having the Contents(Read and Write access to code) permission to the code of repo my-tagmarks
        • you need to set it in both tagmark-ui and my-tagmarks if you need the UI code synchronizing feature
      • ${{ vars.TAGMARK_DATA_EXPIRED_HOURS }}
        • it determines the expiring time of the Github repo info to a bookmark, see tagmark-py subcommand covert for details
        • the value I've set is 23
        • only need to be set in repo my-tagmarks

FAQ

  • Why not use Github repository topics as tags directly?
    • some repository do not have topics
    • topics are redundant and vary in each individual
  • Are there any tag based cybersecurity resource collection like my-tagmarks?
    • offsec.tools: A vast collection of security tools for bug bounty, pentest and red teaming
    • WebHackersWeapons: Web Hacker's Weapons / A collection of cool tools used by Web hackers.