Chrome Extension to change text style of specific website

Question

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?

Answer 1

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