🎉 Plugin is working again, reverted some changes to gulpfile for brow…

…serify

* Separated strip and colorize (colorize ain't working yet)
* Strip will run on button click only now
* Readme now has some really working instructions (closes #2)
* Upgraded most of the plugins using npm-check ✌️

ReadMe.md

@@ -42,22 +42,26 @@ Total states run: 24
 
 ## Installation
 
-Until this is deployed to the Chrome web store, right now, you can do this:
-1. Clone the repository or hit the download button
-2. Open [chrome://extensions](chrome://extensions)
-3. Check the Developer mode checkbox
-![chrome-extensions](https://cloud.githubusercontent.com/assets/1264761/23734467/40ac4e3a-044d-11e7-8ef6-d5f3a043767a.png)
-4. Hit `Load unpacked extension...` button
-5. Select the `app` folder where you download the extension (which contains the `manifest.json` file)
-
-Then you're good to go!
+Until this is deployed to the Chrome web store, you can grab a build in the releases tab.
 
 ## Contributing
 
 * Pull requests are welcome! Please contribute :rocket:
 * This plugin uses [browserify][browserify] in a chrome extension and it works!
 * The plugin was created using [generator-chrome-extension](https://github.com/yeoman/generator-chrome-extension)
 
+## Development and requirements
+
+1. Clone the repository
+2. Build or watch (see commands section)
+2. Open [chrome://extensions](chrome://extensions)
+3. Check the Developer mode checkbox
+![chrome-extensions](https://cloud.githubusercontent.com/assets/1264761/23734467/40ac4e3a-044d-11e7-8ef6-d5f3a043767a.png)
+4. Hit `Load unpacked extension...` button
+5. Select the `dist` folder (which contains the `manifest.json` file)
+
+### Commands
+
 ```bash
 # install gulp and dependencies
 npm i -g gulp && npm i
@@ -75,6 +79,8 @@ gulp build
 gulp package
 ```
 
+More details at [generator-chrome-extension](https://github.com/yeoman/generator-chrome-extension)
+
 ## Problems? Questions?
 See [issues](https://github.com/GabLeRoux/ansi-colors-chrome-extension/issues/)
 

app/manifest.json

@@ -19,6 +19,10 @@
       "matches": ["http://*/*", "https://*/*"],
       "js": ["scripts/colorize.js"],
       "run_at": "document_end"
+    },
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["scripts/strip.js"]
     }
   ],
   "permissions": [

app/scripts.babel/background.js

@@ -11,8 +11,8 @@ chrome.tabs.onUpdated.addListener(tabId => {
 // executes colorize action on button click :)
 chrome.browserAction.onClicked.addListener(tab => {
   // No tabs or host permissions needed!
-  console.log('Turning ' + tab.url + ' red!');
+  console.log('Stripping ansi colors for ' + tab.url);
   chrome.tabs.executeScript({
-    file: 'scripts/colorize.js'
+    file: 'scripts/strip.js'
   });
 });

app/scripts.babel/colorize.js

@@ -1,40 +1,9 @@
 'use strict';
 
+// this is executed at every page load, would be nice to detect ansi chars and colorize here ;)
+
 // @see https://github.com/hughsk/ansi-html-stream
 var ansi = require('ansi-html-stream');
 var stripAnsi = require('strip-ansi');
 
-var fs = require('fs');
-
-var stream = ansi({chunked: false});
-
-// todo: find a way to get document.body.textContent as stream
-//console.log(document.body.textContent);
-
-// todo: move this to a button or submenu, whatever. at least this works
-document.body.innerText = stripAnsi(document.body.textContent);
-
-// pip document to ansi stream
-//documentAsStream = getDocumentAsStream();
-//documentAsStream.pipe(stream);
-
-// this should be the current page
-var file = fs.createWriteStream('output.html', 'utf8');
-
-stream.pipe(file, {end: false});
-stream.once('end', function () {
-  file.end('</pre>\n');
-});
-file.write('<pre>\n');
-
-
-//documentAsStream.on('data', function (data) {
-//    // not quite sure if I'll need to do something here
-//    // I think pipe is the magic part here
-//  })
-//  .pipe(stream)
-//  .on('close', function () {
-//    console.log('stream is over');
-//    stream.end(null)
-//  });
-
+console.log('todo: locate and colorize ANSI things!');

app/scripts.babel/strip.js

@@ -0,0 +1,43 @@
+'use strict';
+
+// This is currently called on extension button click
+
+// @see https://github.com/hughsk/ansi-html-stream
+var ansi = require('ansi-html-stream');
+var stripAnsi = require('strip-ansi');
+
+// var fs = require('fs');
+
+var stream = ansi({chunked: false});
+
+// the only thing that currently work
+// We get the document and strip ansi content :)
+console.log('About to strip ANSI characters!');
+document.body.innerText = stripAnsi(document.body.textContent);
+console.log('Done!');
+
+// todo: find a way to get document.body.textContent as stream
+
+// pipe document to ansi stream
+//documentAsStream = getDocumentAsStream();
+//documentAsStream.pipe(stream);
+
+// this should be the current page
+// var file = fs.createWriteStream('output.html', 'utf8');
+//
+// stream.pipe(file, {end: false});
+// stream.once('end', function () {
+//   file.end('</pre>\n');
+// });
+// file.write('<pre>\n');
+
+
+//documentAsStream.on('data', function (data) {
+//    // not quite sure if I'll need to do something here
+//    // I think pipe is the magic part here
+//  })
+//  .pipe(stream)
+//  .on('close', function () {
+//    console.log('stream is over');
+//    stream.end(null)
+//  });

gulpfile.babel.js

@@ -4,9 +4,18 @@ import gulpLoadPlugins from 'gulp-load-plugins';
 import del from 'del';
 import runSequence from 'run-sequence';
 import {stream as wiredep} from 'wiredep';
+import browserify from 'gulp-browserify'
 
 const $ = gulpLoadPlugins();
 
+function browseri(files, options) {
+  return () => {
+    return gulp.src(files)
+      .pipe($.eslint(options))
+      .pipe($.eslint.format());
+  };
+}
+
 gulp.task('extras', () => {
   return gulp.src([
     'app/*.*',
@@ -84,6 +93,10 @@ gulp.task('babel', () => {
       .pipe($.babel({
         presets: ['es2015']
       }))
+      .pipe(browserify({
+        insertGlobals : true,
+        debug : !gulp.env.production
+      }))
       .pipe(gulp.dest('app/scripts'));
 });