Like many others, I've embarked on creating a Chrome Extension to modify the CSS of a specific webpage.
Despite reading through various threads, my approach is a bit more complex than what has been discussed. The page I want to style features a select list with one or more options.
Here's a basic representation:
<select id="users"><option value="123">Username</option></select>The '123' represents a unique user ID for each individual.
My goal is to dynamically insert a CSS file based on this user ID. Ideally, the new CSS would be injected like so:
//mysite/myfolder/cssfiles/ #userID# .css
The challenge lies in customizing a page that isn't mine, making server-side modifications impossible. Nevertheless, I aim to create an Extension for my colleagues so they can feel a sense of uniqueness whenever they view the webpage.
The current manifest.json file includes the following content_script:
"content_scripts": [
{
"js": ["myscript.js"]
}
]
Here's the code within myscript.js:
var user = document.getElementById("users");
var id = user.options[user.selectedIndex].value;
var name = user.options[user.selectedIndex].text;
var showinfo = alert("Userid: " + id + "\nUsername: " + name);
Upon page load, the alert successfully displays the user data, but I'm still exploring how to leverage this information to inject my desired CSS.
I've also tested adding "css": ["mystyle.css"] alongside "js": for testing purposes, but this applies a fixed style and doesn't cater to the selected user. Nonetheless, it achieves the desired look as specified in the CSS.