使用 Tampermonkey/greasemonkey 编辑扩展元素

Question

所以我有这个 Chrome 扩展，它没有自定义样式的功能，例如背景颜色和字体颜色。我想到了使用 TAMPERMONKEY 来编辑一些元素。

这是扩展源代码

<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>

具体来说，我想：

使用 class 名称更改 Header 颜色 App-Header
删除或隐藏名称为 class 的 Div Toastify

Answer 1

...

首先，您不能使用 tampermonkey 编辑网站以外的任何其他内容。

其次，您不能只使用 tampermonkey 制作一个脚本来编辑您想要的网站样式吗？

我认为您无法更改 class 现有 html 元素的名称。

document.querySelector(".Toastify").style.display = "none"

Answer 2

不幸的是，下面的评论是正确的。 Tampermonkey 无法编辑网站以外的扩展。我得到的最佳解决方案是编辑在 Chrome 的应用程序文件夹中找到的扩展。重新上传编辑后的文件需要 Chrome 扩展中的开发人员模式。

使用 Tampermonkey/greasemonkey 编辑扩展元素

Editing extension elements using Tampermonkey/greasemonkey

javascript

html

google-chrome-extension

tampermonkey