Stylish does not affect dynamically generated iframes #3

JasonBarnabe · 2013-09-12T00:17:55Z

http://forum.userstyles.org/discussion/15032/how-to-apply-css-to-content-within-an-iframe
https://code.google.com/p/chromium/issues/detail?id=76429

JasonBarnabe · 2014-05-30T18:58:23Z

https://developer.chrome.com/extensions/content_scripts - match_about_blank - available in Chrome 37.

jameson5555 · 2014-07-08T19:49:15Z

+1

The new Google Tag Manager debug iframe style is pretty hideous. I'd love to Stylish it up.

silverwind · 2015-01-29T16:52:53Z

@JasonBarnabe anything else that needs to be done here other than adding match_about_blank to the permissions in manifest.json? I could send you a PR, but it's a trivial change :)

JasonBarnabe · 2015-01-29T16:54:39Z

I'm unsure. Why don't you test it out and if that's all that's needed, send a PR.

silverwind · 2015-01-29T16:55:36Z

I'll test it.

silverwind · 2015-01-29T17:07:30Z

It appears it's all that was needed. Here's the iframe after the fix (was white before):

Mottie · 2015-01-29T17:40:41Z

Awesome news! 👍

Add match_about_blank to fix #3

JasonBarnabe · 2015-01-29T18:21:07Z

I tested this a bit myself. It makes things better, but still not great.

-Testing on Tumblr's new post box, it still doesn't work. This is likely because the src is javascript:"" rather than nothing (about:blank).
-Testing on MDN's editor, it works if you apply the style after the page has loaded, but not if you load the page with the style enabled already. Maybe this is because the iframe's not there when Stylish runs?

silverwind · 2015-01-29T18:30:46Z

For the first case: I think we need to change the patterns. Will experiment with javascript urls, file:// is also missing there.

For the second case: Maybe something like a mutation observer is needed to re-apply when iframes get added. But there's probably a cleaner solutions out there.

JasonBarnabe · 2015-01-29T18:57:59Z

For the first case: I think we need to change the patterns. Will experiment with javascript urls, file:// is also missing there.

Chrome's docs say javascript: is not allowed. I've added file: in #25.

silverwind · 2015-01-29T19:01:10Z

Chrome's docs say javascript: is not allowed

Can you link me to where you read that? Sounds like another Chromium issue is required.

JasonBarnabe · 2015-01-29T19:03:29Z

Same doc you linked to. It lists allowed schemes, and javascript: isn't one of them.

A more likely solution is extending match_about_blank to javascript: URLs, though.

silverwind · 2015-01-29T19:05:32Z

Well, I don't see javascript: mentioned explicitly, so I think <all_urls> or * might be worth a try.

silverwind · 2015-02-08T13:59:35Z

No luck with <all_urls> and * is not a valid entry. My iframe in question (on irccloud.com) doesn't have a src attribute, but once I added github.com to the matched domains of the style, it did work. Pretty strange nonetheless.

silverwind · 2015-02-08T14:22:05Z

@JasonBarnabe I tried your MDN example, but it works as expected on page reloads. Here's the style I was using:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("developer.mozilla.org") {
  .cke_wysiwyg_frame, .cke_wysiwyg_div { margin-left: 50% !important;}
}

This is on Chrome 42. Could you verify again that the MDN case works for you?

Also, please point me to the iframe you meant on tumblr. I could only identify a few hidden ones in the HMTL. Maybe <all_urls> could solve that case.

silverwind · 2015-02-08T14:51:31Z

Noticed the page reload issue on another site. I think this is only fixable through JS.

JasonBarnabe · 2015-02-08T17:48:47Z

Tumblr must've changed their editor since I tried last, because yeah, there's no iframe involved any more.

hideheader · 2015-02-12T21:41:00Z

(1) Tumblr dropped TinyMCE and began using contentEditable elements on Jan 28. The TinyMCE samples use the same pattern. Chrome doesn't load content scripts into src='javascript:""' iframes - the match_about_blank fix will always fail on these frames.

(2) The intermittent failure in MDN's editor occurs when Chrome is able to run the content script before the page writes content to the iframe. A minimal default document, <html><head/><body/></html>, is created in the iframe when it's inserted into the DOM. If the page script that writes the iframe content runs before the Stylish content script, you see styles. If the content script runs first, Stylish adds styles to the default document, which are subsequently lost when the page replaces the iframe content. It's a race.

The only remedy for intermittent failures like this is to monitor the styles with a MutationObserver and replace them.

(3) Here are some test cases. Stylish is yes if Chrome ran the content script, styled is yes if the style was applied, src is <iframe>.src and docURI is <iframe>.contentDocument.documentURI.

	src=	Stylish	styled	src	docURI
