Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web Extensions: duplicates in dist folder #9503

Closed
PLtier opened this issue Jan 23, 2024 · 5 comments
Closed

Web Extensions: duplicates in dist folder #9503

PLtier opened this issue Jan 23, 2024 · 5 comments

Comments

@PLtier
Copy link

PLtier commented Jan 23, 2024 •
edited
Loading

🐛 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
image
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 PLtier changed the title Web Extensions: Duplicates in dist after using new URL or imports in two places Web Extensions: issues with resolving new URL in Popups Jan 23, 2024
@PLtier
Copy link
Author

PLtier commented Aug 3, 2024

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

@PLtier PLtier changed the title Web Extensions: issues with resolving new URL in Popups Web Extensions: duplicates in dist folder Aug 3, 2024
@PLtier
Copy link
Author

PLtier commented Aug 3, 2024

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.

@github-actions github-actions bot added the Stale Inactive issues label Jan 31, 2025
@PLtier
Copy link
Author

PLtier commented Feb 1, 2025 •
edited
Loading

@mischnic - am I correct that you have no close plans for developing anything related to extensions? No expectations/pretensions, just trying to make educated decision if to close this issue ☺️

@github-actions github-actions bot removed the Stale Inactive issues label Feb 1, 2025
@mischnic
Copy link
Member

mischnic commented Feb 1, 2025

That is correct.

@PLtier PLtier closed this as not planned Won't fix, can't repro, duplicate, stale Feb 2, 2025
@PLtier
Copy link
Author

PLtier commented Feb 2, 2025

Great, closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mischnic @PLtier