So I have this Chrome Extension and it has no features for customized the style such as the background color and font color. I thought of using TAMPERMONKEY to edit some elements.
Here's the extension source code
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div id="App" class="App">
<header class="App-header" style="background-color: rgb(84, 160, 252);">
<div class="App-Header-Wrapper">
<h1 class="">Quizzard</h1>
<input class="search-bar" placeholder="What is the capital of canada?" name="input" style="background-color: rgb(46, 134, 222);" />
<button id="btnTheme" class="btn"><img id="btnTheme" src="img/pallete.svg" alt="Change Theme" /></button>
</div>
</header>
<div class="Root">
<div class="Results-Container">
<div class="Results-Settings-Container">
<p class="Results-Label">Results: 0</p>
<span class="Span-Stretch"></span>
<div class="Button-Container">
<div class="Button-Wrapper">
<p class="Button-Label">Settings</p>
<button class="Button" style="width: 26px;"><img class="Button-Image" src="./img/settings.svg" alt="clear" /></button>
</div>
<div class="Button-Wrapper">
<p class="Button-Label">Clear</p>
<button class="Button" style="width: 25px;"><img class="Button-Image" src="./img/trash.svg" alt="clear" /></button>
</div>
</div>
</div>
<div class="Result-Container"></div>
</div>
</div>
<div class="popup-container Fade-In" style="display: none;">
<style>
.input-slider-results::after {
content: "11";
color: #576574;
text-align: right;
position: absolute;
right: 100px;
top: 63px;
opacity: 0.4;
}
.input-slider-confidence::after {
content: "60%";
color: #576574;
text-align: right;
position: absolute;
right: 100px;
top: 130px;
opacity: 0.4;
}
.User-Tag::after {
content: "#00001";
display: inline-flex;
color: #bec9d4;
font-size: 0.7rem;
font-weight: 700;
position: absolute;
top: 32px;
left: 70px;
}
</style>
<div id="Settings" class="Settings-Container User-Tag">
<button class="Settings-Close-Button"><img src="img/close.svg" alt="Close" /></button>
<div class="slider-container">
<h1>Max Results</h1>
<input class="input-slider-results" type="range" min="0" max="100" value="11" />
</div>
<div class="slider-container">
<h1>Confidence Threshold</h1>
<input class="input-slider-confidence" type="range" min="0" max="100" value="60" />
</div>
<div class="toggle-container">
<div class="item">
<p>Automatically Sort</p>
<span></span>
<label class="switch">
<input type="checkbox" value="true" checked="" />
<div class="Slider"></div>
</label>
</div>
<div class="item">
<p>Automatically Clear</p>
<span></span>
<label class="switch">
<input type="checkbox" value="false" />
<div class="Slider"></div>
</label>
</div>
<div class="item">
<p>Right Click To Search</p>
<span></span>
<label class="switch">
<input type="checkbox" value="true" checked="" />
<div class="Slider"></div>
</label>
</div>
</div>
<div class="Settings"></div>
</div>
</div>
<div class="popup-container Fade-In" style="display: none;">
<button class="Pallete-Close-Button"><img src="img/close.svg" alt="Close" /></button>
<div id="Themes" class="Theme-Container">
<h1>Select a theme</h1>
<div class="Themes">
<button class="Theme" style="background-color: rgb(253, 107, 107); border: 4px solid rgb(238, 82, 83); opacity: 1;"></button>
<button class="Theme" style="background-color: rgb(254, 159, 67); border: 4px solid rgb(255, 139, 28); opacity: 1;"></button>
<button class="Theme" style="background-color: rgb(33, 209, 161); border: 4px solid rgb(25, 172, 132); opacity: 1;"></button>
<button disabled="" class="Theme" style="background-color: rgb(84, 160, 252); border: 4px solid rgb(46, 134, 222); opacity: 0.1;"><img src="./img/check.svg" style="width: 65%;" /></button>
<button class="Theme" style="background-color: rgb(254, 159, 243); border: 4px solid rgb(243, 104, 223); opacity: 1;"></button>
<button class="Theme" style="background-color: rgb(87, 101, 116); border: 4px solid rgb(34, 46, 62); opacity: 1;"></button>
<button class="Theme" style="background-color: rgb(95, 39, 205); border: 4px solid rgb(46, 29, 140); opacity: 1;"></button>
<button class="Theme" style="background-color: white; border: 4px solid rgb(254, 202, 87); opacity: 1;">
<img src="./img/donate.svg" style="width: 50%;" />
<p style="font-size: 0.5rem; margin-top: 7px; font-weight: 100;">Donate</p>
</button>
</div>
</div>
</div>
<div class="Popup-Container Fade-In" style="display: none;">
<div class="Tos-Wrapper-Container">
<div class="Tos-Container">
<h1>Terms and Conditions</h1>
<div class="Tos-Info-Container">
</div>
<button class="Tos-Button">I Agree</button>
</div>
</div>
</div>
</div>
<div class="Toastify"></div>
</div>
<script src="/static/js/runtime-main.7bb94884.js"></script>
<script src="/static/js/2.d9fcf836.chunk.js"></script>
<script src="/static/js/main.4ee79255.chunk.js"></script>
To be specific, I want to:
Unfortunately, comments below are correct. Tampermonkey cant edit extensions besides websites. The best solution I got is to edit the Extension found in Chrome's app folder. Reuploading the edited file would require developer mode in Chrome Extension.