Git Product home page Git Product logo

Comments (6)

dohliam avatar dohliam commented on May 22, 2024 1

Yes, it might be a good idea to try recursively removing all styles before adding the switcher. This might break a lot of pages though, so it would probably need a lot of testing on various sites and with all the different stylesheets. On the other hand, it might allow some pages to work with the switcher that currently don't (like Github itself).

from dropin-minimal-css.

dohliam avatar dohliam commented on May 22, 2024

@EvgenyOrekhov It looks like this error is caused by the integrity check in the CSS link to normalize.min.css on that page:

<link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.6.0/modern-normalize.min.css"
            integrity="sha256-a9JO7L1jGkja9va1xGMWEJspCfU/b9Vn5u/O5MdnKhw="
            crossorigin="anonymous"
        />

As far as I understand, this basically checks that the loaded minified Normalize CSS file has not been changed. However, the bookmarklet does change the CSS (it replaces it), so the integrity test fails.

There are probably a few ways to fix this -- you could of course remove the integrity check or (if that's not possible), move the call to Normalize CSS down in the list of linked stylesheets (the switcher just tries to replace the first linked stylesheet).

Hope that helps!

from dropin-minimal-css.

EvgenyOrekhov avatar EvgenyOrekhov commented on May 22, 2024

If the switcher was inserting a new <link> element instead of replacing an existing one, I think it would solve the issue. What do you think?

It's just more and more websites are starting to use integrity checks.

from dropin-minimal-css.

dohliam avatar dohliam commented on May 22, 2024

Yes, it did do something like that at first, but I quickly discovered that this leads to unexpected results because it effectively layers the new stylesheet on top of the old one (often this results in no effect at all, actually -- particularly if the first stylesheet has lots of !important statements). So this is an imperfect solution but it does work most of the time.

from dropin-minimal-css.

EvgenyOrekhov avatar EvgenyOrekhov commented on May 22, 2024

So what is the switcher trying to emulate? I mean, if it tries to emulate how the page would look if you included one of the themes along with your existing styles, then the switcher should not mess with existing styles at all. If the switcher is supposed to emulate how the page would look if you included only one of the themes, then the switcher should remove all existing styles first. The way it works now, is a mix of both. That is unexpected.

from dropin-minimal-css.

lemmi avatar lemmi commented on May 22, 2024

I ran in a similar issue. Removing the integrity attribute with css_link.integrity="" the styles are loaded correctly.
I also tried delete css_link.integrity and css_link.integrity=undefined, but those didn't seem to work.

from dropin-minimal-css.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.