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

MapleRecall

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 ?

freecyber

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.

JasonBarnabe

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.

hideheader

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

JasonBarnabe

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...

freecyber

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.

MapleRecall

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...

myf

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?

JasonBarnabe

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.

freecyber

[deleted per hh suggestion]

hideheader

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.

hideheader

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

MapleRecall

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...

LouCypher

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});

hideheader

It makes me laugh to think of you trailing Baidu, quietly replacing stylesheets as fast as they remove them.

MapleRecall

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