Popup's style seems not loaded properly in Chromium-based browser

[yujinlin0224]

Summary

When use with Vue and Vuetify, popup's style seems not loaded properly in Chromium-based browser.

Reproduction

1. clone the project: https://github.com/yujinlin0224/vuetify-plugin-test
2. pnpm install
3. pnpm dev
4. Visit https://yurina.dev/ (A github page I test the content mount of this plugin)

In this image, left side is firefox and right side is MS Edge, popup's style looks same to content but not in Edge

[aklinker1]

Thanks for the info, checking it out now...

[aklinker1]

The styles are being applied correctly, this isn't a problem with the plugin. This is a problem with your repo.

---

What looks different on the UI?

1. The popup window is small, and causes line wrap
2. The text (and icon) is smaller than what shows up from the content script

Without any changes, the button is already styled correctly, so we know the styles are being applied, it just looks weird.

These are caused by two different sources.

First, Chrome manages the popup's width is different than other browsers. I would recommend hard coding a width of the popup's html element or setting it to max-content. In this case, setting the below CSS fixes the sizing of the popup, making it similar to the content script:

/* src/views/popup/PopupView.vue in the style block */
html {
  width: max-content;
}

Cool, but the font is still the wrong size. Inspect each of them, and lets look at the computed styles to figure out why (red boxes highlight import parts of screenshot below).

Looking at the styles, we can see that the font size is set to 16px in the content script, but it's set to 75% in your popup.

The 16px comes from style.css?v=1a45...29c189418ec9, which is a style from the https://yurina.dev/. The 75% is chrome's default styling for popups.

When loading UI's on content scripts, you should not rely on the page style's to style your injected UI. So technically here, the small font from the popup is correct, and you need to isolated the injected UI's styles a different way.

A common solution for chrome extensions is to use the ShadowDOM api. I've written another package you can use to isolate your styles using those APIs: @webext-core/isolated-element, it will handle many of the gotchas for working with the ShadowDOM APIs. Or you can use the ShadowDOM APIs directly (example).

After all that, your popup will still have small text. I would recommend applying a CSS reset to the popup.html file so it's consistent across browsers. That should make the font larger by default, removing the 75% Chrome defaults the font size to in extension popups.

[yujinlin0224]

Thanks a lot, I will try it later