Chrome Bookmarklet development harness; Using h3anchor bookmarklet with Auto Header IDs and TOC VSCode extn for TOC generation

Quick Info


Use the h3anchor Chrome bookmarklet to add anchor links to specific h3 headers in Blogger. Then generate a TOC for these anchored sections using the Auto-header-ids-toc VSCode extension. This approach is faster and safer than applying the extension to the whole post when only a few sections need anchors and TOC.
===================================================================
===================================================================

Details

Yesterday (10 Feb 2026), with the help of ChatGPT, I experimented with setting up a small development workflow for Chrome bookmarklets and using it for a particular bookmarklet I needed. 

Contents

Chrome Bookmarklet Development and Testing Harness

Developing bookmarklets can be tricky because you need to test JavaScript in a browser context and also produce a minified, URL-encoded version for Chrome bookmarks.

To simplify this, I created a small development and testing harness in an HTML file:

  • A textarea where you can paste or type your header text or HTML.
  • A button that runs the bookmarklet logic in a controlled environment.
  • A preview of the clipboard output so you can verify what the final bookmarklet would produce.

This harness allows me to iterate on bookmarklet code quickly without having to constantly create or edit Chrome bookmarks.

The h3anchor Bookmarklet

One of the bookmarklets I developed using the harness is h3anchor. Its purpose is simple:

  • Add an anchor link (#) to any <h3> section header.
  • Automatically generate a stable id if missing, based on the heading text.
  • Copy the resulting HTML to the clipboard so it can be pasted directly into Blogger or other HTML editors.

Usage is straightforward:

  1. Select the heading you want to process. If it already has <h3> tags, select the whole tag; if it is plain text, just select the text.
  2. Click the h3anchor bookmarklet in your Chrome bookmarks.
  3. The generated <h3> HTML with the anchor link is copied to your clipboard, ready to paste.

This workflow, combined with the dev harness, allows me to safely develop, test, and maintain multiple bookmarklets, keeping experimental code separate from stable, ready-to-use bookmarklets.

Using h3anchor along with Auto-header-ids-toc VSCode extn for TOC generation

That did a good job. It was convenient as I was able to do the editing in Blogger's Edit HTML of post feature itself and was in control of the modification. Specifically I was able to see the small h3 element (with anchor) which was being added when I copy-pasted from clipboard and verify that it was OK. Then I deleted the original h3 element (without anchor).

Next I wanted to generate a TOC for the anchor linked sections created above. For that I used my auto-header-ids-toc VSCode extension. I had to add h3 to the extension's settings: auto-header-ids-toc.headersToProcess. Process followed for that:
  1. Select the Preferences: Open User Settings command in the Command Palette (Ctrl+Shift+P)
  2. User tab is selected by default (if not, select User tab)
  3. In Search settings box, typed auto-h 
  4. That showed 'Auto-header-ids-toc: Headers To Process' settings with its current values (it was 1 and 2) and an Add Item button
  5. I used the Add Item button to add 3. There was no Save button. Simply adding 3 seems to have saved the setting.
  6. It seems these settings apply globally to all VSCode instances. But I need to confirm this.
After that, it was simple to add TOC to my blog post. Steps followed:
  1. Copy-Paste HTML of blog post from Blogger to a temp file in VSCode.
  2. Position cursor at top of file.
  3. Use VSCode Command Palette (Ctrl+Shift+P) to run "Auto Header IDs and TOC: Create Table of Contents" command.
  4. The TOC is inserted at beginning of post. As it is h3 it was nested 3 levels deep. I deleted two levels of <ul> tags.
  5. This TOC alone and NOT whole blog post HTML is copy-pasted into Blogger post through Edit HTML page and saved.
Note that the VSCode extension 'Auto Header IDs and TOC' has an 'Add IDs to Headers' command which: 'Adds id attributes to headers that do not already have one. Headers with class="no-toc" are skipped.' The disadvantage of this command is that by default it will add anchor ids to all h1, h2 and h3 elements (as I have added h3 to extension settings). 

To skip unwanted h1, h2 and h3 headers, I have to assign class="no-toc" for all such unwanted headers. The extension has a "Mark Configured Headers as no-toc" command which automates this by going through the HTML file and applies no-toc class to each h1, h2 and h3 header. But this is a global action across the whole file which has to be followed through by search for no-toc and removing it for headers for which anchor id is wanted. 

But this process updates the whole HTML file and I have to then copy paste this whole HTML file from VSCode to Blogger Edit HTML page which has to be done carefully and checked carefully as the whole Blogger post has been changed. 

I find such a process to be inappropriate for posts where I have a few specific sections with headers that I want to create anchors for and generate TOC for, while skipping all other h1, h2 and h3 headers in the post. For such cases, the alternative approach covered in this post of using h3anchor bookmarklet followed by Auto-header-ids-toc VSCode extn for TOC generation is more convenient and quicker to do and, importantly, verify.

The Auto-header-ids-toc VSCode extn does not add a # anchor next to the section header which is a nice feature of h3anchor bookmarklet. The visibile # anchor link was a simple enough solution appropriate for a bookmarklet. The resulting UI seems quite good. The # at the end is not intrusive and is a nice indicator that that section is linked and the link can be found by clicking on the # or hovering over it and looking at the status bar. Great feature for minimal cost. Adding the same feature to Auto-header-ids-toc VSCode extn may not involve much coding work but I am concerned that it might involve lot of testing and any possible bug-fixing work which will suck up significant time. So I will look at that enhancement only when necessary.

Interestingly, for this post which has only a few header sections it is more convenient to use the VSCode extension 'Auto Header IDs and TOC' to do the entire work of creating anchors and then TOC. I will do that as a final step after this post has stabilized. [Update: Did that for this post's TOC.]

Comments

Post a Comment