Main Forum Closed.

Stylish can't auto apply style to some websites in latest version Chrome

edited March 2014 in Stylish
Sorry for my poor English X_X

Today I get a feedback for my stylish
http://userstyles.org/styles/91391/theme
The style is for www.baidu.com ,it's the largest search engine in China

He say the style can't auto apply in results page, I tested it and found that this problem does exist, I also tried to download other styles, and all of them can't be auto applied either.

The problem is only show in the lastest version Chrome, so how can I fix it ?

Comments

  • edited March 2014
    Confirmed that Stylish test style as well as MapleRecall's style does not work on baidu.com search results until the style is disabled and re-enabled.

    Also (may be related) I see hideheader's Stylish for Chrome: Fit the editor to its content technique no longer works. I believe this is also new as of latest Chrome (Version 33.0.1750.146 m) on Windows 7.
  • It looks like Baidu search results page essentially rewrites itself when it's loaded. Doing so is taking out the thing Stylish applied. Not sure if there's a good way around this.
  • edited March 2014
    I see hideheader's Stylish for Chrome: Fit the editor to its content technique no longer works. I believe this is also new as of latest Chrome (Version 33.0.1750.146 m) on Windows 7.
    User stylesheet support was removed in Chrome 32.
    https://codereview.chromium.org/64843004
    https://codereview.chromium.org/66383005/
    http://stackoverflow.com/questions/21207474/custom-css-stop-to-work-in-32-0-1700-76-m-google-chrome-update
  • The Apps codepath for this is just using the wrong thing.
    It should be using author-level styles like extensions do.
    I feel a little guilty here...
  • edited March 2014
    User stylesheet support was removed in Chrome 32.
    https://codereview.chromium.org/64843004
    https://codereview.chromium.org/66383005/
    http://stackoverflow.com/questions/21207474/custom-css-stop-to-work-in-32-0-1700-76-m-google-chrome-update
    Thanks, I used the True emulation of Custom.css method in the stackoverflow article, substituting location.protocol === 'chrome-extension:', and it worked.
  • It looks like Baidu search results page essentially rewrites itself when it's loaded. Doing so is taking out the thing Stylish applied. Not sure if there's a good way around this.
    So it means there is not simple ways to solve this problem now?
    I know it may can be fixed by user script, but I don't think it's a good idea...
  • User stylesheet support was removed in Chrome 32.
    https://codereview.chromium.org/64843004
    https://codereview.chromium.org/66383005/
    http://stackoverflow.com/questions/21207474/custom-css-stop-to-work-in-32-0-1700-76-m-google-chrome-update
    Omg, thats sad. So there is no hope of getting rid of bright white flashes before style injection in Chrome? I silently waited for native support of @-..-document rules in Custom CSS and they removed Custom.css altogether.
    It looks like Baidu search results page essentially rewrites itself when it's loaded. Doing so is taking out the thing Stylish applied. Not sure if there's a good way around this.
    In worst scenario, page that periodically checks its DOM tree for 'artificial augmentations' and removes/fixes them immediately is most probably unbeatable.

    That removal of true user stylesheets that got into cascade other way than DOM injection seems like a terrible change. Isn't it against specs?
  • Also, add an insertStyleSheet method to WebDocument so that we
    can eventually get rid of the UserStyleLevel enum.
    This is possibly something Stylish could use that couldn't be wiped by the page, but I don't see any documentation anywhere on it.
  • edited March 2014
    [deleted per hh suggestion]
  • edited March 2014
    Take it somewhere else, boys; don't hijack this thread.
    It looks like Baidu search results page essentially rewrites itself when it's loaded.
    Not completely, but it is stripping HEAD of its children [figure].
    // ==UserScript==
    // @name oh baidu, you so baid
    // @namespace forum.userstyles.org
    // @description demonstrates baidu "sanitizing" HEAD elements
    // @run-at document-start
    // ==/UserScript==
    (function() {
    var css = "* {color: red !important}";
    if (document.documentURI.indexOf("baidu.com") < 0)
    css = "/* it's not so baidu */";

    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode(css));
    document.documentElement.appendChild(style);

    var head = document.createElement("head");
    head.setAttribute('class', 'mine');
    head.appendChild( style.cloneNode(true) );
    head.appendChild( document.createElement('span') );

    document.documentElement.appendChild( head );
    document.documentElement.appendChild( head.cloneNode(true) );
    document.documentElement.appendChild( head.cloneNode(true) );
    })();
    Script runs when DOM is just a documentElement. Notice that Baidu strips both the STYLE and the SPAN from all of .mine, and inserts two of its own STYLEs in each one; HTML > STYLE is untouched.

    One solution is to attach Stylish STYLEs to documentElement instead of to HEAD. Another is to monitor deletions on HEAD with a MutationObserver, identify your own removedNodes, and reattach them.
    https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
    The Apps codepath for this is just using the wrong thing.
    It should be using author-level styles like extensions do.
    I feel a little guilty here...
    I don't think Chromeo understood when he filed that issue that USER sheets are fundamentally an accessibility feature - that's why they can trump AUTHOR sheets in the cascade, and it's likely the reason why custom.css was applied to the chrome:// URIs in the first place.

    (And if anyone feels strongly about losing this functionality, it shouldn't be hard to persuade Google to restore it by appealing to their "don't be evil" mantra.)
    Also, add an insertStyleSheet method to WebDocument so that we can eventually get rid of the UserStyleLevel enum.
    This is possibly something Stylish could use that couldn't be wiped by the page, but I don't see any documentation anywhere on it.
    void WebDocument::insertStyleSheet(const WebString& sourceCode)
    https://chromium.googlesource.com/chromium/blink.git/+/master/Source/web/WebDocument.cpp
    https://codereview.chromium.org/154113008/

    It's not exposed to Javascript, though.
    679 x 529 - 33K
    679 x 529 - 37K
  • edited March 2014
    So it means there is not simple ways to solve this problem now? I know it may can be fixed by user script, but I don't think it's a good idea...
    The only simple solution is to install Baidu styles as user scripts. In Chrome,
    1. Browse to chrome://extensions, find Stylish in the list, and clear the "Enabled" checkbox
    2. Reload the Userstyles.org page with the Baidu style that you want to install. The "Install" button will now appear as in the screenshot below.
    3. Right-click the link "install this style as a user script" and save the file.
    4. Drag the file onto chrome://extensions and drop it to install the script.
    5. Find Stylish again in the list of extensions and check the "Enabled" checkbox.
    Stylish won't include this style in the Style Manager; you have to manage it from Extensions like any other script.

    It's not as simple as using Stylish, but it's the best you can do now. If this is what you meant by "fixed by user script", then you are stuck.

    If you'll be installing Baidu styles frequently, you can add Userstyles.org to Chrome's whitelist so that you can install by clicking the link instead of right-click/save/drag+drop.
    http://www.chromium.org/administrators/policy-list-3#ExtensionInstallSources
    431 x 222 - 7K
    690 x 745 - 54K
  • Thanks hideheader,it's better than nothing.

    I'll try to tell users how to add Userstyles.org to whitelist...


    BTW,I find if I search from adressbar or right-click menu at selected text (Baidu is my default search engine), styles can be applied as usual.

    The different between them is the search parameter:
    if I search from the index page,the results page's adress is like
    http://www.baidu.com/#wd=Chrome
    and search from adressbar or right-click menu it's like
    http://www.baidu.com/s?ie=UTF-8&wd=Chrome

    It looks like the first way to search is request the data from the second way, and rewrite it to the page... I can't understand why Baidu do like that, it doesn't make sense...
    1240 x 647 - 166K
  • edited March 2014
    Another is to monitor deletions on HEAD with a MutationObserver, identify your own removedNodes, and reattach them.
    Copy and paste this userscript to Tampermonkey. It restores all Stylish's styles on Baidu.
    // ==UserScript==
    // @name Baidu x Stylish test
    // @namespace https://greasyfork.org/users/4
    // @description Restore Stylish styles from deletion on baidu.com
    // @version 1.0
    // @author LouCypher
    // @match *://*.baidu.com/*
    // @run-at document-end
    // ==/UserScript==

    function addStyle(id, css) {
    var style = document.createElement("style");
    style.type = "text/css";
    style.id = id;
    style.textContent = css;
    document.head.appendChild(style);
    }

    function checkForStylish() {
    return document.head.querySelectorAll('style[id^="stylish"]');
    }

    var styles = checkForStylish();
    //console.log(styles.length);
    if (styles.length) {
    var stylish = [];
    for (var i = 0; i < styles.length; i++) {
    stylish[i] = {};
    stylish[i].id = styles[i].id;
    stylish[i].css = styles[i].textContent;
    }
    }

    new (WebKitMutationObserver)(function(aMutations) {
    aMutations.forEach(function(aMutation) {
    if (aMutation.removedNodes.length)
    if (styles.length && !checkForStylish().length) {
    for (var i in stylish) {
    addStyle(stylish[i].id, stylish[i].css);
    }
    }
    });
    }).observe(document.head, {childList:true});
  • edited March 2014
    It makes me laugh to think of you trailing Baidu, quietly replacing stylesheets as fast as they remove them.
    1024 x 743 - 38K
  • LouCypher's userscript is work well, I edited the match and upload it to userscripts.org and greasyfork.org for users to download.

    Thank u very much! :x
Sign In or Register to comment.