MV3: Invalid path separator when building on Windows

[nerblock]

Describe the bug

When building the project for MV3 on a Windows machine the content script can't be loaded, because the path separators in the web_accessible_resources section in the generated dist/manifest.json file are incorrecty converted to Windows style path separators:

  "web_accessible_resources": [
    {
      "resources": [
        "chunks\\*-*.js",
        "content\\index.js"
      ],
      "matches": [
        "https://*/*",
        "http://*/*"
      ]
    }
  ]

How do we reproduce?

1. clone the repository on a Windows machine
2. Modify src/manifest.json for MV3:

   {
   "name": "mv3",
   "manifest_version": 3,
   "content_scripts": [
   {
     "js": [
       "content/index.ts"
     ],
     "matches": [
       "https://*/*",
       "http://*/*"
     ]
   }
   ]
   "action": {
   "default_title": "Popup",
   "default_popup": "pages/popup/index.html"
   }
   }

3. open a powershell terminal
4. run npm run build
5. check the contents of dist/manifest.json

Expected behavior

manifest.json should contain Unix style path separators:

  "web_accessible_resources": [
    {
      "resources": [
        "chunks/*-*.js",
        "content/index.js"
      ],
      "matches": [
        "https://*/*",
        "http://*/*"
      ]
    }
  ]

Actual behavior

Running npm run build on a Linux machine (or in WSL) generates dist/manifest.json with / (slash) as path separator.

Running npm run build on a Windows machine generates dist/manifest.json with \ (backslash) as path separator.

[nerblock]

I went through the source and realized that the problem is in fact in rollup-plugin-chrome-extension. It has different code paths for MV2 and MV3, and MV3 support looks unfinished.

Here is a quick fix:

In node_modules/rollup-plugin-chrome-extension/src/manifest-input/updateManifest.ts in the updateManifestV3 function find this part:

    const resources = [
      `${chunkFileNames
        .split('/')
        .join('/')
        .replace('[format]', '*')
        .replace('[name]', '*')
        .replace('[hash]', '*')}`,
      ...cache.contentScripts.map((x) =>
        path.relative(cache.srcDir, x),
      ),
    ];

and replace with this:

    const resources = [
      slash(`${chunkFileNames
        .split('/')
        .join('/')
        .replace('[format]', '*')
        .replace('[name]', '*')
        .replace('[hash]', '*')}`),
      ...cache.contentScripts.map((x) =>
        slash(path.relative(cache.srcDir, x)),
      ),
    ];

Basically one needs to wrap the paths in the slash() function to make them work on Windows.

[nerblock]

moved the issue to the correct repo, closing this