SUZUSHINLAB
Journal / English

I Built Bookmarklet Maker to Compress JavaScript into One Line

· Shingo Suzuki (Suzushin)

Japanese original: .

ProgrammingTypeScriptWordPress developmentBookmarklets

Hi, I'm Shingo Suzuki, also known as Suzushin.

Recently, I wrote about teaching myself programming and my mixed feelings about vibe coding. I said I wanted to implement things myself when I was capable of doing so. To put that into practice, I made a small tool.

Following Card Codex and Override, Bookmarklet Maker is the third app in SUZUSHINLAB Studio.

What kind of tool is it?

Enter JavaScript, and it compresses it into a single line and turns it into a bookmarklet: a small program you can save in your browser's bookmarks bar and run with a click.

There are already several similar tools. Honestly, my main motivation wasn't huge demand, but wanting to build something as part of my own learning. Rather than a search-traffic project, think of this as another entry in my “I made this” series, alongside Card Codex and Override.

Very simple features

  • Paste JavaScript into the input field.
  • Toggle “Wrap in an IIFE,” a way to avoid polluting global variables.
  • Toggle “Also remove block comments.”
  • Press “Create bookmarklet” to generate a single-line link.
  • Drag the generated link directly to your bookmarks bar, or get it as text to copy.

All processing happens in your browser. The code you enter isn't sent to a server.

A simple example to try

If you're unsure what JavaScript to enter, here's something you can copy and paste. Put it into the text field and press “Create bookmarklet.”

Make the page grayscale

document.documentElement.style.filter = "grayscale(100%)";

A small but important bug I noticed

Originally, I had one checkbox for removing comments. With it off, neither line comments (//) nor block comments (/* */) were removed.

After building it, I realized this caused a surprisingly troublesome problem.

To combine multiple lines, the tool replaces line breaks with spaces. If a line contains // コメント, putting everything on one line means everything after // becomes part of that same line. All the remaining code gets commented out.

In other words, the more diligently someone commented their code, the more likely this design was to silently generate a broken bookmarklet.

I changed it so line comments (//) are always removed automatically, while removing block comments (/* */) is optional. The key was separating necessary processing from optional processing, rather than simply taking a feature away.

Another obstacle: WordPress rejected the page with a 403

As an aside, when I tried publishing the tool's page to WordPress, it was rejected with a 403 error.

Investigating showed that the server's SiteGuard Lite security feature saw a particular word followed by a colon—the notation for the JS URL scheme—in the page text as an attack pattern. It was a legitimate explanation, but to an automated filter it looked suspicious.

Rephrasing it as “a bookmarklet link” let me publish successfully. Discovering these small things is part of what makes self-study interesting. In fact, I adjusted one passage in this article for the same reason.

Give it a try

You can use Bookmarklet Maker from SUZUSHINLAB Studio.

It may not be a tool with enormous demand. But as with Card Codex and Override, I'll keep improving it when I notice things through actual use.

I plan to add more “I made this” projects as an extension of my self-taught programming journey. See you in the next article!

Read the Japanese original

On this page
  1. What kind of tool is it?
  2. Very simple features
  3. A simple example to try
  4. A small but important bug I noticed
  5. Another obstacle: WordPress rejected the page with a 403
  6. Give it a try