Fetch CSS files that can't be accessed directly

[pjpscriv]

Fixes #18, #16, #14, #10, #8.

Context

When investigating #18, I found that CSS files that are linked linked with rel="preload", didn't appear to have their font-family overrides correctly added to the #country-flag-fixer-ext style tag that the extension adds. For example:

<link as="style" href="https://assets.quizlet.com/_next/static/css/c942139eed6c8f57.css" rel="preload">

In particular, I found the script failed at line 25 of content.js, and debugging in dev tools, it looks like these rel="preload" css files for whatever reason don't let you use sheet.cssRules (like line 25 uses).

So I added in a try/catch (here) that first tries to read the rules with sheet.cssRules, and if this fails, then it will try to retrieve the CSS file directly from the href (new function fetchCSSRulesFromUrl).

This is the core of the change which gets the missed styles added into the #country-flag-fixer-ext style tag.

Other changes done alongside this change:

• Togglable logging functionality to help with debugging
• Changing how often the #country-flag-fixer-ext tag is updated:
  • Now updates once per CSS sheet as opposed to once per mutation cycle
  • Before removing the old #country-flag-fixer-ext tag, its existing cssRules are read, added to the new tag, and then the new CSS rules are added
  • I did this because I found if I didn't, a CSS file would get read correctly, and the rules would be ready to add to #country-flag-fixer-ext, but then if there was a CORS or some other error trying to read a later CSS file, this would error and exit the whole process meaning the rules from the previously successfully read file wouldn't be added
  • This now means the main function the observer calls is updateFontFamilyRules() instead of applyCustomFontStyles()
• Pulling out styleSheetsChanged into its own function

Testing

This fix works for nearly all the broken sites mentioned in current issues except Bluesky.

Checked against the following URLs. Screenshots below.

• Quizlet - Not working for quizlet.com #18:
  • https://quizlet.com/user/pjpscriv/folders/peters-french-1
• Strava - Doesn't work on Strava #16 Fixing country flags not working on Strava #14:
  • https://www.strava.com/athletes/3972456
• Letterboxed - Not working on Letterboxd #8:
  • https://letterboxd.com/search/🇵🇸+🇺🇸+🇧🇷+🇩🇪/
• Old reddit Not working on old.reddit.com #10 :
  • https://old.reddit.com/r/Windows11/comments/upjpj9/flag_emojis/
• Bluesky - Strange behavior/disfunction on Bluesky #9 :
  • https://bsky.app/profile/pjpscriv.com
• Emojipedia for completeness:
  • https://emojipedia.org/flag-aland-islands

Quizlet ✅

Strava ✅

Letterboxed ✅

Old reddit ✅

Bluesky ❌

Emojipedia ✅

[pjpscriv]

Hmm probably don't want to merge this immediately - as a first impression browsing it seems to make #13 worse and slows LinkedIn all the way down too.

Will need some performance optimizations before merging.