javascript - 我有一个用户脚本来更改嵌入式聊天颜色。我该如何将脚本的功能合并到我的页面中呢？

Question

我有弹出式聊天，来自 twitch.tv ，嵌入到我的网页中，在 <iframe> 中.
我目前有这个用户脚本来改变一些颜色:

// ==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);

这可行，但我想将颜色更改合并到我的网站中，这样就不需要用户脚本了。我该怎么做？

顺便说一句:

1. 我尝试通过 <script src="blabla.js"></script> 启用它.它没有用。
2. $(document).ready(function () {});也没有用。

Answer 1

You cannot alter the CSS for a cross-domain iframe using the page's javascript.这是为了帮助防止 Cross-site scripting (XSS)攻击。

以下是可能的解决方法，从好到坏:

1. 使用 API，如果目标(聊天)站点有 API。您的页面不会加载 iframe，并且可以完全控制聊天的显示方式。您的页面使用 API 来获取和发布聊天消息(可选)。

   优点:完全控制显示的内容和发布的内容。
   缺点:许多网站没有 API，或者 API 不提供所需的功能。

2. 复制站点的 AJAX 调用。有时，找出您想要的特定功能的 gets 和 posts 并不难。而且，有时目标站点甚至通过其身份验证方法和跨源资源共享 (CORS) 策略支持这种方法。

   优点:可以像 API 一样好，而且支持它的站点多于 API。
   缺点:可能根本不可能(从网页)，这取决于站点如何进行身份验证或处理跨域请求。需要深入挖掘才能确定 AJAX 交互。

3. 用您自己的服务器拦截页面，然后重新发布。这允许您更改源以指向不同的 CSS 文件。参见 this answer了解更多。

   优点:可以更改 CSS，代码最少。
   缺点:由于跨域问题，通常无法正常工作。

4. 为您的用户提供用户脚本、Stylish 脚本或扩展(附加组件)，以更正样式。

   优点:几乎总是有效。易于编码。用户知道样式更改并暗中同意/同意它们。用户在掌控之中，更加信任你。缺点:用户必须安装并运行您的脚本及其编写脚本的扩展(如果有)。

---

简而言之，您当前的用户脚本方法很可能是唯一的方法。但是，更开明的网站可能支持上面的前三种解决方法之一。

---

另请注意，颜色、字体等可能是网站品牌标识的一部分。 更改其外观可能不是一个好主意，因为您的用户可能会将特定外观与该网站相关联并更加信任它。

如果您“扰乱了品牌”，您的用户可能会对您的网站和/或聊天持怀疑态度。他们可能会明智地开始想知道您还改变了什么其他。还有一种(小)可能性是更改聊天的外观违反了服务条款。