Javascript 如何使用Chrome开发者工具持久化CSS更改

我正在调试一个下拉菜单。我还没有访问该网站的权限，所以我正试图通过Google Chrome开发者工具找到一个解决方案，我可以测试这些工具，然后在访问该网站时将其应用于该网站。这只是CSS，也许还有一些Javascript更改

问题是，我想通过开发工具应用一些新的CSS样式规则，但在刷新网页时，这些规则会保持不变。有没有一种方法可以应用样式并使它们保持不变？我看了参考资料部分，哪种建议我可以做类似的事情（可能通过添加本地样式表作为参考资料？），但我就是不知道怎么做

有人能给我指一下正确的方向吗

非常感谢各位…

尝试这个扩展，它允许您快速创建和保存站点的持久自定义CSS。

您可以安装chrome扩展，它是chrome的greasemonkey，您可以加载可以更改CSS的用户脚本，并使用jquery修改页面，而且此更改是永久性的，因为只要您转到在

@match

规则中设置的站点，脚本就会被加载并自动执行，请参阅以下仅更改页面背景颜色的用户脚本：

// ==UserScript==
// @name       yourscript
// @namespace  http://yeeeee/
// @version    0.1
// @description  Change bacground color of page
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @match      http://yourtargetsite.com/*
// @copyright  2012+, Me and Brothers
// ==/UserScript==

(function () {
    $(document).ready(function(){
        style = '<style type="text/css"> body {background-color: #CC7777 ! important;} </style>';
        $('head').append(style);
    });
})();

/==UserScript==
//@name yourscript
//@名称空间http://yeeeee/
//@version 0.1
//@description更改页面的底色
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
//@匹配http://yourtargetsite.com/*
//@copyright 2012+，我和兄弟
//==/UserScript==
（功能（）{
$（文档）.ready（函数（）{
风格='正文{背景色：#CC7777！重要；}'；
$（'head'）。追加（样式）；
});
})();

谢谢你的建议。我尝试了这两种方法，但都有一些小问题（只是对我个人来说不是特别容易或直观）。相反，我尽情享受，我发现这更合适。谢谢各位。

还有一个分机名为。它允许您将Chrome开发工具的更改直接保存到GitHub

我最喜欢的CSS覆盖工具是时尚的

---

它对于调试和增强任何网页都很有用。还有一个现有样式的大型库，通过扩展菜单可以方便地链接到这些样式。像这样，对于

自Chrome版本65以来，这可以在没有插件的情况下完成。在开发者工具中，转到源->覆盖选项卡并选择任何本地文件夹，chrome应将持久更改保存到该文件夹。对于DOM树中的更改，请使用源而不是元素选项卡

有关本地覆盖的列表，请转到⠇ -> 更多工具->更改

---

更多信息。

他们的网站已经关闭，但扩展版仍然很受欢迎。您可以在上找到源代码和Chrome扩展链接