Chrome扩展程序可更改特定网站的文字样式 [英] Chrome Extension to change text style of specific website

问题描述

所以，我试图为这个网站www.twitch.tv做一个扩展，它有一个聊天，我试图改变我的名字的颜色。

请参阅下面的图片。从（左）到（右）：

我有我的清单带有content_script的.json文件。

因此，我想在特定网站上将我的名字nickeaules更改为另一种颜色，并且我不知道如何开始我从来没有做过Chrome扩展。

这是可能的一些简单的代码？或者它是复杂的代码？

解决方案

您可以使用内容脚本。在你的特殊情况下，这很简单。内容脚本（实际上只能使用CSS文件）是在指定网页中运行的文件。你的内容脚本究竟应该做什么取决于聊天网页的结构。您可以使用CSS文件来插入任何您想要的样式，只需要识别显示页面的元素并将其 color 更改为 red 。我创建了一个简单的扩展，它使得stackoverflow（ https://stackoverflow.com/ ）的起始页面上的Top Questions标签为红色。我通过它的id（ h-top-questions ）来识别文本。你可以分析你的聊天页面代码，在那里找到你的名字标签，并做同样的事情。这可能是您的模板：

manifest.json：

  {
name：Top Questions redder，
description：让世界变红，
版本：1.0，
content_scripts ：[
 {
matches：[https://stackoverflow.com/]，
css：[sheet.css] 
} 
 $，
manifest_version：2 
} 
  

sheet.css ：

 ＃h-top-questions {
 color：red; 
} 
  

So, I'm trying to make a chrome extension for this website www.twitch.tv, it has a chat and I'm trying to change the color of my name in it.

See images below. From (left), to (right):

I have my manifest.json file with a content_script.

So I want to change my name "nickeaules" on that specific site to another color, and I have no idea to begin with this as I have never made a Chrome extension before.

Is this possible with some simple code? Or is it way to complex to code?

解决方案

You can use content scripts. In your particular, case it's pretty straightforward. Content script (you can use only a CSS file actually) is a file that runs in the specified webpage. What exactly you should do in your content script really depends on the structure of that chat webpage. You can use CSS file to inject any style you want, it's only left to recognize the element that shows your page and change its color to red. I created a simple extension that make "Top Questions" label on the starting page of stackoverflow (https://stackoverflow.com/) red. I identify that text by its id (h-top-questions). You can analyze your chat page code, find your name label there and do the same. That could be a template for you:

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;
}

这篇关于Chrome扩展程序可更改特定网站的文字样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！