1	none	yes	yes	http://ace.c9.io/	http://ace.c9.io/#nav=embedding
2	''	yes	yes	http://ace.c9.io/	http://ace.c9.io/#nav=embedding
3	`javascript:""`	no	no	javascript:""	http://ace.c9.io/#nav=embedding
4	`data:...`	yes	yes	data:...	http://ace.c9.io/#nav=embedding
5	srcdoc	yes	no	''	about:srcdoc
6	none [†]	yes	no	''	about:blank
7	`gardez:l.eau`	yes	yes	gardez:l.eau	http://ace.c9.io/#nav=embedding
8	`#`	yes	yes	http://ace.c9.io/#	http://ace.c9.io/#nav=embedding

[†] createHTMLDocument(), then replaceChild()

// All but cases 5 & 6 set a `src` URL, then write the `contentDocument`
l = document.body.appendChild(document.createElement('iframe'));
l.src = aString; // omitted, if aString is none
d = l.contentDocument; d.open(); d.write(iframeContent); d.close();

// Case 5 sets `srcdoc` to the document content instead of writing `contentDocument`
l = document.body.appendChild(document.createElement('iframe'));
l.srcdoc = iframeContent;

// Case 6 creates a complete `document` de novo, then inserts it into the `iframe`
d=document.implementation.createHTMLDocument('Editor IFRAME')
d.open(); d.write(iframeContent); d.close();

l = document.body.appendChild(document.createElement('iframe'));
d2 = l.contentDocument;
d2.replaceChild(d2.adoptNode(d.documentElement), d2.documentElement);

(4) As you can see,

match_about_blank really isn't a solution. What's needed is a MutationObserver that copies existing styles from into new frames, another that copies new styles into existing frames, and a third that detects when styles are removed and replaces them when appropriate. The first two are easy. The third requires a little experimentation, since you don't want to reinsert them while the page is being torn down.

silverwind · 2015-02-17T22:36:43Z

Just wanted to say thank you @hideheader, awesome work!

hideheader · 2015-02-22T18:29:24Z

This pull request is a pair of MutationObservers that copy Stylish STYLE elements from the top-level document into child IFRAMEs. I've tested with the examples above using the Ace editor, on the TinyMCE editor, and on MDN's editor using this style. It works with all but srcdoc='<html/>' frames, which load contentDocument very late; those can be handled in onLoad on the IFRAME.

The PR only adds styles when the IFRAME is added to the DOM, just as apply.js does, so there should still be intermittent failures with MDN's editor. Unfortunately it hasn't been failing on MDN, so I need an example page that overwrites frame content after the content script has loaded.

Both IFRAME.onload and webNavigation.onCommitted fire when frame content is reloaded. Each has issues; test cases are needed to sort them out.

If you want to experiment, the penultimate commit before the PR can add a MutationObserver on HTML and HTML > *, and an onLoad handler on IFRAMES; localStorage['observer.observeFrameContent'] = localStorage['observer.observeFrameLoad'] = 'true' enables them.

JasonBarnabe · 2015-03-04T20:04:51Z

Committed a fix to the iframe mutation observer. Evidentally the test page I stole from @hideheader never actually triggered this functionality.

More testing is welcome.

hideheader · 2015-03-04T23:13:56Z

My, that was lucky. If you hadn't refactored the code and broken it we still wouldn't know that there's a blind spot in the test cases. What condition is it that wasn't being triggered?

JasonBarnabe · 2015-03-05T02:43:59Z

The iframe mutation observer never ran; I assume because the iframes were added before the content script ran. So everything appeared to work, whether loading the page with the style on or turning it on after load, but only the page load logic was being exercised.

JasonBarnabe · 2015-03-05T18:03:08Z

Fixed the pushState case for feedly.

tophf · 2015-05-27T22:25:53Z

Fixed, evidently, may be closed.

YodaEmbedding · 2016-06-19T23:07:52Z

Still appears not to work with the following URL: https://mail.google.com/tasks/canvas?pli=1

Test case:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://mail.google.com/tasks/canvas") {

  .J {
    background-color: #333 !important;
  }

  .Z {
    color: #ccc !important;
  }

  .o, .k, .p, .i, .Mb {
    border-color: #444 !important;
  }

}

Mottie · 2016-06-20T00:24:54Z

@SicariusNoctis Google changes element class names with every new page load. Target elements using a nodeName and DOM structure (e.g. body > div > table).

YodaEmbedding · 2016-06-21T10:36:02Z

I don't think that's the issue here: the class names stay consistent, or at the very least, every time I refresh the page. The problem is, they are inside an iframe, and there appears to be no way to target them.

tophf · 2016-06-21T10:41:30Z

Still appears not to work with the following URL: https://mail.google.com/tasks/canvas?pli=1

Can't reproduce on Chrome 53.0.2767.4 dev-m.

