diff --git a/README.md b/README.md index de575fe0..f3707efc 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index fd2af2bf..ccdf4597 100644 --- a/package.json +++ b/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", diff --git a/src/extension/manifest-firefox.json b/src/extension/manifest-firefox.json index 4afbe950..b990a4a7 100644 --- a/src/extension/manifest-firefox.json +++ b/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 } } diff --git a/src/plugin/plugin.php b/src/plugin/plugin.php index 85efb096..c988da6f 100644 --- a/src/plugin/plugin.php +++ b/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' ) ); } diff --git a/webpack.config.js b/webpack.config.js index 0d357242..5a283fbd 100644 --- a/webpack.config.js +++ b/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' + ), + }, ], }, },