8000 Fix output path not working for production builds by cezaraugusto · Pull Request #102 · extension-js/extension.js · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Fix output path not working for production builds #102

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
Merged
merged 6 commits into from
Jun 19, 2024
Merged

Fix output path not working for production builds #102

merged 6 commits into from
Jun 19, 2024

Conversation

cezaraugusto
Copy link
Member

I made some changes to the main branch and now the start command is now a combination of the build + preview commands, so running yarn start <extension-path> should reflect the extension in a production environment.

To test this PR, ensure that:

  1. Running yarn start <extension-path> for the React template builds the extension and loads the browser in production.
  2. Running yarn start <extension-path> for the Vue.js template builds the extension and loads the browser in production.
  3. Good to test the templates in different browsers such as --browser=edge or --browser=firefox --polyfill
  • Side note: if testing Firefox, ensure manifest_version is set to 2 and uses background.scripts instead of background.service_worker. For some reason I couldn't make it work using V3.
  1. The background.service_worker caches while switching between between dev/start commands, so good to test toggling between these environments to assert the extension reloads as usual.
  2. Ensure that during development hard-reloading (like cmd+r) a page with a content script does not prevent future HMR reloads (i.e. reloading a content_scripts extension after a manual page reload should work just fine).

Tough one!

React-TypeScript template (production mode)

Screenshot 2024-06-18 at 13 55 39

Vue-TypeScript template (production mode)

Screenshot 2024-06-18 at 16 40 28

Fix #95
Fix #96

@cezaraugusto cezaraugusto requested a review from OSpoon June 18, 2024 19:44
@cezaraugusto cezaraugusto self-assigned this Jun 18, 2024
@cezaraugusto cezaraugusto mentioned this pull request Jun 18, 2024
Closed
OSpoon
OSpoon reviewed Jun 19, 2024
View reviewed changes
programs/create/templates/vue-typescript/template/content/content.ts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do I have to use dynamic import to import css？

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

During development we inject the styles into the page via <style> tag which is why it works via ESM imports but in production we generate the CSS file via MiniCssExtractPlugin and link via an appended tag. I'll see what I can do.

@OSpoon
Copy link
Member
OSpoon commented Jun 19, 2024

I received the following error message in the console, may need to pay attention to：

image

@cezaraugusto
Copy link
Member Author

I received the following error message in the console, may need to pay attention to：

image

Nice catch! Turns out it was related to MiniCssExtractPlugin. I did a change where we use the style-loader to just inject the styles into the page, so now we are working with default import statements for CSS imports and no console errors anymore.

OSpoon
OSpoon approved these changes Jun 19, 2024
View reviewed changes
Copy link
Member
@OSpoon OSpoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done. I have no further questions ~

@cezaraugusto cezaraugusto merged commit 9e7dfd7 into main Jun 19, 2024
3 checks passed
@cezaraugusto cezaraugusto deleted the output-path branch June 19, 2024 18:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@OSpoon OSpoon OSpoon approved these changes

Assignees

@cezaraugusto cezaraugusto

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

After running the build command, both the images and styles are missing. The styles in the vue-typescript template are missing.
2 participants
@cezaraugusto @OSpoon
0