Question

我正在创建一个内容脚本Chrome扩展程序，用于隐藏Facebook主页上的新闻源。

这个脚本在我第一次打开facebook.com时加载，但在导航到Facebook并返回主页面时失败（这是在扩展中正确定义的URL）。

这是我的manifest.js文件：

{
  "name": "NewsBlock",
  "description": "NewsBlock - Facebook Newsfeed Hider",
  "version": "1.0.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*", "storage"
  ],
  "browser_action": {
      "default_title": "NewsBlock",
      "default_icon": "icon.png"
  },
    "content_scripts": [
    {
        "matches": ["https://www.facebook.com/"],
        "js": ["myscript.js"]
    }
    ],
  "manifest_version": 2
}

这是我的myscript.js文件：

if (document.getElementById('home_stream'))
    document.getElementById('home_stream').style.visibility = "hidden";
if (document.getElementById('pagelet_home_stream'))
    document.getElementById('pagelet_home_stream').style.visibility = "hidden";
console.log("NewsBlock Activated...")

当我在Facebook上导航回主页时理解为什么没有加载任何帮助都会很棒。

Answer 1

这是因为很多时候Facebook页面使用history.pushstate方法进行导航。此方法可以更改当前URL而不会导致新的页面加载。通过用ajax调用的结果替换部分页面内容来模拟导航。

您可以使用chrome.webNavigation.onHistoryStateUpdated事件来检测该情况，如此回答https://stackoverflow.com/a/17584559/1507998中所述。

Answer 2

facebook中的某些链接调用ajax函数，因此大部分时间点击facebook中的链接都不会更改页面，只需通过ajax加载内容。所以你的内容脚本只执行一次。

有两种可能的解决方案，

您还可以添加DOM更改侦听器（如DOMSubtreeModified），并在每次更改内容时运行代码。
您可以将CSS代码添加到页面，因此即使通过ajax更改了页面，也不需要每次都运行它。

像这样，

的manifest.json

{
  "name": "NewsBlock",
  "description": "NewsBlock - Facebook Newsfeed Hider",
  "version": "1.0.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*", "storage"
  ],
  "browser_action": {
      "default_title": "NewsBlock",
      "default_icon": "icon.png"
  },
    "content_scripts": [
    {
        "matches": ["https://www.facebook.com/"],
        "js": ["myscript.js"],
        "css": ["mystyle.css"]
    }
    ],
  "manifest_version": 2
}

mystyle.css

#home_stream, #pagelet_home_stream {
  visibility: hidden;
}

内容脚本不会在页面重新加载时重新执行

2 个答案:

的manifest.json

mystyle.css