DYW972 · February 9, 2025 13:09
diff --git a/README.md b/README.md
diff --git a/lookup_tabs_names.sh b/lookup_tabs_names.sh
 #!/bin/bash

 tabName=$1
 found=false
 window_ids=()
 tab_titles=()

 # Search for browser by name and store ID in array
 window_ids+=("$(xdotool search --name "Firefox Developer Edition")")

 for windowID in "${window_ids[@]}"; do
  # Activate browser window
  xdotool windowactivate --sync "$windowID"
  # Get the initial tab title
  initial_tab_title=$(xdotool getactivewindow getwindowname | awk -F '—' '{print $1}')
  tab_titles+=("$initial_tab_title")

  # Cycle through tabs and get titles
  while true; do
      # Switch to the next tab
      xdotool key --clearmodifiers ctrl+Tab
      sleep 0.1  # Wait for the tab to switch

      # Get the current tab title
      current_tab_title=$(xdotool getwindowfocus getwindowname | awk -F '—' '{print $1}')

      # Trim whitespace and convert to lowercase
      current_tab_title=$(echo "${current_tab_title}" | xargs)
      initial_tab_title=$(echo "${initial_tab_title}" | xargs)
      tabName=$(echo "${tabName}" | xargs)

      # Check if current tab match with the tab we need
      if [[ "${current_tab_title,,}" == "${tabName,,}" ]]; then
          found=true
          xdotool key --window "$current_tab_title" "ctrl+r"
          break
      fi

      # Check if current tab is equals to initial tab
      if [[ "${current_tab_title,,}" == "${initial_tab_title,,}" ]]; then
        found=false
        break
      fi
  done

  if $found; then
    break
  fi
 done

 if $found; then
  echo true
 else
  echo false
 fi
diff --git a/open_browser_middleware.js b/open_browser_middleware.js
 const { exec } = require('child_process');

 function openBrowserMiddleware() {
  return new Promise((resolve) => {
    const browser = 'firefox-bin'; // 'firefox' or 'chrome'
    const tabTitle = 'Webpack React TS';
    exec(`bash ./webpack/scripts/webpack_devserver_tab_manager.sh "${browser}" "${tabTitle}"`, (error, stdout, stderr) => {
      if (error) {
        console.error(`Error executing script: ${error.message}`);
        resolve(false);
        return;
      }
      if (stderr) {
        console.error(`Script stderr: ${stderr}`);
      }
      resolve(stdout.trim() === 'true');
    });
  });
 }

 module.exports = openBrowserMiddleware;
diff --git a/webpack.config.js b/webpack.config.js
 const path = require('node:path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const openBrowser = require('react-dev-utils/openBrowser');
 const openBrowserMiddleware = require('./webpack/middlewares/open_browser_middleware');

 module.exports = {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
  ],
  devServer: {
    open: false,
    onListening: async function(devServer) {
      const { port } = devServer.server.address();
      const URL = `http://localhost:${port}`;

      const isOpen = await openBrowserMiddleware();

      if (!isOpen) {
        openBrowser(URL);
      }
    },
    client: {
      logging: 'info',
      overlay: true,
    },
  },
  entry: './src/ts/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ]
  },
 };
