<|start_filename|>src/contentScript/contentScript.css<|end_filename|>
::cue( .plusSub ) {
    color: var(--plusSub-cue-color);
    /*background-color: var(--plusSub-cue-background-color);*/
    font-size: var(--plusSub-cue-font-size);
    font-weight: var(--plusSub-cue-font-weight);
    line-height: var(--plusSub-cue-line-height);
}

video[data-plus-sub-status="injected"]::cue {
    color: var(--plusSub-cue-color, #ffffff);
    /*background-color: var(--plusSub-cue-background-color);*/
    font-size: var(--plusSub-cue-font-size);
    font-weight: var(--plusSub-cue-font-weight);
    line-height: var(--plusSub-cue-line-height);
}



<|start_filename|>src/manifest-chrome.json<|end_filename|>
{
  "name": "+Sub",
  "version": "0.0.0",
  "manifest_version": 3,
  "description": "Load subtitle to a HTML5 video.",
  "author": "<NAME>",
  "icons": {
    "16": "res/icons/plussub16.png",
    "48": "res/icons/plussub48.png",
    "128": "res/icons/plussub128.png"
  },
  "action": {
    "default_icon": {
      "19": "res/icons/browseraction.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "minimum_chrome_version": "88",
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "host_permissions": [
    "https://*/"
  ],
  "permissions": [
    "webNavigation",
    "scripting",
    "storage",
    "activeTab"
  ]
}

<|start_filename|>webpack.config.js<|end_filename|>
// webpack.config.js
/* eslint @typescript-eslint/no-var-requires: "off" */
import {resolve} from 'path';
import {readFileSync} from 'fs';
import { VueLoaderPlugin } from 'vue-loader';
import CopyPlugin from 'copy-webpack-plugin';
import webpack from 'webpack';

const setObject = (object, key, value) => ({
  ...object,
  [key]: value,
});

const toPrettyJson = (obj) => JSON.stringify(obj, null, 2);

export default (env) => {
  const browser = (env.browser ? env.browser.toLowerCase() : 'unknown').trim();
  if (browser !== 'chrome' && browser !== 'firefox') {
    throw new Error(`unknown browser: ${browser}`);
  }
  const mode = (env.mode ? env.mode : 'development').trim();

  return {
    devtool: false,
    mode,
    entry: { popup: './popup/index.ts', background: './background/index.ts', contentScript: './contentScript/index.ts' },
    context: resolve('src'),
    output: {
      filename: '[name].js',
      path: resolve(`dist-${browser}`)
    },
    resolve: {
      extensions: ['.ts', '.js', '.vue', '.json', '.mjs'],
      alias: {
        '@': resolve('src/popup'),
        // spin-off specifics
        storeTypes: resolve(`src/popup/storeTypes/index.ts`),
        // It seems the problem has been solve. https://github.com/vuejs/vue-cli/pull/5788
        // this isn't technically needed, since the default `vue` entry for bundlers
        // is a simple `export * from '@vue/runtime-dom`. However having this
        // extra re-export somehow causes webpack to always invalidate the module
        // on the first HMR update and causes the page to reload.
        // vue: '@vue/runtime-dom',
        storage: resolve(`src/popup/platform/storage/${browser}/index.ts`),
        monkeyPatchApollo: resolve(`src/popup/platform/monkeyPatchApollo/${browser}/index.ts`),
        onPageActionClicked: resolve(`src/background/platform/onPageActionClicked/${browser}/index.ts`)
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: { injectType: 'singletonStyleTag', attributes: { id: 'plussub-style' } }
            },
            'css-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          use: [
            // {
            //   loader: 'file-loader',
            // },
            {
              loader: 'url-loader',
              options: {
                limit: 102400
              }
            }
          ]
        },
        {
          test: /\.(woff|woff2|ttf|eot)$/,
          use: 'file-loader?name=fonts/[name].[ext]!static'
        },
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        },
        {
          test: /\.html$/i,
          loader: 'html-loader'
        },
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: 'graphql-tag/loader'
        },
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
          resolve: {
            fullySpecified: false
          }
        }
      ]
    },
    optimization: {},
    plugins: [
      new VueLoaderPlugin(),
      new CopyPlugin({
        patterns: [
          {
            from: `manifest-${browser}.json`,
            to: 'manifest.json',
            transform: (manifest) =>
              toPrettyJson(
                setObject(JSON.parse(manifest.toString()),
                  'version',
                  JSON.parse(readFileSync(resolve('package.json'))).version)
              )
          },
          { from: 'res', to: 'res' },
          { from: 'popup/font.css', to: 'font.css' },
          { from: 'contentScript/contentScript.css', to: 'contentScript.css' }
        ]
      }),
      new webpack.DefinePlugin({
        __VUE_PROD_DEVTOOLS__: 'false'
      })
    ]
  };
};
