How do I save a modified style on Chrome?

Issue

So, totally noob question here, but I hope you can help. I work on a tool called SRT, it is from Facebook and it is used for rating content. The page shows me 9 images I need to judge, but they are displayed on 3 rows and 3 columns, but it would work better if it was 5 rows and 2 columns, because the images would be bigger. I asked Facebook to make this change, but who knows when will they actually do something. So I modified the look of the page on the browser console. It was like this:

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

And I changed to this:

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

But, every time I go to the next page, it comes back to the previous look, because it is not a permanent change. Is there a way to save this style so, for this page, I will always have this appearance?

Solution

You have a couple of options to do this.

Without an extension

Since Chrome 65 there is an "overrides" tab in devtools > sources where you can modify individual resources. Check this answer for a guide how to do that: Override Javascript file in chrome. The caveat there is you need to keep devtools open.

With an extension

I've had great results using this extension in the past: Resource Override. I believe it has recently been put into maintenance mode, but it works flawlessly. You can inject new styles, scripts, etc or override existing ones.

Selecting the div

Whichever approach you take the tricky part is going to be picking out that div. It looks like it just has a bunch of inline styles applied and no specific class. Any selector you write is likely to be quite brittle as it will rely on a specific dom structure.

But seeing as this is just a local override for your machine, let's not worry too much. You could make use of the Attribute Selector to target a div with a specific inline style. You probably want to make it a bit more specific in case there any other divs with a similar grid-template-columns value. It's a bit hacky but this should get you started:

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>

Answered By - Omid