Question

我环顾四周并尝试了一些事情，但似乎没有任何效果。如果之前已经回答过，我道歉，但这让我很难过。

我试图修改＆＃34; li的css：＆＃34;来自Chrome扩展程序中的JS / JQuery内容脚本，用于删除盒子阴影。我无法直接访问我正在编辑的网页的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"]
    }
  ]
}

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

我试图修改＆＃34; li的css：＆＃34;来自JS / JQuery内容 Chrome扩展程序中的脚本，用于删除框阴影。我没有直接访问我正在编辑的网页的HTML / CSS。

然而......你可以通过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确保新规则将插入样式表的最末端，位于现有级联的底部。

修改li：来自内容脚本

1 个答案: