CODEWITHSUNDEEP
javascripthtmlcssautomation
Vawlpe
Vawlpe

Reputation: 97

How to edit a website's HTML and then have it be there when you reload but only for you?

So say I use a website very often but I don't like a certain aspect of the design, I obviously don't own the website but I don't like to have to go in every time I load a page and edit the HTML, I'd like to be able to save some HTML and every time I open this website it should replace the code automatically, or it could run some Javascript or something, or even change some of the CSS, is this possible and if so, how?

Upvotes: 3

Views: 10806

Answers (4)

jlgarcia
jlgarcia

Reputation: 26

I think there is already a plug in that does exactly that. I don't use it, I just remembered from years ago and find it in the Chrome Extensions store. Give it a try:

Monkey Wrench

Upvotes: 0

blessing
blessing

Reputation: 461

You could use the browser extension Stylus, which allows you to add custom css on a per-website or on a global basis and it will load that css every time you visit any page on the specified site(s) until you turn it off.

For Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

For Firefox: https://addons.mozilla.org/en-GB/firefox/addon/styl-us/

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370729

The easiest way to do something like this would be to install a userscript manager like Tampermonkey. Then you can create a userscript for the site that changes the HTML to how you want it to be, and (if you've written the code properly) it'll automatically run every time you load the site.

For example, due to a bug in Stack Exchange's CSS/Javascript, quickly double-clicking on a snippet when it's loading results in errors, so I currently have the following userscript to fix it:

// ==UserScript==
// @name             Stack Snippet Modal Fixer
// @description      Prevents snippet double-clicking from breaking the snippet interface
// @author           CertainPerformance
// @version          1.0.0
// @include          /^https://(?:(?:(?:codereview|gamedev|codegolf|meta)\.)(?:[^/]+\.)?stackexchange\.com|(?:[^/]+\.)?stackoverflow\.com)/(?:questions/(?:\d|ask/)|posts/\d+/edit|review/(?:reopen|helper|low-quality-posts|suggested-edits)(?:/\d+|$))/
// @grant            none
// ==/UserScript==

document.body.appendChild(document.createElement('style')).textContent = `
.snippet-modal {
  pointer-events: auto !important;
}
`;

This uses Javascript to append a <style> tag to the document, but you can make whatever other changes you want to the document as well (like changing HTML of a page, or removing style rules of an existing inline <style>, etc).

The only limits to a userscript are the limitations of Javascript on a page, but most things one would want to tweak can probably be achieved with Javascript.

Personally, I would have a hard time browsing many of the sites I frequent without the ability to write userscripts to customize sub-optimal interfaces.

Upvotes: 2

Rovert Renchirk
Rovert Renchirk

Reputation: 97

If you are interested in doing a little work, you can write a Google Chrome extension to do what you're asking. Take a look at https://developer.chrome.com/extensions/getstarted to get started.

Upvotes: 0

Related Questions