12

我正在尝试调试下拉菜单。我还没有访问该网站的权限，因此我正在尝试通过 Google Chrome 开发人员工具找到一个解决方案，我可以对其进行测试，然后在我获得访问权限时应用到该站点。它只是 CSS 和一些 Javascript 更改。

问题是我想通过开发工具应用一些新的 CSS 样式规则，但是在刷新网页时这些规则仍然存在。有没有办法可以应用样式并让它们持久存在？我查看了资源部分，这表明我可以做这样的事情（也许通过添加本地样式表作为资源？），但我就是不知道该怎么做。

谁能在这里指出我正确的方向？

非常感谢各位...

4

6 回答 6

10

您可以安装Tampermonkey 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);
    });
})();
于 2012-10-02T22:41:46.057 回答
5

我最喜欢的 CSS 覆盖工具是 Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

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

于 2013-04-26T13:53:28.107 回答
3

由于 Chrome 版本 65，这可以在没有插件的情况下完成。在开发人员工具中，转到Sources -> Overrides选项卡并选择任何本地文件夹，chrome 应该将您的持久更改保存到其中。对于 DOM 树中的更改，请使用Sources而不是Elements选项卡。

有关本地覆盖的列表，请转到⠇ -> More tools -> Changes。

更多信息在这里。

于 2020-04-11T20:31:06.267 回答
2

感谢您的建议。我尝试了这两种方法，但遇到了一些小问题（对我个人来说不是特别容易或直观）。相反，我偶然发现了Tincr，我发现它更合适。谢谢各位。

于 2012-10-04T08:48:52.433 回答
1

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

于 2012-10-02T14:58:13.367 回答
0

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

于 2013-04-05T00:04:46.697 回答