带有JavaScript的Chrome扩展，用于更改CSS

和其他许多人一样，我已经开始做一个Chrome扩展，它应该会改变特定页面的CSS。
我已经阅读了其他线程，但我想做的比其他线程要复杂一点。 在我想更改样式的网页上，有一个选择列表，有一个或多个选项。
基本上如下所示：

用户名

“123”是用户的ID，对每个人都是唯一的。

所以我想做的是，根据用户ID插入CSS文件。 因此，我想插入新的CSS，如：
//mysite/myfolder/cssfiles/#userID#.css

我的问题是，我想定制的页面不是我的，所以我不能在服务器端这样做，但我想做一个扩展，让我的同事在每次查看网页时都感到有点独特

在manifest.json文件中，现在运行以下content_脚本：

"content_scripts": [
{
"js": ["myscript.js"]
}
]

我的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);

当页面加载时，警报会正确显示数据，但我还不知道如何使用它们插入CSS

---

出于测试目的，我还将“css”：[“mystyle.css”]放在了“js”：部分的旁边，但这是一种预定义的样式，并不取决于所选的用户，但是它使页面看起来像我想要的样子，并已将其写入css中。

最简单的方法是：

var id = window.prompt("Enter your id","default");
var filepath = id + ".css";
chrome.tabs.insertCSS(tabId,{file:filepath});

---

请注意，这需要清单中的制表符权限。

是否有一个用户ID需要CSS？或者用户ID是基于使用扩展名的设置/人员的动态的？它是动态的，使事情变得更复杂。。然后

//mysite/myfolder/cssfiles/#userID#。css

将不起作用，因为您必须为每个用户创建css文件。但是如果我没有预创建的css文件，则应加载默认值。我不应该把事情弄得这么复杂，是不是。。？