liを変更：コンテンツスクリプトから

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

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

私は「LIのCSSを修正しようとしている。後"をChrome拡張機能のJS/JQueryコンテンツ スクリプトから削除しますXシャドウ。編集中のウェブページのHTML/CSSに直接アクセスする はありません。あなたが動的に文書のスタイルシートを編集するdocument.styleSheets[0].insertRuleを使用することができます

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

：

それにもかかわらず...あなたが編集しているWebページのCSSスタイルシートへのJavaScriptのアクセス権を持っています。

insertRule()の2番目の引数は、スタイルシートのどこに新しいルールが挿入されるかを指定します。

この場合、lastRuleは、既存のカスケードの最後に新しいルールがスタイルシートの最後に挿入されるようにします。