0

I made Google Chrome extension which inserts (by default hidden) text area into document.

It appears on all pages. It's ok when page is HTML, but on other pages it's unuseful. For example, when I open https://raw2.github.com/github/hubot/master/README.md, I can see textarea, even it has display: none !important styling (via class). It should be hidden, but it isn't.

Screenshot

How to prevent that weird situation? Maybe to check document type (is it HTML)?

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • possible duplicate of [How can I detect the current tab's mime type in a Google Chrome extension?](http://stackoverflow.com/questions/4921175/how-can-i-detect-the-current-tabs-mime-type-in-a-google-chrome-extension) – Benjamin Gruenbaum Jan 10 '14 at 10:32
  • @ZDroid, your problem is caused by something entirely different from the doc type. Could you edit your question to ask your real question, instead of what you thought that caused the problem? – Rob W Jan 10 '14 at 10:35
  • @RobW Get the source and try with that GitHub Raw page. I'll try the solution of question which Benjamin posted. –  Jan 10 '14 at 10:47
  • @ZDroid I got the source already. And I discovered that you're asking the wrong question, the problem has *nothing* to do with the doc type. I believe that what you really want is to hide that text box in the right way. – Rob W Jan 10 '14 at 10:51
  • Yes, and I'm doing that in right way, but only for HTML. I want to hide it on other documents, like Markdown. :) –  Jan 10 '14 at 10:52
  • @ZDroid I've edited your title to reflect what I think that you wanted to ask. Feel free to roll back the edit if you think that the edit was incorrect. – Rob W Jan 10 '14 at 11:26
  • @BenjaminGruenbaum No it isn't duplicate. Sorry. –  Jan 10 '14 at 14:07

1 Answers1

1

It seems that content script styles are not applied to files served with MIME-type text/plain. This is clearly a bug, so I have reported it on Chromium's bug tracker, see issue 333234 .

A work-around to the problem is to insert a plain <style> element in the document:

document.head.appendChild(document.createElement('style'));

This does not work in your specific example, because inline and external style sheets are blocked by Github's Content Security Policy (default-src 'none').
The only work-around I can think of is to directly apply the style sheet via JavaScript:

textarea.style.display = 'none';
// Or,
textarea.style.cssText = 'display:none;';
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • I just asked about this specific problem. Also, you don't need to worry about my opinions. I have my reasons for doing things in *side notes*. Storage API is in implementation, I don't know why are you worrying about that. –  Jan 10 '14 at 14:05
  • @ZDroid No worries, just pointing to them in case you (or others) did not know. Storing extension data in the storage space of other web pages is often not ideal. I'm not going in the details because you said that you know better. Would you like me to remove the last section (side notes, unrelated to the specific question)? – Rob W Jan 10 '14 at 14:47
  • I didn't say that. Aww. Do what you want, it's ok to stay in, but it's totally unuseful for new *dudes* who will read this question. :) –  Jan 10 '14 at 14:58
  • Fixed in https://github.com/ZDroid/restilizr/commit/d1cd81ca6ea0a6e9c379f0e1a6749bad6e3249dd. Works. –  Jan 10 '14 at 15:02