Question

我目前正在开发一款Google Chrome扩展程序，可在加载页面时更改Facebook上蓝条的颜色。

在检查代码时，有一个图像覆盖了蓝色条，因此任何背景颜色变化都是看不见的。

当前代码：

document.getElementById('pagelet_bluebar').style.backgroundColor = 'red';
document.getElementById("blueBarDOMInspector").style.visibility = "hidden";

目前，我已将状态设置为不可见，并且条形图会更改颜色，但只剩下条形图。

如何定位CSS中的背景图像以将其删除/隐藏？

EDITED 16/02/2016（SOLUTION）：

（清单）

 {
    "manifest_version": 2,

  "name": "MonoChromeBook",
  "description": "This extension will make a better looking site",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "https://www.facebook.com/*"
   ],
 "content_scripts": [
    {
    "matches": ["https://www.facebook.com/*"],
  "css" : ["hello.css"],
  "run_at": "document_end"
}
  ]
}

CSS

.sidebarMode ._50tj {
background-color: black;
 }

._5rzs._5v6d ._5v6e {
visibility: hidden;

}

EDITED 10/02/2016：

蓝色菜单栏已被修改，因此需要进一步研究再次调整条形颜色。

背景和其他div仍然可以编辑。

Answer 1

Chrome扩展程序可让您注入javascript＆amp;因此css注入一个覆盖标准facebook css的css，不要用JS解析文档。是弹性较小的解决方案。

添加到清单：

 "content_scripts": 
 [ { 
      "matches": ["http://www.google.com/*"], 
      "css": ["fix.css"], 
      "js": ["script.js"]
 } ],

Answer 2

document.getElementById（＆＃34; blueBarDOMInspector＆＃34;）。style.backgroundImage =＆＃39; none＆＃39;;

Answer 3

仅使用以下代码，我就用bluebar扩展名更改了CustomStyleScript的颜色：

._2s1x ._2s1y{background-color:#922722;}

更改Facebook栏颜色（解决方案）

3 个答案: