Search code examples
cssgoogle-chromecustomizationstylesheetgoogle-chrome-devtools

Saving Custom Stylesheets for Any Website


I know how to live-edit and save stylesheets for my own sites that I am developing locally. But wouldn't it be nice to be able to save your own custom styles for any website on the web?

For example, I use a very cool, free chat system called tawk.to but I don't like where some of the buttons have been placed in the interface. Using Chrome Dev Tools I have moved the buttons to where I want them to be, but if I ever need to refresh the page, or need to restart Chrome, I will loose my "personal layout settings".

Would like to hear your thoughts on this concept, and also if you can think of any solutions. Possibly, a script in Chrome that runs at specific urls, loading the personal stylesheet for that url.

Thank you.


Solution

  • As Cozzmy pointed out, there is Tampermonkey. I installed it and created a simple script which hides the logo and moves the chat toggle button to the upper left ( jQuery was available in the page so I used it )

    // ==UserScript==
    // @name         My Fancy New Userscript
    // @namespace    http://your.homepage/
    // @version      0.1
    // @description  enter something useful
    // @author       You
    // @match        https://dashboard.tawk.to/?lang=en
    // @grant        none
    // ==/UserScript==
    $("#logo-group").css('display','none');
    $("body").find("[data-action=toggleMenu]").css('position','absolute').css('left',0);
    

    That was easy! Thanks!