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

Question

和其他许多人一样，我已经开始做一个 Chrome 扩展程序，它应该会更改特定页面的 CSS。
我已经阅读了其他线程，但我想做的比其他线程要复杂一些。在我想更改样式的网页上，有一个选择列表，其中包含一个或多个选项。
基本上这看起来像下面这样:
<select id="users"><option value="123">Username</option></select>
'123'是用户的ID，对每个人都是唯一的。

所以我想做的是根据用户 ID 插入 CSS 文件。所以我想像这样插入新的 CSS:
//mysite/myfolder/cssfiles/#userID#.css

我的问题是我要定制的页面不是我的，所以我不能在服务器端做这个，但是我想做一个扩展让我的同事感觉一下他们每次查看网页时都是独一无二的。

在 manifest.json 文件中，现在运行以下 content_script:

"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。

为了测试目的，我还在 "js": 部分旁边放了 "css": ["mystyle.css"] 但这是一种预定义样式，不依赖于所选用户，然而，它使页面看起来像我想要的那样，并且已经用 CSS 编写了它。

Answer 1

最简单的方法是这样的:

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

请注意，这需要 list 中的选项卡权限。