Conversation
…host pages Tailwind preflight from src/tailwind.css and @codebridger/lib-vue-components was being injected into document.head, where its universal selectors (`*, ::before, ::after`, `button`, `img`, ...) reset host-page styles. On YouTube this broke icon rendering and prevented the profile page video grid from loading. Add postcss-prefix-selector to scope every selector under `.subturtle-scope` and tag all mount roots (#subturtle-app, #subturtle-popup) and teleport target wrappers with that class. The transform is idempotent (node_modules CSS was visited more than once) and drops `body` rules so the library's page-level background/font do not paint our wrapper. #86exa5j3c
…ping #86exa5j3c The Netflix initializer inserted #subturtle-app into the DOM before adding the `subturtle-scope` class, so the MutationObserver in the settings store saw an unclassed element and skipped theme application — leaving Netflix without dark mode and any observer-based scope handling. Reorder so the id, classes, and inline styles are set before insertion, matching YouTube and MS Teams. Add clarifying comments where the WHY is non-obvious: - postcss.config.js: top-level overview of the scoping strategy plus inline notes on the idempotency guard, body/html/:root drops, and the .dark compound rewrite. - settings store: explain why dark/light lives on .subturtle-scope elements (compound selector rewrite) instead of <html>, and why the MutationObserver is needed for teleport wrappers mounted after init. - Teleport wrappers (WordSelectionRectangle, YouTube/MS Teams Index.vue): flag that the teleport target escapes #subturtle-app. - _support-template initializer: canonical note describing the role of the subturtle-scope class for new surfaces. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… #86exa5j3c The MS Teams surface relied on a Trusted-Types monkey-patch that was suspected of breaking YouTube but turned out to be a non-issue once the Tailwind preflight bleed was fixed. With no active MS Teams users on the extension, drop the integration to reduce surface area. - Delete src/subtitle/ms-team (Index.vue, components, initializer, static). - Remove the msTeam initializer import and the trusted-types-polyfill side-effect import from src/main.ts. - Drop https://teams.microsoft.com from manifest content_scripts and tighten the YouTube match to https://www.youtube.com/watch?* so the bundle only loads on actual watch pages. - Update src/subtitle/README.md to remove MS Teams references. Keep src/trusted-types-polyfill.ts in the tree (now unimported) with a generalized doc comment, since it remains the canonical workaround for hosts with strict Trusted Types CSP and may be opted into by future content scripts that need to run on such sites. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…d-inconsistency-on-youtube_Navid-Shad Remove MS Teams integration and scope extension styles and scripts #86exa5j3c
Collaborator
Author
navidshad
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🏷️ PR Title:
Fix extension load inconsistencies and improve CSS scoping with dark mode support
📋 Summary
This PR addresses several issues related to the extension's styling and loading behavior. It improves popup styling by applying new CSS scoping to isolate styles, fixes the login view for the light theme, and scopes the extension CSS to prevent Tailwind preflight styles from affecting host pages. Additionally, it applies dark mode styles within the scoped extension wrapper and classifies the Netflix scope wrapper before insertion to ensure proper document scoping. The MS Teams integration has been removed, and content-script matches have been tightened to improve performance and reliability.
🔗 Related Tasks
#86exa5j3c - Fix extension load inconsistency on YouTube, scope Netflix wrapper, apply dark mode inside scoped extension wrapper, and tighten content-script matches
📝 Additional Details
📜 Commit List