在两张css表之间切换 - Google Chrome扩展程序

Question

问题在于：我正在构建Google Chrome扩展程序，我希望用户在2个内容脚本设计（2个css文件）之间进行选择。到目前为止，我找到了两个解决方案：

1）使用https://developer.chrome.com/extensions/tabs.html#method-insertCSS

chrome.tabs.insertCSS(integer tabId, InjectDetails details, function callback) 

2）仅使用javascript更改css样式。

我想知道哪一个是最好的做法。虽然在javascript中修改所有内容似乎有点疯狂：p。当然，如果你有一个更好的3D和更好的解决方案。

Answer 1

你能用这个做点什么：

<link class='mystyle' href="style1.css" rel="stylesheet" type="text/css">

为链接标记赋予类名，可以使用jQuery更改href属性。

$(".mystyle").prop("href", "style2.css");

我对单个div元素进行了快速测试，看起来效果很好。

将其写入声明：

if ( choosestyle1 == true) {
       $(".mystyle").prop("href", "style1.css");
} else {
       $(".mystyle").prop("href", "style2.css");
}

预加载样式表：

var stylesheets = Array("style1.css", "style2.css");
stylesheets.forEach(function(arg){
    $("<div />").load(arg);
});

Answer 2

Paul我对开发Chrome扩展程序知之甚少，但HTML的基本想法是告诉浏览器当前的CSS。

您必须通过javascript设置coockie告诉页面使用CSS，并且每当您切换到另一个CSS时，都要修改Cookie。

请参阅此链接，此处为demo download