修改li:从内容脚本开始之后

Question

我环顾四周，尝试了一些事情，但似乎没有什么可用。如果以前已经回答过，我深表歉意，但这让我很难过。

我正在尝试从Chrome扩展程序中的JS/jQuery Content脚本中修改" Li：之后"的CSS，以删除盒子阴影。我无法直接访问我正在编辑的网页的HTML/CSS。

有人可以朝着正确学习如何做到这一点的方向吗？

subtest.json

{
  "manifest_version": 2,
  "name": "Testing",
  "description": "CSS Website Manipulation",
  "version": "1.0",
  "browser_action": {
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery.js", "scripts.js"],
      "css": ["styles.css"]
    }
  ]
}

scripts.js

changeCSS(window.location.href);
function changeCSS(url) {
    switch (url) {
        case "URL REDACTED": {
            // Change the look of the Username/Password input fields
            $('#user_id, #password').css({
                'border': 'none',
                'background-color': '#E8E8E8',
                'border-radius': '0',
                'color': '#232323',
                'outline': 'none',
                'box-shadow': 'none'
            });
            // Change the background of the page
            $('.login-page').css({
                'background': 'none',
                'background-color': '#F7F7F7',
                'color': 'white'
            });
            // Change the look of the announcement list items
            $('#loginAnnouncements > ul > li').css({
                'background-color': '#E8E8E8',
                'color': '#232323'
            });
            $('strong').css('color', '#009688');
            // Change the look of the Login button + fix the alignment to match the input fields
            $('#entry-login').css({
                'background': 'none',
                'border': 'none',
                'border-radius': '0',
                'background-color': '#009688',
                'margin-top': '9px',
                'margin-left': '-9px',
                'cursor': 'pointer',
                'text-decoration': 'none',
                'text-shadow': 'none',
                'box-shadow': 'none'
            });
            // Align the labels with the input fields
            $('#loginFormList > li > label').css({
              'margin-left': '-9px'
            });
            // Change the look of the buttons on the top right of the page
            $('.font-size .contrast').css({
              'border': 'none'
            });
            // Remove Capitalization from Username/Password labels
            $('#loginFormList > li > label').css('text-transform', 'none');
            $('#loginFormList > li > label').attr('autocapitalize', 'off');
            $('h2:first-of-type, .font-size, .contrast').css({
                'display': 'none'
            });
            break;
        }
    }
}

styles.css

#loginAnnouncements ul li::after {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

Answer 1

我正在尝试从JS/jQuery内容中修改" Li：之后"的CSS 在Chrome扩展程序中脚本，以删除盒子阴影。我没有 直接访问我正在编辑的网页的HTML/CSS。

尽管如此...您已编辑网页的CSS样式表：

var lastRule = document.styleSheets[0].cssRules.length;
document.styleSheets[0].insertRule('#loginAnnouncements ul li::after { box-shadow: none; -webkit-box-shadow: none;}', lastRule);

您可以使用document.styleSheets[0].insertRule动态编辑文档的样式表。

insertRule()的第二个参数确定在样式表中您的新规则将在何处插入。

在这种情况下，lastRule确保将在样式表的末端插入新规则，在现有级联的底部。