PLtier commented 10 months ago

🐛 bug report

I use the same new URL, pointing to an extension page, in two different places: SW and Popup, but Parcel keeps on bundling two distinct files. Their dependencies are somehow mixed. Page to which Popup points cannot resolve it's dependencies. See the code:

File paths.js:

export const permissionPagePathURL = new URL(
  "../tutorialAndPermissionPage/camera_permission.html",
  import.meta.url
).href;

Service Worker:

import { permissionPagePathURL } from "./paths";
...
    chrome.tabs.create({ url: permissionPagePathURL });
...

Popup:

import { permissionPagePathURL } from "../service/paths";
...
    chrome.tabs.create({ url: permissionPagePathURL });
...

🎛 Configuration (.babelrc, package.json, cli command)

"scripts": {
    "start": "parcel watch src/manifest.json --host localhost --reporter parcel-reporter-static-files-copy --config @parcel/config-webextension"
    }

🤔 Expected Behavior

Both URLs should point to the same HTML page, all dependencies should be the same.

😯 Current Behavior

First URL, used in SW, points to one HTML file, the second one, used in Popup, to another HTML file. In addition, this latter "duplicate" throws error "Cannot find module + some ID". Strangely CSS file is shared between them, but no video nor script.

Developer console of the extension page opened via Popup.

camera_permission.a0590cf4.js:63  Uncaught Error: Cannot find module 'ky9Rz'
    at newRequire (camera_permission.a0590cf4.js:61:19)
    at newRequire (camera_permission.a0590cf4.js:45:18)
    at localRequire (camera_permission.a0590cf4.js:84:35)
    at 67Vjd.6d18d6bd340e7473 (runtime-402a68cf08055057.js:2:15)
    at newRequire (camera_permission.a0590cf4.js:71:24)
    at camera_permission.a0590cf4.js:122:5
    at camera_permission.a0590cf4.js:145:3

Dist directory There should be a single set of these four files: camera_permission.js, camera_permission.css, extension_tutoria.mp4 and camera_permission.html.

💁 Possible Solution

I have no idea. But I checked that if you access new URL in a different context - i.e. an Offscreen document, then there is no issue. I assume it's limited to the Popups.

🔦 Context

Once the user opens the extension, SW opens an extension page on which user can grant permission for the camera, as it's used by the extension in the offscreen document. But user can access this extension page by clicking a button on popup (if they have closed this accidentally and didn't give permission). "The first" extension page works as indented, but this opened in Popup points to different extension page which malfunctions.

💻 Code Sample

extension_page_script.js

console.log("extension_page_script.js loaded");

extension_page.html

<!DOCTYPE html>
<html lang="en">
  <body>
    EXTENSION PAGE
    <script src="./extension_page_script.js" type="module"></script>
  </body>
</html>

popup_script.js

const url = new URL("./extension_page.html", import.meta.url);
console.log("Popup URL version", url.href);

popup.html

<!DOCTYPE html>
<html lang="en">
  <body>
    POPUP
    <script src="./popup_script.js" type="module"></script>
  </body>
</html>

service_worker.js

const url = new URL("./extension_page.html", import.meta.url);
console.log("SW URL version", url.href);

See the dist - there are two different extension pages generated. Click on the URL in the SW console - it's fine. Click on the URL in the Popup console - it's there is "Cannot find module" Error and the console.log in EP there is not executed.

🌍 Your Environment

 "devDependencies": {
    "@parcel/config-webextension": "^2.10.3",
    "@parcel/transformer-sass": "^2.10.3",
    "buffer": "^6.0.3",
    "parcel": "^2.10.3",
    "parcel-reporter-static-files-copy": "^1.5.3",
    "process": "^0.11.10"
  },
  "dependencies": {
    "@tensorflow-models/pose-detection": "^2.1.3",
    "@tensorflow/tfjs-backend-wasm": "^4.13.0",
    "@tensorflow/tfjs-backend-webgl": "^4.13.0",
    "@tensorflow/tfjs-converter": "^4.13.0",
    "@tensorflow/tfjs-core": "^4.13.0",
    "@tensorflow/tfjs-layers": "^4.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.69.5"
  },
  "browserslist": "defaults"

Software	Version(s)
Parcel	2.10.3
Node	20.10.0
npm/Yarn	npm 10.2.3
Operating System	Win 11

PLtier commented 4 months ago

Hi @101arrowz - maybe you have an insight about that? Have seen you pushed to the web-extensions docs :)

PLtier commented 4 months ago

Here is the workaround I have found so far:

obtain hrefs to the given extension pages using import or URL atop of the service worker.
save these URLs to the local/sync storage using chrome.storage
use these links in other scripts/context by retrieving them from storage.

Maybe plasmohq has solved that issue if someone has time to check.

parcel-bundler / parcel

Web Extensions: duplicates in dist folder #9503