首页 > 解决方案 > 如何编辑网站的背景颜色

问题描述

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

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

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

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

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

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

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

标签: htmlcssgoogle-chrome-extensiongreasemonkeytampermonkey

解决方案


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

构建一个扩展是相当复杂的:你需要创建一个清单,内容脚本和背景页面有单独的文件 - 它周围有点复杂。这是一个不断变化的变化挂毯。

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

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

  2. 在目标网站上,单击 TamperMonkey 图标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 = '<style>.leftcolumn{background-color:#806546}</style>';
    $(body).append(mycss);
});

笔记:

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

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

  3. @require 行允许您在脚本中使用 jQuery。如果您不需要 jQuery,则不需要此行。把它放在外面。

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


TamperMonkey 能为我做什么?

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

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

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

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

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


推荐阅读