如何编辑网站的背景颜色

Question

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

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

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

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

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

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

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

Answer 1

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

构建扩展程序非常复杂：您需要创建一个清单，内容脚本和后台页面有单独的文件 - 周围都有点复杂。这是一个不断变化的变化挂毯。

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

1. 为您选择的浏览器安装TamperMonkey 扩展

2. 在目标网站上，单击 TamperMonkey 图标

3. 单击“添加新脚本”或（如果未显示）单击“仪表板”，然后在打开时单击 [+] 选项卡。将打开一个新的空白脚本模板。修改如下：

// ==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 = '<script>.leftcolumn{background-color:#806546}</script>';
    $(body).append(mycss);
});

笔记：

1. @name 行是您的脚本名称。它可以是任何东西——任何东西。当有一天您为多个网站编写了多个 TamperMonkey 脚本（我目前有 200 多个）时，这就是显示在 TamperMonkey 仪表板中的名称，就像 Excel 电子表格的“文件名”。

2. @match 行最初将填充您所在页面的确切 url。通常，这不是您想要的。例如，假设您在网站上http://example.com/blog/name-of-a-particular-blog-post- 通常，您会希望在每篇博文上运行相同的脚本，而不仅仅是这篇博文。只需用 a 替换太特定的部分*，就像这样：http://example.com/blog/*它现在可以在任何以这些字符开头的 url 的页面上运行。

3. @require 行允许您在脚本中使用 jQuery。如果您不需要 jQuery，则不需要此行。离开它。

4. 当网页上的 TamperMonkey 脚本处于活动状态时，TamperMonkey 扩展图标会显示一个红色块

TamperMonkey 能为我做什么？

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

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

这是一个带有简单脚本的 SO 答案，该脚本隐藏了每个 SO 页面上令人分心的热门网络问题块。

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

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