maxgalbu / ansi-colors-chrome-extension

:earth_africa: ANSI colors in your browser!

ANSI Colors chrome extension

Chrome extension that converts ANSI characters to colors on the fly / on button click for the lazy ones. Does what ansi-html-stream does but within browser.

Work in progress (pressing on button currently strip ansi characters for now) :P

Motivation

I once used to run salt commands with jenkins, which outputs colored data by default, but it gets unreadable in a webpage! There's a jenkins plugin for this, but I tought why not a plugin for chrome itself? Here it is :)

Here's a related blog post I wrote about ansi characters and colors: Keep saltstack colored output

Todo

• Figure out how to pass data to ansi-html-stream (using a stream? maybe I should find a different solution) See #1 help needed!
• Add support for colors instead of stripping colors
• Create an icon
• Provide ansi stripping capability strip-ansi 🎉
• Publish

Usage

Right now, hitting extension button can convert from this:

Summary
-------------�[0m
�[0;32mSucceeded: 24�[0m (�[0;32mchanged=3�[0m)
�[0;36mFailed:     0�[0m
�[0;36m-------------
Total states run:     24�[0m

to this

Summary
-------------
Succeeded: 24 (changed=3)
Failed: 0
-------------
Total states run: 24

Installation

From the chrome webstore

ANSI Colors chrome extension

Manually from releases page

1. Download latest zip file in the releases tab.
2. Unzip the the file
3. Open chrome://extensions
4. Drag n drop the folder of the plugin

Have fun! ✌️

Contributing

• Pull requests are welcome! Please contribute 🚀
• This plugin uses browserify in a chrome extension and it works!
• The plugin was created using generator-chrome-extension

Development and requirements

1. Clone the repository
2. Build or watch (see commands section)
3. Open chrome://extensions
4. Check the Developer mode checkbox
5. Hit Load unpacked extension... button
6. Select the dist folder (which contains the manifest.json file)

Commands

# install gulp and dependencies
npm i -g gulp && npm i

# Transform updated source written by ES2015 (default option)
gulp babel

# or Using watch to update source continuously
gulp watch

# Make a production version extension
gulp build

# compress and prepare for the chrome web store (after gulp build)
gulp package

More details at generator-chrome-extension

Problems? Questions?

See issues

License

MIT © Gabriel Le Breton