JavaScript bookmarklets are snippets of code that can manipulate webpages. They’re sometimes useful for small automation tasks, such as filling out a form or clicking buttons. In this post I’ll walk through one way to create a bookmarklet.

I used node version 8.1.2 and npm version 5.0.3 for the following steps. You can also do all this in a simple text editor, but the addition of a build step makes the workflow a bit faster. Without the build step, you have to escape the output and put it in an IIFE yourself or use an online bookmarklet generator).

In this example, we’re going to create a bookmarklet that takes the page title and displays it at the top of the page.

Start by creating a directory for the project, going into it, and initializing an NPM package:

$ mkdir show-title-bookmarklet
$ cd show-title-bookmarklet
$ npm init

When prompted for all the NPM init steps, just keep hitting enter (for the sake of the example).

Next, we’ll install the bookmarklet NPM package that can create our bookmarklet. Then, create a src directory to contain our source file:

$ npm install bookmarklet --save-dev
$ mkdir src

Now, edit the package.json file at the root of your project and add a “build” script that invokes the bookmarklet on the file in “src/index.js” and outputs it to “dist/bookmarklet.js”, like so:

  "scripts": {
    "build": "bookmarklet src/index.js dist/bookmarklet.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Let’s create the file at src/index.js that will be our bookmarklet source:

var existingContainer = document.querySelector('.title__bookmarklet');

if (existingContainer) { 
  existingContainer.remove();
}

var titleContainer = document.createElement('div');

titleContainer.className = 'title__bookmarklet';
titleContainer.style.textAlign = 'center';
titleContainer.style.fontSize = '16px';
titleContainer.style.fontFamily = 'Arial';
titleContainer.style.padding = '20px';
titleContainer.style.backgroundColor = 'lightyellow';
titleContainer.style.position = 'absolute';
titleContainer.style.left = 0;
titleContainer.style.top = 0;
titleContainer.style.width = '100vw';
titleContainer.style.zIndex = '99999';

titleContainer.textContent = document.title;

document.body.appendChild(titleContainer);

Back at the command line, run npm run build in order to create your bookmarklet.js in the “dist” folder. The file will contain code in the following format:

javascript:(function(){/* your code here */})()

Copy the contents of dist/bookmarklet.js. In your browser (other than Edge :), add a new bookmark and paste the bookmarklet contents in the URL field and set the page title to whatever you want. These steps are highlighted in the GIF below.

And done! Congratulations, you made a bookmarklet with a build step. Now, if you want to edit the source file you can run npm run build and regenerate it to have a completely new version. The example we created here is available as a GitHub repo, too.