How it works
Take the final output of your webpack config, with all your desired transformations/bundling/minification/ect. included. This plugin applies a final transformation of wrapping the function in an IIFE, applying URI encoding and perpend
That code is then wrapped in styled html document to display the bookmarklet link and project information and instructions for users to use the bookmarklet. The page is customizable via multiple optional plugin parameter properties. (future versions will include a template engine support for full customization).
*Currently only supports webpack production mode builds.
See example below for more details.
npm install --save-dev bookmarklet-webpack-plugin
// index.jsconst hello = 'hello';const world = 'world';console;
// webpack.config.jsconst BookmarkletPlugin = ;const path = ;moduleexports =mode: 'production' // Currently only supports production mode.entry: './src/index.js'output:filename: 'main.js'path: path// ...plugins: plugins:input: 'main.js' // required (must match webpack output)output: 'index.html' // <- defaultlinkName:'Bookmarklet' // <- defaultpageTitle: 'Cool Bookmarklet' // default -> 'Bookmarklet'repo:'' // default -> '' (removed line)author:'Example Author' // default -> '' (removed line);
Demo Link - open console log to see
hello world when clicking the bookmarklet link.
<!-- index.html -->Cool BookmarkletBy: Example AuthorBookmarkletDrag this button to your bookmarks bar to save it as a bookmarklet.See source at
*Bookmarklet href link will vary depending on your webpack config and if you are using babel.
Future Features and Project Goals
- Basic unit tests
- End to end test with multiple example setups
- Add error handling for edge cases with Webpack's builtin error handling api
- setup schema-util for options parameter object
- Add template engine support (allow for fully customizable html output)
If you would like to get involved in an open source project I encourage you to checkout the Contributing guidelines and open a discussion on the issues board. There is plenty to do and I would love your help. :)
Inspirations / Credits
I wanted to simplify the build process of my bookmarklet: paintballnet-hotkeys. I started with
mrcoles/bookmarklet which is a great package with a lot of features but it didn't integrate too well with my webpack config. Webpack minification process would strip the meta comments that killed most of the packages features. I then investigated a webpack solution to reduce the build steps and found
ivanzk/bookmarklet-wrapper-webpack-plugin. This package was a great but didn't output the html template page that I desired.