Example implementation of a Web Worker within a Figma plugin.

ui.html

<div id="myApp">
  ...
</div>

<script id="quant-worker" type="javascript/worker">
  <%= compilation.assets['worker.js'].source() %>
</script>

ui.ts

class Client {

    quantWorker: Worker;

    constructor() { 
    
        /* Quant Worker */
        const blob = new Blob([document.getElementById('quant-worker').textContent]);
        this.quantWorker = new Worker(window.URL.createObjectURL(blob));
        this.quantWorker.addEventListener('message', this.onQuantMessage.bind(this), null);
    }

    onQuantMessage(event) : void {
        
        parent.postMessage({
            pluginMessage: {
                command: "quantizedPalette",
                data: event.data.data,
                id: event.data.id
            }
        }, '*');
    }
}

let client = new Client();

window.onmessage = (event) => {

    if ( !event.data.pluginMessage.command ) {
        throw( new Error("Command not included in plugin message."));
    }

    const command = event.data.pluginMessage.command;

    switch (command) {
        case "quantizeImageData":
            client.quantWorker.postMessage({ data: event.data.pluginMessage.data, id: event.data.pluginMessage.id });
            break;
        default:
            console.warn("Method not found for command `" + command + "`");
            break;
    }
};

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const path = require('path');

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  // This is necessary because Figma's 'eval' works differently than normal eval
  devtool: argv.mode === 'production' ? false : 'inline-source-map',

  entry: {
    ui: './src/ui.ts', // The entry point for your UI code
    code: './src/code.ts',
    worker: './src/worker.ts'
  },

  module: {
    rules: [

      // Converts TypeScript code to JavaScript
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },

      // Enables including CSS by doing "import './file.css'" in your TypeScript code
      { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },

      // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
      { test: /\.(png|jpg|gif|webp)$/, loader: [{ loader: 'url-loader' }] },

      { test: /\.(svg)$/, loader: [{ loader: 'html-loader' }] }
    ]
  },

  // Webpack tries these extensions for you if you omit the extension like "import './file'"
  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
  },

  // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/ui.html',
      filename: 'ui.html',
      inlineSource: '.(js)$',
      chunks: ['ui'],
      excludeAssets: [/code.js/]
    }),
    new HtmlWebpackInlineSourcePlugin(),
    new HtmlWebpackExcludeAssetsPlugin(),
  ],
})

worker.ts

onmessage = function(event) {
  
  if ( !event.data.data ) {
    throw new Error("Image data not found.");
  }

  const data = event.data.data;
  const id = event.data.id;

  // Perform whatever work needs to be done

  // @ts-ignore
  postMessage({ data: palette, id: id});
};