Skip to content

💡 Bundle wishes/donation footer locally or normalize browser icon sizes #4300

Description

@chungus-big

⚬ PROBLEM:
In the extension popup menu, the bottom frame (loaded in menu/skeleton.js via https://improvedtube.com/wishes) displays browser store / volunteer icons of inconsistent sizes, leading to an uneven appearance:

  • Naver Whale: height="20px"
  • Safari: height=23px" (missing opening quote)
  • Edge: height="18px"
  • Firefox: height="20px"
  • Trophy: height="23px"
  • Chrome: height="18px"
  • Opera: height="7px" (typo, renders as a tiny dot)

Because this iframe is loaded from an external domain (improvedtube.com), the extension cannot style or fix these elements locally due to Same-Origin Policy restrictions.

⚬ SOLUTION:

  1. Recommended: Bundle the wishes/links section locally within the extension (e.g. as a local HTML file or native Satus UI component) instead of loading it from an external URL. This prevents cross-origin issues, improves privacy/offline support, and allows consistent styling.
  2. Server-side fix: If kept as an external resource, update the HTML on https://improvedtube.com/wishes to give all browser store icons a uniform height (e.g. height="18px" or height="20px") and fix the typos (missing quote for Safari and height="7px" for Opera).

⚬ ALTERNATIVES:
Fixing the HTML directly on the improvedtube.com server without modifying the extension's iframe setup.

⚬ RELEVANCE / SCOPE:
Applies to all users opening the main popup menu.

⚬ "SIDE EFFECTS":
None. Bundling locally also improves load performance and prevents layout shifting.

⚬ CONTEXT:
In menu/skeleton.js:

frame: {
    component: 'iframe',
    class: 'frame',
    attr: {
        'src': 'https://improvedtube.com/wishes?'+ Date.now(),
        'style': 'border: none; bottom: 0px; overflow: hidden; width:326px; position: absolute; height:212px; left:-6px !important'
    }
}

Relevant HTML snippet currently served by https://improvedtube.com/wishes:

<a target="_blank" title="Naver Whale Store &#9733&#9733&#9733&#9733&#9733" href="..."><img height="20px" src="..."></a>
<a target="_blank" title="Safari, Apple Appstore &#9733&#9733&#9733&#9733&#9733" href="..." rel="nofollow"><img height=23px" src="..."></a>
<a target="_blank" title="Microsoft Edge Store &#9733&#9733&#9733&#9733&#9733" href="..."><img height="18px" src="..."></a>
<a target="_blank" href="..." title="Mozilla Firefox Add-on &#9733&#9733&#9733&#9733&#9733"><img height="20px" src="..."></a>
...
<a target="_blank" title="Opera Add-on (outdated)" href="..."><img height="7px" src="..."></a>
SHORT Table (Summary)
Problem Inconsistent icon sizes and syntax errors in external wishes iframe (improvedtube.com/wishes).
Solution Bundle the wishes footer locally or normalize icon sizes on the server.
Alternatives Only update HTML on improvedtube.com/wishes.
Scope All extension popup users.
Side effects None.
Context menu/skeleton.js loading https://improvedtube.com/wishes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions