Automating tab management in Firefox Developer Edition using xdotool and Webpack DevServer.

README.md

🚀 Firefox Tab Manager with xdotool & Webpack DevServer

This script automates tab switching and refreshing in Firefox Developer Edition on Linux Ubuntu.
It integrates with Webpack DevServer to reload the correct tab when the development server starts.

📜 Features:

• Uses xdotool to search for tabs and activate them.
• Automatically refreshes the Webpack tab if found.
• Falls back to opening a new browser tab if necessary.

🔧 Requirements:

• Linux Ubuntu
• Firefox Developer Edition
• xdotool installed (sudo apt install xdotool)

🚀 Usage:

1. Clone this Gist or copy the scripts into your project.
2. Ensure xdotool is installed.
3. Update your webpack.config.js to include the middleware.
4. Run your Webpack DevServer and let the script handle tab management.

Happy coding! 🚀

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

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;

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',
          },
        ],
      },
    ]
  },
};

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"