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

请注意，这需要清单中的标签权限。

使用JavaScript的Chrome扩展程序，用于更改CSS

1 个答案: