Merge pull request #12 from akirk/fix-dev-env-issues

Fix dev env issues

README.md

@@ -16,10 +16,10 @@ Then build the extension:
 npm run build
 ```
 
-You can then use the `start:firefox` or `start:chrome` scripts to start an instance of the browser separate from your main instance that has the extension automatically installed:
+You can then use the `start` script to start an instance of Firefox separate from your main instance that has the extension automatically installed:
 
 ```shell
-npm run start:firefox
+npm run start
 ```
 
 The extension will also automatically reload whenever you modify source files.

package.json

@@ -1,9 +1,9 @@
 {
 	"scripts": {
 		"build": "webpack",
-		"watch": "webpack --watch",
-		"start:firefox": "concurrently \"npm:watch\" \"npm:web-ext:run:firefox\"",
-		"start:chrome": "concurrently \"npm:watch\" \"npm:web-ext:run:chrome\"",
+		"watch": "webpack --watch --env target=firefox",
+		"start": "concurrently \"npm:watch\" \"npm:web-ext:run:firefox\"",
+		"start:noreload": "npm run web-ext:run:firefox -- --no-reload",
 		"web-ext:run:firefox": "web-ext -s build/extension/firefox run --target firefox-desktop",
 		"web-ext:run:chrome": "web-ext -s build/extension/chrome run --target chromium --arg='--disable-search-engine-choice-screen'",
 		"lint": "npm run lint:js && npm run lint:style",

src/extension/manifest-firefox.json

@@ -32,6 +32,6 @@
 			"128": "icons/icon-128"
 		},
 		"default_panel": "sidebar/sidebar.html",
-		"open_at_install": false
+		"open_at_install": true
 	}
 }

src/plugin/plugin.php

@@ -17,7 +17,7 @@ public function __construct() {
 	}
 
 	public function enqueue_scripts() {
-        wp_enqueue_script( 'try-wordpress', plugin_dir_url( __FILE__ ) . 'scripts/index.js', array( 'jquery' ), filemtime( plugin_dir_path( __FILE__ ) . 'scripts/index.js' ), true );
+        wp_enqueue_script( 'try-wordpress', plugin_dir_url( __FILE__ ) . 'index.js', array( 'jquery' ), filemtime( plugin_dir_path( __FILE__ ) . 'index.js' ), true );
         wp_enqueue_style( 'try-wordpress', plugin_dir_url( __FILE__ ) . 'style.css', array(), filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ) );
 	}
 

webpack.config.js

@@ -2,63 +2,29 @@ const path = require( 'node:path' );
 const CopyPlugin = require( 'copy-webpack-plugin' );
 const FileManagerPlugin = require( 'filemanager-webpack-plugin' );
 
-module.exports = function () {
+module.exports = function ( env ) {
+	let targets = [ 'firefox', 'chrome' ];
+	if ( env.target ) {
+		targets = [ env.target ];
+	}
+
 	// We must always build for production because the development builds will have unsafe-eval in the code, which the
 	// browsers don't like.
 	const mode = 'production';
 
-	let modules = [].concat( pluginModules( mode ) );
-	for ( const target of [ 'firefox', 'chrome' ] ) {
+	let modules = [];
+	for ( const target of targets ) {
 		modules = modules.concat( extensionModules( mode, target ) );
 	}
 
 	return modules;
 };
 
-// Build the WordPress plugin and create a zip file of the built plugin directory.
-function pluginModules( mode ) {
-	const targetPath = path.resolve( __dirname, 'build', 'plugin' );
-	return [
-		{
-			mode,
-			entry: './src/plugin/scripts/index.js',
-			output: {
-				path: targetPath,
-				filename: path.join( 'scripts', 'index.js' ),
-			},
-			plugins: [
-				new CopyPlugin( {
-					patterns: [
-						{
-							from: '**/*',
-							context: 'src/plugin/',
-							globOptions: {
-								ignore: [ '**/scripts/**' ],
-							},
-						},
-					],
-				} ),
-				new FileManagerPlugin( {
-					events: {
-						onEnd: {
-							archive: [
-								{
-									source: 'build/plugin',
-									destination: 'build/plugin.zip',
-								},
-							],
-						},
-					},
-				} ),
-			],
-		},
-	];
-}
-
 // Build the extension.
 function extensionModules( mode, target ) {
 	const targetPath = path.resolve( __dirname, 'build', 'extension', target );
 	return [
+		// Extension background script.
 		{
 			mode,
 			entry: './src/extension/background/index.js',
@@ -81,6 +47,7 @@ function extensionModules( mode, target ) {
 				} ),
 			],
 		},
+		// Extension content script.
 		{
 			mode,
 			entry: './src/extension/content/index.js',
@@ -89,6 +56,7 @@ function extensionModules( mode, target ) {
 				filename: path.join( 'content', 'index.js' ),
 			},
 		},
+		// Extension sidebar.
 		{
 			mode,
 			entry: './src/extension/sidebar/index.js',
@@ -117,39 +85,46 @@ function extensionModules( mode, target ) {
 						},
 					],
 				} ),
-				// Copy plugin.zip into the extension directory.
-				new FileManagerPlugin( {
-					events: {
-						onEnd: {
-							copy: [
-								{
-									source: 'build/plugin.zip',
-									destination: path.join(
-										targetPath,
-										'sidebar',
-										'plugin.zip'
-									),
-								},
-							],
-						},
-					},
-				} ),
-				// Sadly, web-ext doesn't reload the extension when plugin.zip is modified.
-				// To work around that, we copy the plugin directory to the extension, and then immediately delete it.
+			],
+		},
+		// WordPress plugin.
+		{
+			mode,
+			entry: './src/plugin/scripts/index.js',
+			output: {
+				path: targetPath,
+				filename: path.join( 'sidebar', 'plugin', 'index.js' ),
+			},
+			plugins: [
 				new CopyPlugin( {
 					patterns: [
 						{
 							from: '**/*',
-							context: 'build/plugin/',
-							to: 'sidebar/plugin/',
+							context: 'src/plugin/',
+							to: path.join( targetPath, 'sidebar', 'plugin' ),
+							globOptions: {
+								ignore: [ '**/scripts/**' ],
+							},
 						},
 					],
 				} ),
+				// Create plugin.zip.
 				new FileManagerPlugin( {
 					events: {
 						onEnd: {
-							delete: [
-								path.join( targetPath, 'sidebar', 'plugin' ),
+							archive: [
+								{
+									source: path.join(
+										targetPath,
+										'sidebar',
+										'plugin'
+									),
+									destination: path.join(
+										targetPath,
+										'sidebar',
+										'plugin.zip'
+									),
+								},
 							],
 						},
 					},