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:
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
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:
Let’s create the file at src/index.js that will be our bookmarklet source:
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:
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.