A script in the bookmarks bar

A bookmarklet is a small JavaScript script saved as a bookmark. I run it from the bookmarks bar to carry out an action on the open page, without installing an extension.

I find this format useful for short, repetitive tasks. I also shared some with colleagues, based on their needs. To make them easier to use, I brought them together in shared documentation explaining what each one does and what result to expect.

Getting the information needed for a check

On an e-commerce site, a product's displayed name is not always enough to identify it. When investigating an issue or passing on a reference, the product code is often more useful. A bookmarklet can read that code from data exposed by the page and display it immediately.

I also use this approach for whole lists: retrieving the references of the products on screen alongside the active filters, or collecting product codes and names in a table that can be copied. This avoids repeating the same lookup for each product. A page's technical name in the CMS is another useful candidate, when it is available in the browser.

To prepare a screenshot, another shortcut hides elements that get in the way of the area I want to show: chat windows, banners or floating elements.

SEO checks and page context in one click

One of these bookmarklets opens an SEO inspection panel directly in the page. It brings together the information I check regularly, with values I can copy into an investigation or a discussion:

  • the current URL and canonical URL;
  • the SEO title and meta description, including their character counts;
  • the directives in the meta robots tag;
  • Open Graph tags: title, description, image and sharing URL;
  • the h1 and h2 headings, along with the number of h1 elements;
  • the word count in the main content;
  • images with a missing or empty alt attribute;
  • structured data in JSON-LD format.

The panel also flags points worth checking, such as a missing title, a noindex directive or a canonical that differs from the open URL. The values stay visible together, without having to find each one separately in the inspector.

I also bring a context identifier from the data layer into the panel. Depending on the implementation, it can also provide the page's technical name or a section identifier. These references complement the SEO information and help connect the displayed page with its organisation in the CMS.

Cutting down repetitive work

Multilingual checks quickly multiply identical actions. A shortcut can move from one language version to the next by adjusting the URL. This is useful when the pages follow a predictable structure. If the paths themselves are translated, the tool needs the actual page mappings: replacing a language code is no longer enough.

Preparing translations is another practical example. A tool can extract text strings from a content block, collect them in a CSV file and make them easier to pass on for translation. The text can then be grouped by language within the component, rather than spread across several copies of the same code.

I also use shortcuts to prefill test forms and avoid entering the same data each time I check a user journey.

Maintaining focused shortcuts

A small script can fit entirely inside the bookmark. For a more developed tool, the bookmarklet can load a JavaScript file hosted at a known address. A shared version makes distribution easier, but it also depends on the file being available, caching and the site's security rules.

Maintenance mainly involves CSS selectors, attributes and data specific to the site. Changes to that structure may require an update to the shortcut.