Chrome扩展程序可更改特定网站的文字样式

Question

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

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

我的manifest.json文件包含content_script。

所以我想将我在该特定网站上的名称“nickeaules”更改为另一种颜色，我不知道从此开始，因为我之前从未制作过Chrome扩展程序。

这可以用一些简单的代码吗？或者是复杂的代码方式？

Answer 1

您可以使用内容脚本。在你的特殊情况下，它非常简单。内容脚本（实际上只能使用CSS文件）是在指定网页中运行的文件。您在内容脚本中应该做什么，实际上取决于该聊天网页的结构。您可以使用CSS文件注入任何您想要的样式，只留下显示您的页面的元素并将其color更改为red。我创建了一个简单的扩展，在stackoverflow（https://stackoverflow.com/）的起始页面上生成“Top Questions”标签。我通过其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;
}