Extra html's script src path is not transformed in dev

SeekerOfTrueCode commented 1 year ago

Build tool

Rollup

Where do you see the problem?

[X] In the browser
[ ] In the terminal

Describe the bug

Issue Summary:

An issue has been identified involving the usage of an extra page named "offscreen.html," which is configured as an offscreen document within the background.ts script (part of the service worker in the manifest). This offscreen document includes a script named "src/offscreen.ts" which undergoes proper transformation during the build process. Both the script file and its source are transformed as expected.

However, a complication arises when executing the command npm run dev with the mode set to staging (vite --mode staging). During this process, the file referenced within the "offscreen.html" document fails to update its reference to the transformed file's name. Instead, it retains the reference to the old file's name, which no longer exists in the "dist" folder and doesn't even successfully transform (nowhere to be found in dist folder).

Expected Behavior: Upon running the dev process with the staging mode, the reference to the transformed file's name within the "offscreen.html" document should be updated to reflect the changes made during the transformation process and ts file "src/offscreen.ts" should undergo transformation and should be added to the dist folder.

Actual Behavior: The reference to the transformed file's name within the "offscreen.html" document remains unchanged, leading to incorrect referencing and a discrepancy between the expected and actual filenames. No file to be found.

Files in source:

scripts/constants/paths.ts

export const PATHS = {
  TS: {
    BACKGROUND: 'src/background.ts',
    CONTENT_SCRIPT: 'src/content-script.ts'
    // OFFSCREEN: 'src/offscreen.ts'
  },
  HTML: {
    POPUP: 'popup.html',
    OFFSCREEN: 'offscreen.html'
  }
} as const

vite.config.ts

(...)
build: {
    rollupOptions: {
      input: {
        offscreen: PATHS.HTML.OFFSCREEN
      }
    }
  }
(...)

offscreen.html

(...)
<body>
    <div id="app"></div>
    <script type="module" src="/src/offscreen.ts"></script>
</body>
(...)

src/offscreen.ts

(...)
console.log('main offscreen')

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log(message, sender, sendResponse)
})
(...)

manifest.config.ts

(...)
    web_accessible_resources: [
      {
        resources: ['src/assets/*.svg', 'public/*.svg'],
        matches: [MATCHES.ALL]
      },
      {
        resources: [PATHS.HTML.OFFSCREEN],
        matches: [MATCHES.ALL]
      }
    ],
(...)

	Build	Dev
file "offscreen.html"	`(...) (...)`	`(...) (...)`
file "src/offscreen.ts"	build result file "/assets/offscreen-2fb757e8.js" `import"./modulepreload-polyfill-3cfb730f.js";console.log("main offscreen");chrome.runtime.onMessage.addListener((e,o,n)=>{console.log(e,o,n)});`	while dev result file doesn't even exists

Reproduction

Link to my repo's branch which is reproducing this problem: https://github.com/SeekerOfTrueCode/template-crxjs-web-extension/tree/issue/extra-html_script-src_not-transformed_in-dev

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 19.19 GB / 31.41 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.9.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.2134.0), Chromium (115.0.1901.203)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.18 => 2.0.0-beta.18
    vite: ^4.4.5 => 4.4.7

Severity

annoyance

sublimator commented 10 months ago

Seeing this too!

sublimator commented 10 months ago

For others, for dev (unlike build) you must set up the page in web_accessible_resources in the manifest as well

supfiger commented 6 months ago

For others, for dev (unlike build) you must set up the page in web_accessible_resources in the manifest as well

@sublimator I added it, but it still does not work for me. I provided my code in the following comment. Could you check it? https://github.com/crxjs/chrome-extension-tools/issues/627#issuecomment-1970560038

crxjs / chrome-extension-tools