CrxPlugin: cannot rename items in web_accessible_resources

[thdoan]

Build tool

Vite

Where do you see the problem?

• [ ] In the browser
• [X] In the terminal

Describe the bug

The CrxPlugin works great for renaming manifest.action.default_popup files, but I just found out it's not able to rename items inside manifest.web_accessible_resources. Let's say I want to rename src/test/test.html to test.html (and assume it's already building correctly to dist root)...

Sample manifest.json

...
"web_accessible_resources": [
  {
    "matches": [
      "<all_urls>"
    ],
    "resources": [
      "src/test/test.html"
    ],
    "use_dynamic_url": false
  }
]

CrxPlugin

...
for (const resource of manifest.web_accessible_resources) {
  if (resource.resources.includes(source)) {
    resource.resources[resource.resources.indexOf(source)] = destination;
    break;
  }
}

The code above returns this error in the build output:

[crx:manifest-post] ENOENT: Could not load manifest asset "test.html".
Manifest assets must exist in one of these directories:
Project root: "path/to/root"
Public dir: "path/to/root/public"

Reproduction

N/A

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 13.21 GB / 31.95 GB
  Binaries:
    Node: 16.20.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.57)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.17 => 2.0.0-beta.17
    vite: ^4.3.5 => 4.3.5

Severity

annoyance

[thdoan]

UPDATE: I tried commenting out the CrxPlugin code above and manually updated manifest.json (see below), and it's giving me the same error.

...
"web_accessible_resources": [
  {
    "matches": ["<all_urls>"],
    "resources": [
      "test.html"
    ]
  }
]

Hmm...maybe something else is going on because this is a perfectly valid code since test.html is correctly built to root via the config below.

vite.config.ts

...
build: {
  rollupOptions: {
    input: {
      test: './src/test/test.html',
    },
  },
},
plugins: [
  svelte(),
  crx({ manifest }),
  {
    ...renameFile('src/popup/popup.html', 'popup.html'),
    apply: 'build',
  },
  {
    ...renameFile('src/test/test.html', 'test.html'),
    apply: 'build',
  }
],

[jacksteamdev]

Hi @thdoan 👋 I'm a little confused here, it's hard to know what's going on here without a minimal reproduction repo.

For files in web_accessible_resources, CRXJS first checks if a file has already been emitted by another plugin, if not it directly copies the file to the output folder. That error means that there was no file to copy at that file path.

It's possible to make a plugin that would emit a file to another location, you might dig through CRXJS code for an example. Search for the CRXJS plugin hook renderCrxManifest for examples.

[thdoan]

@jacksteamdev I put together a minimal reproduction repo for you here:

https://stackblitz.com/edit/vitejs-vite-rkrb7p?file=vite.config.ts

When you run npm run build in the terminal, it will build with popup.html moved to root.

Issue: how do I get it to output the config below in manifest.json to match the new location of popup.html?

  "web_accessible_resources": [
    {
      "resources": [
        "popup.html"
      ]
    }
  ]

I tried to change it directly in the FOR loop, but it errored out. You can uncomment the FOR block to see.

[thdoan]

Since I decided to show the popup inside an iframe instead of using chrome.action, this is no longer relevant.