javascript - 修改li :after from content script

Question

我环顾四周并尝试了一些方法，但似乎没有任何效果。如果之前已经回答过这个问题，我深表歉意，但这让我很困惑。

我正在尝试从 Chrome 扩展程序中的 JS/JQuery 内容脚本修改“li:after”的 css，以删除框阴影。我无法直接访问我正在编辑的网页的 HTML/CSS。

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

Manifest.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"]
    }
  ]
}

脚本.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;
        }
    }
}

样式.css

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

Answer 1

I'm trying to modify the css of an "li:after" from a JS/JQuery content script in a Chrome extension, to remove a box-shadow. I don't have direct access to the HTML/CSS of the webpage that I'm editing.

尽管如此...您可以通过 JavaScript 访问正在编辑的网页的 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 确保新规则将插入到样式表的最末尾、现有级联的底部。