Eenvoudig HTML/CSS veranderen in Chrome

[HenkEisDS]

Mijn vraag
Ik gebruik een bepaalde website bijna 8 uur per dag voor werk. In deze website zitten een paar hele domme UX fouten. Ik zoek een Chrome plugin waarin ik eenvoudig de HTML/CSS kan tweaken.

Relevante software en hardware die ik gebruik
Chrome/Win11

Wat ik al gevonden of geprobeerd heb
Er bestaat een plugin die precies doet wat ik wil, maar ik vind het vrij complex omdat ik geen javascript expert ben. De plugin heet Temper Monkey.
https://chrome.google.com...bldmpobfkfo/related?hl=en

Over de HTML:

In de HTML staat een verwijzing naar een CSS bestand.

code:

/l/%7B%22mode%22%3A%22PROD%22%2C%22app%22%3A%22builder_platform_interaction%3AfBLABLAVEELTEXT7D/[i][b]app.css[/b][/i]?2

Via Inspector zie ik dat dit stukje CSS verantwoordelijk is:

code:

.uiModal--medium .modal-container {
    width: 70%;
    max-width: 840px;
    min-width: 480px;
}

Dit zou ik willen vervangen heel lomp door:

code:

.uiModal--medium .modal-container{width:90%;max-width:1500px;min-width:1500px}

Maar ik snap niet zo goed hoe dit te doen in JS.

Dit is wat ik nu heb.

code:

(function() {
    'use strict';
    var html=document.getElementById('.uiModal').innerHTML;
    html = html.replace("{width:70%;max-width:840px;min-width:480px}","{width:90%;max-width:2000px;min-width:2000px}");
    document.getElementById('.uiModal').innerHTML=html;

     //.uiModal--medium .modal-container{width:70%;max-width:840px;min-width:480px}

})();

Kan iemand mij helpen met deze string replace functie in javascript? Hij moet alle html/css lezen en dat stukje string vervangen.

[frickY]

Is het niet veel makkelijker om gewoon eigen CSS in de DOM te injecteren?

code:

var styleSheet = document.createElement("style")
styleSheet.innerText = "body .uiModal--medium .modal-container{width:90%;max-width:1500px;min-width:1500px}"
document.head.appendChild(styleSheet)

Ik heb een `body` toegevoegd zodat hij de bestaande style overruled (hogere specificity).
Als je onderstaande als url gebruikt in een bookmark in je Bookmark Bar, kun je er op klikken om hem toe te passen;

code:

javascript:(function(){var styleSheet = document.createElement("style");styleSheet.innerText = "body .uiModal--medium .modal-container{width:90%;max-width:1500px;min-width:1500px}";document.head.appendChild(styleSheet);})()

[ Voor 6% gewijzigd door frickY op 02-11-2022 11:14 ]

[sig69]

Als het alleen om css gaat is stylebot misschien handiger.

[Oon]

Zoals @sig69 zegt, als het alleen om CSS gaat is een userscript zwaar overkill, die zijn gemaakt om echt code uit te voeren.

Ik zou je zelf Stylus aanraden, dat is voor zover ik weet de huidige meest up to date optie.

[HenkEisDS]

Hey het is gelukt! Thanks allemaal!


Voor:


Na:



De reden dat dit zo prettig gaat zijn voor mij is dat sommige variabelen, zeker variabelen die apex gedefinieerd zijn door een external service, soms erg lang zijn en het stukje met informatie helemaal rechts zit en daardoor nooit zichtbaar is. En aangezien het grijze scherm achter het witte scherm toch niet klikbaar is gaat dit mijn leven een stuk makkelijker maken.

Voor future reference, dit is het gehele script. Wat bij mij ook mis ging is dat ik niet een correcte URL bij @match had opgegeven. Ik dacht dat het weggecomment was, maar blijkbaar wordt dit toch geinterpreteerd.

Ik ben wel iets van @frickY zijn oplossing afgeweken door gewoon TamperMonkey te blijven gebruiken, maar het scriptje dat hij heeft gemaakt heb ik 1 op 1 overgenomen in TamperMonkey.

code:

// ==UserScript==
// @name         New Userscript
// @namespace    force.com/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        HIERDUSDEECHTEURLflowBuilder.app?flowId=3019N00BLABLA
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tweakers.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var styleSheet = document.createElement("style")
    styleSheet.innerText = "body .uiModal--medium .modal-container{width:90%;max-width:2000px;min-width:1500px}"
    document.head.appendChild(styleSheet)
  
 
})();