Updated gulp task names

gulp/chrome.js

@@ -1,32 +1,56 @@
 var gulp = require('gulp');
 var del = require('del');
 var getPackageDetails = require('./package-details');
+var io = require('socket.io');
 var template = require('gulp-template');
 var imagemin = require('gulp-imagemin');
 var pngquant = require('imagemin-pngquant');
 var rename = require("gulp-rename");
+var watch = require('gulp-watch');
+var webpack = require('webpack-stream');
 var zip = require('gulp-zip');
 
 // web socket port for chrome auto-reload extension (https://github.com/JeromeDane/chrome-extension-auto-reload)
 var WEB_SOCKET_PORT = 8890;
 
 // generate a zip file for the chrome extension
-gulp.task('chrome', ['chrome-build'], function () {
+gulp.task('chrome:dist', ['chrome:build'], function () {
 	return gulp.src('build/chrome/**')
 			.pipe(zip('chrome-extension-v' + getPackageDetails().version + '.zip'))
 			.pipe(gulp.dest('dist/chrome'));
 });
 
 // build the chrome extension
-gulp.task('chrome-build', ['script', 'chrome-manifest', 'chrome-options', 'chrome-images', 'chrome-script'], function (callback) {
+gulp.task('chrome:build', ['chrome-manifest', 'chrome-options', 'chrome-images', 'chrome-script'], function (callback) {
 	callback();
 });
 
-// copy userscript to chrome build directory
+// Create a full build for Chrome and automatically update it when files change
+gulp.task('chrome:watch', ['chrome:build', 'chrome-watch-manifest', 'chrome-watch-options'], function (callback) {
+	gulp.watch('src/**/*.*', ['chrome-manifest', 'chrome-script', 'chrome-options']);
+
+	io = io.listen(WEB_SOCKET_PORT);
+	watch('./build/chrome/**', function (file) {
+		console.log('change detected', file.relative);
+		io.emit('file.change', {});
+	});
+});
+
+// pack content script for Chrome
 gulp.task('chrome-script', ['script'], function () {
-	return gulp.src('dist/userscript/userscript.user.min.js')
-			.pipe(rename('userscript.user.js'))
-			.pipe(gulp.dest('build/chrome'));
+
+	return gulp.src("./src/userscript.code.*")
+		.pipe(webpack({
+			module: {
+				loaders: [
+					{test: /\.png$/, loader: "url-loader?mimetype=image/png"},
+					{test: /\.css$/, loader: 'style!css' }
+				]
+			},
+			devtool: 'inline-source-map'
+		}))
+		.pipe(rename("content.js"))
+		.pipe(gulp.dest('./build/chrome'));
 });
 
 // generate the chrome manifest from the template
@@ -68,15 +92,3 @@ gulp.task('chrome-watch-options', function() {
 gulp.task('chrome-watch-script', function() {
 		gulp.watch('src/userscript/*.*', ['chrome-script']);
 });
-
-// Create a full build for Chrome and automatically update it when files change
-gulp.task('chrome-watch', ['chrome-build', 'chrome-watch-manifest', 'chrome-watch-options'], function (callback) {
-	gulp.watch('src/**/*.*', ['chrome-manifest', 'chrome-script', 'chrome-options']);
-
-	io = io.listen(WEB_SOCKET_PORT);
-	watch('./build/chrome/**', function (file) {
-		console.log('change detected', file.relative);
-		io.emit('file.change', {});
-	});
-});
-

gulp/script.js

@@ -1,12 +1,3 @@
-/*
- * Gulp tasks:
- * 
- * default			Create full builds and distribution files for all platforms
- * build-chrome		Create a full build for Chrome
- * dist-chrome		Create a full distribution file for Chrome
- * watch-chrome		Create a full build for Chrome and automatically update it when files change
- */
-
 var concat = require('gulp-concat');
 var uglify = require('gulp-uglify');
 var del = require('del');
@@ -24,6 +15,17 @@ gulp.task('script', ['script-merge-min'], function() {
 	del("build/userscript");
 });
 
+// Automatically update dist/userscript/userscript.user.js when changes are made to files in src/
+gulp.task('script:watch', ['script'], function (callback) {
+	gulp.watch('src/**/*.*', ['script-build']);
+
+	io = io.listen(WEB_SOCKET_PORT);
+	watch('./build/chrome/**', function (file) {
+		console.log('change detected', file.relative);
+		io.emit('file.change', {});
+	});
+});
+
 // generate the script header required for userscript parsers like Greasemonkey
 gulp.task('script-header', function() {
 	return gulp.src('./src/userscript.head.js')
@@ -71,14 +73,3 @@ gulp.task('script-merge-min', ['script-min', 'script-header'], function(callback
 			.pipe(concat('userscript.user.min.js'))
 			.pipe(gulp.dest("./dist/userscript"));
 });
-
-// Automatically update dist/userscript/userscript.user.js when changes are made to files in src/
-gulp.task('script-watch', ['script'], function (callback) {
-	gulp.watch('src/**/*.*', ['script-build']);
-
-	io = io.listen(WEB_SOCKET_PORT);
-	watch('./build/chrome/**', function (file) {
-		console.log('change detected', file.relative);
-		io.emit('file.change', {});
-	});
-});

readme.md

@@ -41,16 +41,16 @@ If you make useful changes, please create a pull request so I can get them merge
 The following gulp build tasks can be used by running them on in your command line interface:
 
 * `gulp script` - Compile a userscript version of this code to `dist/userscript`
-* `gulp chrome-build` - Create `build/chrome` directory and files which can be loaded as an unpacked extension
-* `gulp chrome` - Same as `chrome-build`, plus create a zip file in `dist/chrome/chrome-extensionv[version].zip`
+* `gulp chrome:build` - Create `build/chrome` directory and files which can be loaded as an unpacked extension
+* `gulp chrome:dist` - Create a zip file in `dist/chrome/chrome-extensionv[version].zip`
 * `gulp clean` - Removes `dist/` and `build/` folders, along with their contents
 
 #### Watching for Changes in Source Code
 
 You can watch the source code for changes and automatically re-build the related files by starting the following gulp tasks:
 
-* `gulp script-watch` - Watch for changes in the `src/` folder, and automatically update `build/userscript/`
-* `gulp chrome-watch` - Watch for changes in the `src/` folder, and automatically update `build/chrome/`
+* `gulp script:watch` - Watch for changes in the `src/` folder, and automatically update `build/userscript/`
+* `gulp chrome:watch` - Watch for changes in the `src/` folder, and automatically update `build/chrome/`
 
 #### Troubleshooting
 
@@ -60,12 +60,12 @@ If you get an error about `gulp` not being in your path when you run the command
 
 Using `gulp chrome-watch` with [Chrome Extension Auto Reload](https://github.com/JeromeDane/chrome-extension-auto-reload) installed and running allows you to load this project as an unpacked extension from `build/chrome` and have it automatically reload any time the files in `src/` are changed. This saves you having to go to the Chrome extensions tab and hit reload every time you make any changes.
 
-## License 
+## License
 
 [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by-nc-sa/3.0/)
 
 You can share or modify this work as long as you:
 
 1. Link back to this page
 2. Don't use this or derivatives of this for commercial use
-3. Share your changes so that others can benifit from your improvements. 
+3. Share your changes so that others can benifit from your improvements.

src/chrome/manifest.json

@@ -13,9 +13,9 @@
 	"web_accessible_resources":["images/close_16_r8.png"],
 	"content_scripts": [
 		{
-			"js": ["userscript.user.js"],
+			"js": ["content.js"],
 			"matches": ["http://www.youtube.com/*", "https://www.youtube.com/*"],
 			"run_at": "document_end"
 		}
 	]
-}
+}

src/userscript.code.js

@@ -3,7 +3,7 @@ require('./userscript.style.css');
 var click = require('simulate-click-js');
 
 function RemoveFeedFromYouTube() {
-	
+
 	// configuration variables
 	var removeButtonClass = 'bcRemoveButton';
 	var feedItemContainerClass = 'feed-item-container';
@@ -24,7 +24,7 @@ function RemoveFeedFromYouTube() {
 			window.scroll(x,y);
 		},50);
 	}
-	
+
 	function removePost(postElem) {
 		var removeTrigger = getRemoveTrigger(postElem);
 		click(removeTrigger);
@@ -45,6 +45,10 @@ function RemoveFeedFromYouTube() {
 	// inject a remove button into a post
 	function injectButton(postElem) {
 		if(!postElem.className.match(/buttonEnabled/)) {
+
+			postElem.style.border = '2px solid red';
+			return;
+
 			postElem.className += ' buttonEnabled';
 			var removeTrigger = getRemoveTrigger(postElem);
 			if(removeTrigger) {
@@ -69,7 +73,7 @@ function RemoveFeedFromYouTube() {
 
 	// listen for new videos in the DOM and add the remove button as necessary
 	function listenForNewVideos() {
-		
+
 		var target = document.querySelector(feedWrapperSelector);
 
 		// create an observer instance
@@ -86,13 +90,13 @@ function RemoveFeedFromYouTube() {
 				}
 			});
 		});
-		
+
 		// configuration of the observer:
 		var config = { attributes: true, childList: true, characterData: true }
 
 		// pass in the target node, as well as the observer options
 		observer.observe(target, config);
-		
+
 	}
 
 	function removeAllWatched() {
@@ -113,15 +117,15 @@ function RemoveFeedFromYouTube() {
 		button.id = "bcRemoveAll";
 		button.className = "yt-uix-button feed-header-message secondary-nav yt-uix-sessionlink yt-uix-button-epic-nav-item yt-uix-button-size-default";
 		button.innerHTML = '<span class="yt-uix-button-content">Remove All Watched</span>';
-		
+
 		button.onclick = removeAllWatched;
-		
+
 		// insert remove watched button next to manage subscriptions button
 		var target = document.querySelector('.feed-header .feed-manage-link');
 		target.parentNode.insertBefore(button, target.nextSibling);
-		
+
 		console.log('remove button injected');
-		
+
 	}
 
 /*
@@ -136,19 +140,19 @@ function RemoveFeedFromYouTube() {
 		});
 	});
 */
-	
+
 	function init() {
 		injectButtonsIntoPosts();
 		listenForNewVideos();
 		injectRemoveWatchedButton();
 		console.log('Remove from feed for YouTube successfully initialized');
 	}
-	
+
 	return {
 		init: init
 	};
 }
 
 module.exports = RemoveFeedFromYouTube;
 
-(new RemoveFeedFromYouTube).init();
+(new RemoveFeedFromYouTube).init();