Chrome 扩展内容脚本 javascript - run_at document_end 无法正常工作答案

【问题标题】：Chrome extension content-script javascript - run_at document_end not working correctlyChrome 扩展内容脚本 javascript - run_at document_end 无法正常工作
【发布时间】：2017-01-11 23:44:56
【问题描述】：

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

我现在的问题是，当您加载 facebook 时，新闻和白色背景会显示一秒钟然后消失。所以似乎将run_at 设置为document_end 会使我的javascript 在页面加载后运行。我也尝试过document_start 和document_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';

【问题讨论】：

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

【解决方案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;
}

【讨论】：