Chrome扩展程序内容脚本javascript - run_at document_end无法正常运行

时间:2017-01-11 23:44:57

标签: javascript google-chrome google-chrome-extension content-script

作为测试,我正在创建一个Chrome扩展程序,它隐藏了facebook和右侧广告右侧的“新闻”部分。同时将背景颜色更改为黑色。

我现在的问题是,当你加载脸书时,新闻和白色背景会显示一秒钟然后消失。所以似乎设置run_atdocument_end使我的javascript在页面加载后运行。我也尝试了document_startdocument_idle,结果相似。我怎样才能使新闻部分根本不显示?

的manifest.json:

{
  "manifest_version": 2,

  "name": "FB_Trending_Hide_ChromeExtension",
  "description": "This extension will hide the trending news section of Facebook",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png"
  },
  "content_scripts": [{
    "run_at": "document_end",
    "matches": ["*://*.facebook.com/*"],
    "js": ["content.js"],
    "all_frames": true
  }],
    "permissions": [
    "tabs", "*://*.facebook.com/*", "activeTab"
  ]
} 

content.js:

document.getElementById("pagelet_trending_tags_and_topics").style.display = 'none';
document.getElementById("pagelet_ego_pane").style.display = 'none';
document.body.style.background = 'black';

1 个答案:

答案 0 :(得分:1)

这看起来像是CSS,"css"content_scripts条目的作业,而不是JavaScript,"js"。使用CSS应该更容易:您甚至不需要考虑可以动态地将元素添加到页面中。

您可以执行以下操作:

manifest.json (仅限content_scripts部分):

  "content_scripts": [{
    "run_at": "document_start",
    "matches": ["*://*.facebook.com/*"],
    "css": ["facebookContent.css"],
    "all_frames": true
  }],

facebookContent.css

#pagelet_trending_tags_and_topics {
    display:none !important;
}
#pagelet_ego_pane {
    display:none !important;
}
body {
    backgound:black !important;
}