html - 如何使用 Chrome 扩展名编辑网站元素的背景色

我有0个编码经验，但是我使用的网站的“盒子”中的颜色太鲜艳了

我想创建一个插件，以便我和另一个用户可以使用“深色主题”

我遵循了一些指南，但无法正常使用...

我专门尝试将“ leftcolumn”的背景颜色从“ ffffff”更改为“ 806546”

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

如何更改css文件的元素，以便更改背景色？

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

最佳答案

听起来您似乎刚刚找到了教科书示例，说明了为什么发明了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 = '<script>.leftcolumn{background-color:#806546}</script>';
    $(body).append(mycss);
});

笔记：

@name行是您的脚本名称。它可以是任何东西-可以是任何东西。当您有一天为多个网站（我目前有200多个）编写了多个TamperMonkey脚本时，这就是TamperMonkey仪表板中显示的名称，例如Excel电子表格的“文件名”。
@match行最初将使用您所在页面的确切URL进行填充。通常，这不是您想要的。例如，假设您在网站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？重新排列该页面以便所有图标都在一个屏幕上可见不是很好吗？是否有一些您从未使用过的图标组？藏起来您是否要按不同顺序排列图标组？重新排列它们。

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

Here is one全面说明了TamperMonkey，并提供了一个简短的脚本，可为您提供无穷无尽的DuckDuckGo结果（即，无需按按钮即可查看更多结果-结果会不断滚动）。（不要使用DuckDuckGo？该帖子还包含一个脚本链接，该脚本对Google搜索结果具有相同的作用-仅此脚本值得安装TamperMonkey！）

免责声明：我与上面讨论的任何产品都没有关联或关系。我只是一个谦虚的用户和欣赏者。

关于html - 如何使用 Chrome 扩展名编辑网站元素的背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56812723/