Yarn Ball is a browser extension that replaces npm commands on webpages with their yarn equivalents. It supports Chrome, Firefox, and Safari.

Yarn Ball is available via the Chrome Web Store and AMO. In the future it may be submitted to the Safari Extensions Gallery.

To run a one-off build run npm run build. Alternatively to rebuild when changes are detected run npm run build:watch.

This utilises webpack to compile the TypeScript, generate the approriate manifest.json and Info.plist files, and copy across static assets.

web-ext is recommended when developing on Firefox. This tool will load Yarn Ball in to Firefox and reload it when changes are detected. This can be achieved by running web-ext run inside the build/WebExtension directory.

Alternatively follow Mozilla's guide to installing add-ons.

Follow the instructions in Google's getting started tutorial and when prompted for the directory choose the build/WebExtension directory.

To load in Safari navigate to "Developer" => "Show Extension Builder", click the "+" in the bottom-left, choose "Add Extension..." and select the build/Yarn Ball.safariextension directory.

Down the line I would like to add a configuration page that would provide the following options:

• Enable/disable on specific URLs (currently it is only ignored on yarnpkg.com)
• Click on a replaced command to copy to the clipboard
• Show original command on hover
• Ignore npm install commands that don't include the save parameter

Special thanks to Joshua Robins for creating the logo for Yarn Ball.

Yarn Ball is released under the MIT licence. See the LICENCE file for the full licence text.