如何在 Chrome 上保存修改后的样式？

Question

所以，这里完全是菜鸟问题，但我希望你能帮忙。 我在一个名为 SRT 的工具上工作，它来自 Facebook，用于对内容进行评级。 页面显示了我需要判断的9张图片，但是显示的是3行3列，但是如果是5行2列效果会更好，因为图片会更大。 我要求 Facebook 进行此更改，但谁知道他们什么时候会真正做一些事情。 所以我修改了浏览器控制台上页面的外观。 是这样的：

<div style="display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(3, 500px); gap: 60px; height: 100%; margin: 0px;"><div

我改为：

<div style="display: grid; grid-template-columns: repeat(2, 500px); grid-template-rows: repeat(5, 500px); gap: 60px; height: 100%; margin: 0px;"><div

但是，每次我 go 到下一页，它又回到以前的样子，因为它不是永久性的改变。 有没有办法保存这个样式，所以对于这个页面，我将永远有这个外观？

Answer 1

我一直很欣赏学习，您从控制台更改的代码是由 Facebook 服务器生成的副本。 每次您键入 URL facebook.com 时，都会为您生成一份 HTML 代码的副本，并将其发送到您的浏览器，您可以在其中进行编辑。 但该编辑不是永久性的，因为它仅在您的浏览器上编辑，而不是在 Facebook 服务器上编辑。

有几个可能的场景可以使用。 最流行的一种是创建一个浏览器扩展程序，每次您从 Facebook 收到您的副本时，该扩展程序将首先更改代码，然后将其显示在您的浏览器上。 但是有一种可能性 facebook 生成了它的选择器，比如动态的类和 ID。

我希望它有所帮助；）

Answer 2

你有几个选择来做到这一点。

没有扩展名

从 Chrome 65 开始， devtools > sources中有一个“overrides”选项卡，您可以在其中修改单个资源。 查看此答案以获取如何操作的指南： Override Javascript file in chrome 。 需要注意的是你需要保持 devtools 打开。

带扩展名

我过去使用这个扩展取得了很好的效果： Resource Override 。 我相信它最近已进入维护模式，但它运行完美。 您可以注入新的 styles、脚本等或覆盖现有脚本。

选择 div

无论采用哪种方法，棘手的部分都是挑选出该 div。 看起来它只是应用了一堆内联 styles 而没有具体的 class。您编写的任何选择器都可能非常脆弱，因为它将依赖于特定的 dom 结构。

但是鉴于这只是您机器的本地覆盖，我们不必太担心。 您可以使用属性选择器来定位具有特定内联样式的 div。 你可能想让它更具体一点，以防有任何其他 div 具有类似的grid-template-columns值。 这有点 hacky 但这应该让你开始：

 div[style*='grid-template-columns: repeat(3, 500px)'] { grid-template-columns: repeat(2, 500px);important; }

 <div style="display: grid; grid-template-columns: repeat(3, 500px); grid-template-rows: repeat(3, 500px); gap: 60px; height: 100%; margin: 0px;"> <div>column 1</div> <div>column 2</div> <div>column 3</div> <div>column 4</div> <div>column 5</div> </div>