如何为我经常使用的网站加载样式 sheet 和本地脚本，并希望为个人使用定制？

Question

所以我有一个奇怪的问题，我很难找到答案。除了我喜欢使用的个人网站之外，还有许多我每天必须使用的网站。然而，一些 UI 设计确实让我很烦恼，我想添加自定义样式，如果可能的话，我想添加脚本到我喜欢的任何网站，但只能在我的本地机器上。

例如。我可以在任何网站上打开开发工具并自定义任何我喜欢的东西。有没有一种方法可以保存这些更改，以便每次访问该网站时它都会应用在开发工具中所做的更改。或者让它加载特定的样式表到我在本地机器上预先设置的网站。

我该从哪里开始呢？

我正在使用 Windows-7-64 位，我首选的浏览器是 chrome。（如果已经有专门针对这些程序的解决方案 - 但不是必需的）

感谢任何意见！

Answer 1

由于它是本地的并且仅供您查看，一个简单的浏览器插件应该可以解决问题。有一个用于 Firefox 的 plug-in/add-on 和 Chrome 称为 "Stylish"。

来自他们的website："User styles let you change the way websites look."

Answer 2

我有两个 Chrome 插件：

时尚 CSS：https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

和 Javascript 的 CJS：https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en

Answer 3

我建议制作您自己的 chrome 扩展。 https://developer.chrome.com/extensions

扩展提供了很多可能性，但您需要关注的是 manifest.json 中的 content_scripts 选项。

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "path/to/my/script.js"
      ],
      "css": [
        "path/to/my/style.css"
      ]
    },
    {
      "matches": ["http://www.google.com/*"],
      "js": [
        "path/to/other/script.js"
      ],
      "css": [
        "path/to/different/style.css"
      ]
    }
  ],

在这里，您可以指定不同的 url 来应用脚本和 css。我提供的 json 将某些 js/css 应用到每个页面，并将某些 js/css 应用到与提供的正则表达式匹配的任何页面。

更多信息：https://developer.chrome.com/extensions/content_scripts

这可以运行在开发者模式下免费，只需将您的扩展文件夹放在 chrome 的扩展页面上，或者您可以支付 5 美元发布您的应用并以这种方式使用它.

Answer 4

我一直在使用免费的 Tampermonkey Chrome 扩展程序。它允许您将自定义 javascript 插入任何网页。您可以定位整个域或域中的一个页面。它为您提供了一个干净的仪表板，用于通过 domain/url.

管理您的所有脚本

我在 Tampermonkey 中用来轻松插入 CSS STYLES 的脚本如下所示

(function() {

  'use strict';

  function addCss(cssString) {
      var head = document.getElementsByTagName('head')[0];
      var newCss = document.createElement('style');
      newCss.type = "text/css";
      newCss.innerHTML = cssString;
      head.appendChild(newCss);
  }

  addCss(' body { background-color: #000; } .MyCssClass { display:none; } #MyCssID { color:green; } ');


})();

如何为我经常使用的网站加载样式 sheet 和本地脚本，并希望为个人使用定制？

How to load a style sheet and script locally for websites I use often and want customize for personal use?

html

javascript

css

google-chrome

windows-7