Search code examples
javascriptcssiframeuserscripts

I have a userscript to change embedded chat colors. How do I incorporate the script's functionality into my page instead?

I have popup chat, from twitch.tv, embedded in my web page, in an <iframe>.
I currently have this userscript to change some of the colors:

// ==UserScript==
// @name           Twitch Font Color Fix
// @namespace      void
// @description    Replaces Spring Green, among other, equally cryptic font colors from the chat on www.twitch.tv, with darker versions of the original color.
// @match          http://www.twitch.tv/*
// @include        http://www.twitch.tv/*
// @version        1.0
// ==/UserScript==

var springStyle = document.createElement("style");

springStyle.type = "text/css";
springStyle.textContent = '*[style*="#00FF7F"]{color: #007F3F !important;}*[style*="#9ACD32"]{color: #568000 !important;}*[style*="#00FF00"]{color: #007F00 !important;}';

document.head.appendChild(springStyle);


This works, but I'd like to incorporate the color changes into my site so that a userscript is not needed. How can I do this?

BTW:

  1. I tried to enable it via <script src="blabla.js"></script>. It didn't work.
  2. $(document).ready(function () {}); Also didn't work.
Solution

  • You cannot alter the CSS for a cross-domain iframe using the page's javascript. This is to help prevent Cross-site scripting (XSS) attacks.

    Here are possible workarounds, best to worst:

    1. Use the API, if the target (chat) site has one. Your page would not load an iframe and would be in full control of how the chat was displayed. Your page uses the API to both fetch and, optionally, post chat messages.

      Advantages: Full control over what is displayed and what is posted.
      Disadvantages: Many sites do not have an API, or the API does not offer the needed functionality.

    2. Replicate the site's AJAX calls. Sometimes it's not too hard to figure out the gets and posts for the particular functionality you want. And, sometimes the target site even supports this approach with its authentication methods and Cross-origin resource sharing (CORS) policies.

      Advantages: Can be just as good as an API, and more sites support this than have API's.
      Disadvantages: May not be possible at all (from a web page), depending on how the site does authentication, or handles cross-domain requests. Requires a little digging to suss-out the AJAX interaction.

    3. Intercept the page, with your own server, and repost it. This allows you to alter the source to point to a different CSS file. See this answer for more.

      Advantages: Can change CSS, minimal coding.
      Disadvantages: Often will not work, due to cross-domain issues.

    4. Offer your users a userscript, Stylish script, or extension (add-on), to correct the styling.

      Advantages: Almost always works. Easy to code. User's are aware of the style changes and implicitly agree to/with them. The user is in control and trusts you more. Disadvantages: Users must install and run your script and the extension (if any) it is scripted for.

    In short, it's quite possible that your current userscript approach is the only way. But, more enlightened sites may support one of the 1st three workarounds, above.

    Also note that colors, fonts, etc. may be part of the site's brand identification. It may be a poor idea to change its appearance, as your users may come to associate a particular appearance with that site and trust it more.

    If you "mess with the brand", your users may be leery of your site, and/or the chat. They might wisely start to wonder what else you have changed. There is also a (small) possibility that changing the chat's look violates the Terms of Service.