Chrome扩展不注入css

Chrome extension not injecting css

本文关键字:css 注入 扩展 Chrome      更新时间:2023-09-26

我看过很多类似的关于堆栈溢出的问题,没有发现任何人有类似我的问题。我不确定我做错了什么。(如果我做错了什么)希望你能帮助我。

我要做的是使用chrome扩展将css注入网站minds.com。问题是它不是注射。我想不只是那个网站,因为我已经试过了。

清单文件:

{
  "manifest_version": 2,
  "name": "My Style",
  "description": "None",
  "version": "0.3",
  "content_scripts": [{
    "matches": ["http://www.minds.com/*"],
    "css": ["my-style.css"],
    "run_at": "document_start"
  }]
} 
css

 html{ 
            color: #cacaca; 
          } 
          .mdl-card{ 
            background: rgba(0,0,0,0.64) !important; 
            color: #fff !important; 
          } 
          /*header*/ 
          .mdl-color--white{ 
            background: linear-gradient(#000, #333) !important; 
          } 
          .mdl-color--blue-grey-800 { 
            background-color: #121212 !important; 
          } 
          /*text*/ 
          .mdl-color-text--blue-grey-500 { 
            color: #cacaca !important; 
          } 
          minds-activity.mdl-card .mdl-card__supporting-text, minds-activity .mdl-card__supporting-text { 
            color: #aaa !important; 
          } 
          .minds-avatar { 
            background: rgba(0,0,0,0.0) !important; 
          } 
          .mdl-card .m-owner-block { 
            background: rgba(0,0,0,0.6) !important; 
          } 
          .m-owner-block a{ 
            color: #cacaca !important; 
          } 
          .minds-dropdown-menu{ 
            background: rgba(0,0,0,0.5) !important; /* 
            box-shadow: 0px 9px 0px !important;*/ 
          } 
          .mdl-menu__item{ 
            color: #fff !important; 
                box-shadow: 0px 0px 9px !important; 
          } 
          .mdl-color--blue-grey-50 { 
            background: rgba(0,0,0,0.6) !important; 
          } 
          .mdl-color-text--blue-grey-900 { 
            color: #78ad56 !important; 
          } 
          /*BG*/ 
          .mdl-color--grey-100 { 
            background: url("http://powerpictures.crystalgraphics.com/photo/seamless_black_circuit_board_pattern_cg5p0977241c_th2.jpg") !important; 
          } 
          /*Blogs*/ 
          .m-title-block, .m-title-block-fixed { 
            background: rgba(0,0,0,0.9) !important; 
          } 
          /*usercard*/ 
          .m-discovery-suggested .mdl-cell minds-card-user .m-usercard-bio { 
           color: #aaa !important; 
          } 
          /*active tab*/ 
          .mdl-color--blue-grey-600 { 
            background-color: #333 !important; 
          } 
          .mdl-card__title{ 
            color: #fff !important; 
          } 
          .mdl-button{ 
            color: #acacac !important; 
          } 
          minds-gatherings .minds-gatherings-search{ 
            background: rgba(0,0,0,0.6) !important; 
            color: #aaa !important; 
          } 
          h1{ 
            color: #fff !important; 
          } 
          .mdl-tabs__tab{ 
            color: #fff !important; 
            text-shadow: 0px 0px 9px #000 !important; 
          } 
          .mdl-menu__outline { 
            background: rgba(0,0,0,0.7) !important; 
          } 
          .mdl-menu__item:hover{ 
            background: rgba(20,20,20,0.6) !important; 
            color: #fff !important; 
          } 
          .mdl-card__supporting-text textarea{ 
            color: #aaa !important; 
          } 
          body a{ 
            color: #21CE54 !important; 
          } 
          minds-blog-view{ 
            background: url("http://powerpictures.crystalgraphics.com/photo/seamless_black_circuit_board_pattern_cg5p0977241c_th2.jpg") !important;     
          } 
          minds-comments form textarea{ 
            color: #aaa !important; 
          } 
          .mdl-grid { 
            background: rgba(0,0,0,0.6); 
          } 
          .minds-blog-body p{ 
            color: #fff !important; 
          } 
          .m-h1-input { 
            color: #cacaca !important; 
          }

您应该将"http://www.minds.com/*"替换为"https://www.minds.com/*"

还有一些可能会让你出错的东西(我在这个问题上花了几个小时):

在清单中content_scripts下的matches的json中,协议是否正确(即httphttps)很重要。如果您使用https访问站点,而清单显示http,则扩展不会注入脚本/css(反之亦然)。