Chrome Extension To Change Text Style Of Specific Website

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 (righ

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