如何使用Tampermonkey修改Chrome扩展Quizzard的页面元素样式

你可以直接使用下面的Tampermonkey脚本实现你的需求，使用前请把脚本中<Quizzard扩展ID>替换为该扩展在你浏览器中的实际ID，你可以在Chrome的扩展管理页面开启开发者模式后查看。

// ==UserScript==
// @name         Quizzard自定义样式修改
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改Quizzard头部颜色、隐藏Toastify提示栏
// @match        chrome-extension://<Quizzard扩展ID>/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 等待页面元素加载完成后执行修改
    window.addEventListener('load', () => {
        // 1. 修改头部区域背景色，你可以自行替换为想要的颜色值
        const header = document.querySelector('.App-header');
        if (header) {
            header.style.backgroundColor = '#2c3e50'; // 这里的颜色可以自定义
            // 如果需要同时修改搜索框的匹配颜色，可以加下面这行
            document.querySelector('.search-bar').style.backgroundColor = '#34495e';
        }
        // 2. 隐藏Toastify元素
        const toastify = document.querySelector('.Toastify');
        if (toastify) {
            toastify.style.display = 'none';
            // 如果想要彻底移除该元素，把上面一行替换为：toastify.remove()
        }
    });
})();

自定义调整说明 #

• 你可以任意修改代码里的颜色值，支持十六进制、rgb、rgba等所有CSS支持的颜色格式，替换#2c3e50即可
• 如果不需要修改搜索框的匹配颜色，直接删除对应的代码行即可

内容的提问来源于stack exchange，提问作者Foreseen winx club Gator winx