How do I save a modified style on Chrome?

Question

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?

Answer 1

I always appreciate learning, the code you are changing from the console is your copy which is generated by Facebook servers. Every time you type a URL facebook.com generated a copy of HTML code for you and sends that to your browser from where you are able to edit that. But that edit is not permanent because it is only edited on your browser and not on the Facebook servers.

There are a few possible scenarios that can be used. The one most popular is to create a browser extension and every time you will receive your copy from Facebook the extension will first change the code and then it will show it on your browser. But there is one possibility facebook generated its selector, like classes and ids dynamically.

I hope it helps;)

Answer 2

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>