diff --git a/webpack_dev_server_tab_manager.sh b/webpack_dev_server_tab_manager.sh
 #!/bin/bash

 # Main script
 browser=$1
 tabName=$2

 # Check if browser is specified
 if [[ -z $browser ]]; then
  echo "Please specify the browser: chrome, firefox, or other browser name"
  exit 1
 fi

 # Check if the specified browser is running
 if ! pgrep -x "$browser" > /dev/null; then
  echo false
  exit 0
 fi

 # 1: Looking for tab running Webpack DevServer in the specified browser
 result=$(bash ./webpack/scripts/lookup_tab_with_url.sh "$tabName" )
 echo "$result"
	#!/bin/bash

	tabName=$1
	found=false
	window_ids=()
	tab_titles=()

	# Search for browser by name and store ID in array
	window_ids+=("$(xdotool search --name "Firefox Developer Edition")")

	for windowID in "${window_ids[@]}"; do
	# Activate browser window
	xdotool windowactivate --sync "$windowID"
	# Get the initial tab title
	initial_tab_title=$(xdotool getactivewindow getwindowname \| awk -F '—' '{print $1}')
	tab_titles+=("$initial_tab_title")

	# Cycle through tabs and get titles
	while true; do
	# Switch to the next tab
	xdotool key --clearmodifiers ctrl+Tab
	sleep 0.1 # Wait for the tab to switch

	# Get the current tab title
	current_tab_title=$(xdotool getwindowfocus getwindowname \| awk -F '—' '{print $1}')

	# Trim whitespace and convert to lowercase
	current_tab_title=$(echo "${current_tab_title}" \| xargs)
	initial_tab_title=$(echo "${initial_tab_title}" \| xargs)
	tabName=$(echo "${tabName}" \| xargs)

	# Check if current tab match with the tab we need
	if [[ "${current_tab_title,,}" == "${tabName,,}" ]]; then
	found=true
	xdotool key --window "$current_tab_title" "ctrl+r"
	break
	fi

	# Check if current tab is equals to initial tab
	if [[ "${current_tab_title,,}" == "${initial_tab_title,,}" ]]; then
	found=false
	break
	fi
	done

	if $found; then
	break
	fi
	done

	if $found; then
	echo true
	else
	echo false
	fi
	const { exec } = require('child_process');

	function openBrowserMiddleware() {
	return new Promise((resolve) => {
	const browser = 'firefox-bin'; // 'firefox' or 'chrome'
	const tabTitle = 'Webpack React TS';
	exec(`bash ./webpack/scripts/webpack_devserver_tab_manager.sh "${browser}" "${tabTitle}"`, (error, stdout, stderr) => {
	if (error) {
	console.error(`Error executing script: ${error.message}`);
	resolve(false);
	return;
	}
	if (stderr) {
	console.error(`Script stderr: ${stderr}`);
	}
	resolve(stdout.trim() === 'true');
	});
	});
	}

	module.exports = openBrowserMiddleware;
	const path = require('node:path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const openBrowser = require('react-dev-utils/openBrowser');
	const openBrowserMiddleware = require('./webpack/middlewares/open_browser_middleware');

	module.exports = {
	mode: 'development',
	plugins: [
	new HtmlWebpackPlugin({
	template: './src/index.html'
	}),
	],
	devServer: {
	open: false,
	onListening: async function(devServer) {
	const { port } = devServer.server.address();
	const URL = `http://localhost:${port}`;

	const isOpen = await openBrowserMiddleware();

	if (!isOpen) {
	openBrowser(URL);
	}
	},
	client: {
	logging: 'info',
	overlay: true,
	},
	},
	entry: './src/ts/index.tsx',
	output: {
	filename: 'bundle.js',
	path: path.resolve(__dirname, 'dist')
	},
	resolve: {
	extensions: ['.tsx', '.ts', '.js']
	},
	module: {
	rules: [
	{
	test: /\.(ts\|tsx)$/,
	exclude: /node_modules/,
	use: 'babel-loader'
	},
	{
	test: /\.s[ac]ss$/i,
	use: [
	// Creates `style` nodes from JS strings
	"style-loader",
	// Translates CSS into CommonJS
	"css-loader",
	// Compiles Sass to CSS
	"sass-loader",
	],
	},
	{
	test: /\.(png\|jpe?g\|gif)$/i,
	use: [
	{
	loader: 'file-loader',
	},
	],
	},
	]
	},
	};
	#!/bin/bash

	# Main script
	browser=$1
	tabName=$2

	# Check if browser is specified
	if [[ -z $browser ]]; then
	echo "Please specify the browser: chrome, firefox, or other browser name"
	exit 1
	fi

	# Check if the specified browser is running
	if ! pgrep -x "$browser" > /dev/null; then
	echo false
	exit 0
	fi

	# 1: Looking for tab running Webpack DevServer in the specified browser
	result=$(bash ./webpack/scripts/lookup_tab_with_url.sh "$tabName" )
	echo "$result"