作为测试,我正在创建一个 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';
这看起来像是 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 {
background:black !important;
}