crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.97k stars 191 forks source link

Created manifest.json in build is not similar to what was passed using defineManifest in dev mode for Firefox #884

Closed avi-testsigma closed 6 months ago

avi-testsigma commented 6 months ago

Build tool

Vite

Where do you see the problem?

Describe the bug

For Firefox, I'm trying to generate a different manifest.json based on target browser mainly because service_worker is not supported in background script. But the manifest.json which gets generated in build is different from what is passed in defineManifest.

Here's my manifest definition:

import { defineManifest } from '@crxjs/vite-plugin';
import packageJson from './package.json';
const { version } = packageJson;

const target = process.env.TARGET || 'chrome';

console.log(process.env.TARGET);

if (!['chrome', 'firefox'].includes(target)) {
  throw new Error(`Invalid target platform: ${target}`);
}

export default defineManifest((env) => {
  const manifest = {
    name: 'My Extension',
    version,
    short_name: 'Extension',
    description:
      'A description for my extension',
    options_page: 'src/pages/Options/index.html',
    background:
      target === 'chrome'
        ? {
            service_worker: 'src/background/index.ts',
            type: 'module',
          }
        : {
            scripts: ['src/background/index.ts'],
            type: 'module',
          },
    ...(target === 'chrome'
      ? {}
      : {
          browser_specific_settings: {
            gecko: {
              id: 'some_id_for_firefox',
            },
          },
        }),
    action: {
      default_popup: 'src/pages/Popup/index.html',
      default_icon: 'img/icon.png',
    },
    icons: {
      '16': 'img/icon.png',
      '48': 'img/icon.png',
    },
    content_scripts: [
      {
        matches: ['<all_urls>'],
        js: ['src/content/index.ts'],
        css: ['src/content/content.styles.css'],
      },
      {
        matches: ['<all_urls>'],
        js: ['src/content/dom-event/index.ts'],
        css: ['src/content/dom-event/container.styles.css'],
        all_frames: true,
        match_about_blank: true,
        match_origin_as_fallback: true,
      },
    ],
    devtools_page: 'src/pages/Devtools/index.html',
    web_accessible_resources: [
      {
        resources: [

        ],
        matches: ['<all_urls>'],
      },
    ],
    permissions: ['tabs', 'storage', 'webNavigation'],
    host_permissions: ['<all_urls>'],
    content_security_policy: {
      extension_pages:
        env.mode === 'development'
          ? "script-src 'self' http://localhost:8097; object-src 'self';"
          : "script-src 'self'; object-src 'self';",
    },
    incognito: 'spanning',
    manifest_version: 3,
  };

  console.log(manifest);
  return manifest;
});

Reproduction

Local

Logs

Logs for console.log(manifest) is this:

{
  name: 'My Extension',
  version: '5.7.0',
  short_name: 'Extension',
  description: 'A description for my extension',
  options_page: 'src/pages/Options/index.html',
  background: { scripts: [ 'src/background/index.ts' ], type: 'module' },
  browser_specific_settings: { gecko: { id: 'some_id_for_firefox' } },
  action: {
    default_popup: 'src/pages/Popup/index.html',
    default_icon: 'img/icon.png'
  },
  icons: { '16': 'img/icon.png', '48': 'img/icon.png' },
  content_scripts: [
    { matches: [Array], js: [Array], css: [Array] },
    {
      matches: [Array],
      js: [Array],
      css: [Array],
      all_frames: true,
      match_about_blank: true,
      match_origin_as_fallback: true
    }
  ],
  devtools_page: 'src/pages/Devtools/index.html',
  web_accessible_resources: [ { resources: [], matches: [Array] } ],
  permissions: [ 'tabs', 'storage', 'webNavigation' ],
  host_permissions: [ '<all_urls>' ],
  content_security_policy: {
    extension_pages: "script-src 'self' http://localhost:8097; object-src 'self';"
  },
  incognito: 'spanning',
  manifest_version: 3
}

### System Info

```shell
System:
    OS: macOS 14.1.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 46.50 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.volta/tools/image/node/18.19.0/bin/node
    Yarn: 1.22.21 - ~/.volta/bin/yarn
    npm: 10.2.3 - ~/.volta/tools/image/node/18.19.0/bin/npm
    pnpm: 8.15.7 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.119
    Edge: 124.0.2478.80
    Safari: 17.1.2
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.23 => 2.0.0-beta.23
    vite: ^5.0.8 => 5.0.12

Severity

blocking all usage of RPCE

avi-testsigma commented 6 months ago

We can pass browser option to the plugin to control this behaviour. Closing this issue https://github.com/crxjs/chrome-extension-tools/blob/963e41149cdf327eaa338c643c58909e30d69651/packages/vite-plugin/src/node/plugin-background.ts#L51