Best way to persistently modify pages

  • Ok so I'm looking for a good way to persistently keep inspect elemented changes across pages. The reason is because my university recently redid their SSO page and personally I'm not a fan and would like to change the HTML behind it to remove a lot of the bulk. Basically, removing some divs, changing some text, maybe replacing an image or two.

    Here's the problem: The extensions that are "persistent inspect element" only save it for the specific URL you're on. So if I the URL itself changes (which it does depending on the application you login to), then you lose all of your changes.

    The answer to this was initially Tampermonkey. Tampermonkey lets you do a wildcard which is exactly what I needed.


    The problem with Tampermonkey is that it's all modifying divs using Javascript. This wouldn't be a problem except that almost none of the div's have ids. This means it's impossible for me to write code to select the correct div to modify. And in some cases, there is a div within a div that has the same ID. Removing the first one completely breaks the page, but removing the second one works fine. I'm able to test this in inspect element, but writing code to do this is proving to be near impossible, especially since the majority of the divs don't have ids. I can't even seem to properly change one class to another (e.g. changing the size from 5 to 3 to make it smaller) without the div id.

    I'm pretty stuck and am wondering if anyone has any recommendations. I'm using Chrome