web_accessible_resources not compiled to dist

[adenix]

Summary

Including 'web_accessible_resources' in the manifest file does not result in those resources being compiled to the dist folder.

Reproduction

Add a web_accessible_resources block to the manifest.json file.

{
  ...
  "web_accessible_resources": [
    {
      "resources": ["src/settings.html", "src/settings.tsx"],
      "matches": ["<all_urls>"]
    }
  ],
  ...
}

Environment

  System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 90.86 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v21.7.1/bin/yarn
    npm: 10.5.0 - ~/Developer/AdmitOne/ice-skates/node_modules/.bin/npm
    pnpm: 8.15.5 - ~/.nvm/versions/node/v21.7.1/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.93
    Edge: 124.0.2478.67
    Safari: 17.4.1
  npmPackages:
    vite: ^5.0.0 => 5.2.6 
    vite-plugin-web-extension: ^4.0.0 => 4.1.3 

[mostafa-hisham]

I have the same issue

[braincomb]

+1

Same issue. One workaround would be to place the web accessible content inside a public directory and update the resources path accordingly.

[aklinker1]

Ahh, I see, you're expecting the files to be copied into dist/ for you... Unfortunately the plugin doesn't do this, it probably should, but I'm not adding any more features to this package myself.

I'd recommend putting the files into the public directory if they're assets that don't need to be processed by Vite, or if they do (like shown in the original issue), add the inputs to additonalInputs to have Vite bundle them.

[FabienCH]

Hello,

I also need to build ts files. Sorry I'm new to web extension and vite but where does additonalInputs come from ? I couldn't find it in vite-plugin-web-extension`'s doc or vite's doc.

[aklinker1]

https://vite-plugin-web-extension.aklinker1.io/config/plugin-options.html#additionalinputs

[arnav-kr]

I'd recommend putting the files into the public directory if they're assets that don't need to be processed by Vite, or if they do (like shown in the original issue), add the inputs to additonalInputs to have Vite bundle them.

the thing is additionalInputs only supports file paths and not globs, makes the work harder for files that need to be included in build process, specifying each file manually isn't anywhere a good experience

Unfortunately the plugin doesn't do this, it probably should, but I'm not adding any more features to this package myself.

will there be no further developments in this library, even PRs?

[aklinker1]

the thing is additionalInputs only supports file paths and not globs, makes the work harder for files that need to be included in build process, specifying each file manually isn't anywhere a good experience

Just do it yourself:

import glob from 'glob'

...
additionalInputs: await glob('/assets/*.png')

will there be no further developments in this library, even PRs?

I don't plan to add any features, no. I'd recommend using WXT instead. I haven't archived this repo or made any public announcements yet because WXT isn't at v1.0 yet, I'm waiting for that. But it's close to v1.

But you're welcome to open PRs, and I will do bug and security fixes, at least for vite 5. Once vite 6 is released, this plugin will likely break, and I don't plan on supporting it after that.

[arnav-kr]

patching it myself isn't an issue, actually i was planning to migrate my existing codebase to a library for a better DX, if its goona go deprecated, i better wait for wxt.dev to be stable, then migrate my codebase to wxt, thanks though