如何為我經常使用並希望自定義以供個人使用的網站在本地加載樣式表和腳本？

Question

所以我有一個奇怪的問題，我很難找到答案。 除了我喜歡使用的個人網站之外，還有許多我每天必須使用的網站來工作。 然而，一些 UI 設計真的讓我很不舒服，我想向我喜歡的任何網站添加自定義樣式和腳本，如果可能的話，但只能在我的本地機器上。

例如。 我可以在任何網站上打開開發工具並定制我喜歡的任何東西。 有沒有辦法保存這些更改，以便每次訪問網站時都會應用在開發工具中所做的更改。 或者讓它將特定的樣式表加載到我在本地機器上預先設置的網站。

我會從哪里開始？

我使用的是 Windows-7-64 位，我的首選瀏覽器是 chrome。 （如果已經有專門針對這些程序的解決方案，請參考 - 但不是必需的）

感謝您提供任何意見！

Answer 1

由於它將是本地的，僅供您查看，因此，一個簡單的瀏覽器插件就可以解決問題。 Firefox和Chrome有一個名為“ Stylish”的插件/附加程序。

在他們的網站上 ：“用戶樣式可讓您更改網站的外觀。”

• Firefox版本
• Chrome版本

Answer 2

我有兩個Chrome插件：

CSS風格時尚： https ： //chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe？hl = zh-CN

以及適用於Javascript的CJS： https ：//chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija ？hl = zh-CN

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 插入任何網頁。 您可以定位整個域或僅定位域中的一頁。 它為您提供了一個干凈的儀表板，用於按域/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; } ');


})();