How to persist CSS changes with Chrome Developer Tools
Since Version 65 of Chrome this can be done without plugins. In the developer tools go to the Sources -> Overrides tab and select any local folder, where chrome should save your persistent changes to. For changes in the DOM tree, use the Sources and not the Elements tab.
For a list of local overrides go to ⠇ -> More tools -> Changes.
More info here.
Thanks for the suggestions. I tried both but had minor issues with them (just not particularly easy or intuitive for me personally). Instead I sumbled upon Tincr, which I found to be a better fit. Thanks folks.
You can install the Tampermonkey chrome extension, which is greasemonkey for chrome, and you can load userscripts that can alter css and use jquery to modify the page, and this changes are permanent as the script will be loaded and execute it automatically anytime you go to the site you set in the @match
rule, see the following userscript which just changes the background color of the page:
// ==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);
});
})();
My favorite tools for CSS overriding is Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
It's useful for debugging and enhancing any web page. There is also a large library of existing styles, with a convenient link to them from the extension menu. Like these, for StackOverflow.com