如何编辑网站的背景颜色答案

【问题标题】：How to edit a website's background colors如何编辑网站的背景颜色
【发布时间】：2019-11-10 18:08:15
【问题描述】：

我的编码经验为零，但我使用的网站的某些“框”颜色太亮了。

我想创建一个插件，以便我和其他用户能够使用“黑暗主题”

我遵循了一些指南，但我无法让它工作......

我特别想将“leftcolumn”背景颜色从“ffffff”更改为“806546”

它目前正在使用 CSS 参考文件来更改颜色，但我已通过使用 chrome 的编辑器添加该元素成功地编辑了颜色。

如何更改 CSS 文件的元素以更改背景颜色？

<div class="leftcolumn" style="background-color: #806546;"></div>

【问题讨论】：

另外，一个离题的事情，但暗模式不仅仅是改变背景和文本。这是更多。它也适用于图像，也适用于文本和视频。

标签： html css google-chrome-extension greasemonkey tampermonkey

【解决方案1】：

听起来您刚刚找到了一个教科书示例，说明为什么发明了 TamperMonkey（最近的）和 GreaseMonkey（过时的）扩展。

Building an extension 相当复杂：您需要创建一个清单，内容脚本和背景页面有单独的文件 - 周围有点复杂。这是一个不断变化的变化挂毯。

但一切都没有丢失 - TamperMonkey 来救援。

为您选择的浏览器安装the TamperMonkey extension
在目标网站上，点击 TamperMonkey 图标
单击“添加新脚本”或（如果未显示）单击“仪表板”，然后在打开时单击 [+] 选项卡。将打开一个新的空白脚本模板。修改如下：

// ==UserScript==
// @name         Name That Will Show In The List of Scripts (in TM Dashboard)
// @namespace    http://tampermonkey.net/
// @match        *://name_of_desired_domain.com/*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    //your code goes here. For example:
    let mycss = '<style>.leftcolumn{background-color:#806546}</style>';
    $(body).append(mycss);
});

注意事项：

@name 行是您的脚本名称。它可以是任何东西——任何东西。当有一天您为多个网站编写了多个 TamperMonkey 脚本（我目前有 200 多个）时，这就是 TamperMonkey 仪表板中显示的名称，就像 Excel 电子表格的“文件名”。
@match 行最初将填充您所在页面的确切网址。通常，这不是您想要的。例如，假设您在网站http://example.com/blog/name-of-a-particular-blog-post 上 - 通常，您会希望在每个博客文章上运行相同的脚本，而不仅仅是这一篇。只需将过于具体的部分替换为 *，如下所示：http://example.com/blog/*，它现在将在 URL 以这些字符开头的任何页面上运行。
@require 行允许您在脚本中使用 jQuery。如果您不需要 jQuery，则不需要此行。把它放在一边。
当 TamperMonkey 脚本在网页上处于活动状态时，TamperMonkey 扩展程序图标会显示一个红色块

TamperMonkey 能为我做什么？

你可以用 TamperMonkey 做哪些事情？您可以完全重新格式化页面！有些页面我将所有 <p> 标签（及其内容）保存到一个变量中，然后执行以下操作：$('body').html(myvar); - 页面上的任何 曾经是 现在都被替换为这几段内容。再见，混乱！您可以注入新的<style> 标签块（您应该会看到我的 YouTube 的样子...）。您可以填写字段并单击按钮，删除包含具有特定字符模式的 className 的 Div（例如 -ad 或 Taboola）。您可以编写自己的 HTML 代码（一串文本，存储在一个变量中），然后您可以将其注入到页面中，如上所示 - 很快！您编写的 HTML 出现在页面上。 基本上：您可以在 DevTools 中执行大部分操作，但脚本化和自动化。您使用 CPANEL 吗？重新排列该页面以使所有图标都在一个屏幕上可见不是很好吗？是否有一些您从未使用过的图标组？隐藏它们。你想要不同顺序的图标组吗？重新排列它们。

您还可以填写表单、自动登录、按下按钮等。因为每个 TamperMonkey 脚本都是根据 URL 触发的，所以整个过程可以自动化，其中（例如）填写表单，按下提交按钮 (这会导致生成一个新页面）。下一页有一个不同的 URL，由不同的 TamperMonkey 脚本检测到，并且该页面上的其他内容会自动执行...自动按下其他按钮 - 和 TaDa！该网站现在是我们需要的地方。我们可以告别一堆样板输入、点击和等待，我们再也不需要这样做了——直到所有者更改网站 HTML（然后我们需要对脚本进行一些更新）。

Here is an SO answer 带有一个简单的脚本，可以隐藏每个 SO 页面上分散注意力的热门网络问题块。

Here is one 充分解释了 TamperMonkey 并提供了一个简短的脚本，可以为您提供无穷无尽的 DuckDuckGo 结果（即，无需按下按钮即可查看更多结果 - 结果只是无休止地滚动）。 （不要使用 DuckDuckGo？这篇文章还包含一个脚本的链接，该脚本对 Google 搜索结果执行相同的操作 - 仅此脚本就值得安装 TamperMonkey！）

_{免责声明：我与上述任何产品都没有关联或关系。我只是一个谦虚的用户和欣赏的粉丝。}

【讨论】：