如何在 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>