With the style applied:

Without:

YodaEmbedding · 2016-06-22T03:05:33Z

It is not working on Firefox 47.0 (release) running Stylish 2.0.6 (release).

EDIT: It does work on Google Chrome, however.

tophf · 2016-06-22T09:37:11Z

There's a separate issue #166 as Firefox's Chrome-compatible WebExtensions API is still incomplete.

j-ulrich · 2017-06-28T13:07:54Z

Still doesn't work for me with a src="javascript:""" iframe in Chrome 58 (64-bit, Win7).
Unfortunately, I cannot link to the page because it's not publicly accessible. But it's a Confluence page being edited.
Am I missing something? Do I have to add "about:blank" to the URL matching rules of the design or something like that?

tophf · 2017-06-28T13:10:51Z

@j-ulrich, Stylish seems to be on indefinite hiatus. Try Stylus instead.

silverwind mentioned this issue Jan 29, 2015

Inline gists in Chrome StylishThemes/IRCCloud-Dark#2

Open

silverwind mentioned this issue Jan 29, 2015

Add match_about_blank to fix #3 #26

Merged

JasonBarnabe closed this as completed in #26 Jan 29, 2015

JasonBarnabe added a commit that referenced this issue Jan 29, 2015

Merge pull request #26 from silverwind/iframe

4c53a19

Add match_about_blank to fix #3

JasonBarnabe reopened this Jan 29, 2015

hideheader mentioned this issue Feb 21, 2015

Copy user styles into dynamic IFRAMEs #39

Closed

JasonBarnabe added a commit that referenced this issue Mar 3, 2015

Manually apply styles to dynamic iframes #3

908d769

JasonBarnabe added a commit that referenced this issue Mar 4, 2015

Fix iframe mutation observer #3

d151dd0

JasonBarnabe added a commit that referenced this issue Mar 5, 2015

Fix pushState logic for iframe changes #3+

74d83e2

JasonBarnabe closed this as completed Jun 4, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stylish does not affect dynamically generated iframes #3

Stylish does not affect dynamically generated iframes #3

JasonBarnabe commented Sep 12, 2013

JasonBarnabe commented May 30, 2014

jameson5555 commented Jul 8, 2014

silverwind commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

silverwind commented Jan 29, 2015

Mottie commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

silverwind commented Feb 8, 2015

silverwind commented Feb 8, 2015

silverwind commented Feb 8, 2015

JasonBarnabe commented Feb 8, 2015

hideheader commented Feb 12, 2015

silverwind commented Feb 17, 2015

hideheader commented Feb 22, 2015

JasonBarnabe commented Mar 4, 2015

hideheader commented Mar 4, 2015

JasonBarnabe commented Mar 5, 2015

JasonBarnabe commented Mar 5, 2015

tophf commented May 27, 2015

YodaEmbedding commented Jun 19, 2016 •

edited

Loading

Mottie commented Jun 20, 2016

YodaEmbedding commented Jun 21, 2016

tophf commented Jun 21, 2016

YodaEmbedding commented Jun 22, 2016 •

edited

Loading

tophf commented Jun 22, 2016

j-ulrich commented Jun 28, 2017 •

edited

Loading

tophf commented Jun 28, 2017

Stylish does not affect dynamically generated iframes #3

Stylish does not affect dynamically generated iframes #3

Comments

JasonBarnabe commented Sep 12, 2013

JasonBarnabe commented May 30, 2014

jameson5555 commented Jul 8, 2014

silverwind commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

silverwind commented Jan 29, 2015

Mottie commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

JasonBarnabe commented Jan 29, 2015

silverwind commented Jan 29, 2015

silverwind commented Feb 8, 2015

silverwind commented Feb 8, 2015

silverwind commented Feb 8, 2015

JasonBarnabe commented Feb 8, 2015

hideheader commented Feb 12, 2015

silverwind commented Feb 17, 2015

hideheader commented Feb 22, 2015

JasonBarnabe commented Mar 4, 2015

hideheader commented Mar 4, 2015

JasonBarnabe commented Mar 5, 2015

JasonBarnabe commented Mar 5, 2015

tophf commented May 27, 2015

YodaEmbedding commented Jun 19, 2016 • edited Loading

Mottie commented Jun 20, 2016

YodaEmbedding commented Jun 21, 2016

tophf commented Jun 21, 2016

YodaEmbedding commented Jun 22, 2016 • edited Loading

tophf commented Jun 22, 2016

j-ulrich commented Jun 28, 2017 • edited Loading

tophf commented Jun 28, 2017

YodaEmbedding commented Jun 19, 2016 •

edited

Loading

YodaEmbedding commented Jun 22, 2016 •

edited

Loading

j-ulrich commented Jun 28, 2017 •

edited

Loading