用于更改特定网站文本样式的 Chrome 扩展程序答案

【问题标题】：Chrome Extension to change text style of specific website用于更改特定网站文本样式的 Chrome 扩展程序
【发布时间】：2014-01-02 05:25:29
【问题描述】：

所以，我正在尝试为这个网站 www.twitch.tv 制作一个 chrome 扩展，它有一个聊天，我正在尝试更改其中我名字的颜色。

见下图。从（左）到（右）：

我有一个带有 content_script 的 manifest.json 文件。

所以我想把我在那个特定网站上的名字“nickeaules”改成另一种颜色，我不知道从这个开始，因为我以前从未做过 Chrome 扩展。

这可以通过一些简单的代码实现吗？还是代码太复杂了？

【问题讨论】：

您不需要完整的扩展 - 您可以使用用户脚本。无论哪种方式 - 它都相当简单。您需要查看查询 dom 并更改它的 DOM api 和函数。
您所需要的只是一个将 content script 注入指定域的扩展程序。内容脚本将简单地找到与您的用户名对应的元素并更改其样式，将color 属性设置为您想要的任何内容。

标签： javascript google-chrome google-chrome-extension content-script

【解决方案1】：

您可以使用内容脚本。在您的特殊情况下，它非常简单。内容脚本（实际上只能使用 CSS 文件）是在指定网页中运行的文件。您应该在内容脚本中具体做什么实际上取决于该聊天网页的结构。您可以使用 CSS 文件注入您想要的任何样式，只剩下识别显示您页面的元素并将其 color 更改为 red。我创建了一个简单的扩展，使 stackoverflow (https://stackoverflow.com/) 起始页上的“热门问题”标签变为红色。我通过其 id (h-top-questions) 识别该文本。您可以分析您的聊天页面代码，在那里找到您的姓名标签并执行相同操作。这可能是你的模板：

manifest.json：

{
  "name": "Top Questions redder",
  "description": "Make the world red",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://stackoverflow.com/"],
      "css": ["sheet.css"]
    }
  ],
  "manifest_version": 2
}

sheet.css：

#h-top-questions {
  color: red;
}

【讨论】：