创建 Chrome 扩展以隐藏 DIV display:none；在特定页面上

Question

我正在尝试创建我的第一个 Chrome 扩展程序。

它基本上是针对特定元素的广告拦截器，在本例中为 Facebook 评论部分。

它适用于 all_urls 但不适用于该特定域。

清单文件：

{
"name": "My extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
    {
        "matches": ["http://visir.is/*"], //where your script should be injected
        "css": ["style.css"] //the name of the file to be injected
    }
    ]

}

style.css 文件:

.fbcomment { display: none; }

关于如何更正 "matches" 的任何想法？

我已经按照 https://developer.chrome.com/extensions/match_patterns 中的说明尝试了 *://visir.is/*，但它只适用于 all_urls

Answer 1

维克托

你走错路了。您的扩展应该可以在 Facebook 站点上运行，因此清单中的 matches 语句必须完全如下所示：

"matches": ["https://www.facebook.com/*"]

比你需要找到时间线中的所有评论（最有可能是css class），检测目标站点地址是否存在（//visir.is/）然后隐藏这些评论。

因为时间轴会动态加载更多帖子，您还需要观察新节点并将您的函数也应用到它们上（请参阅下面我的 Chrome 扩展中的示例）：

var obs = new MutationObserver(function (mutations, observer) {
 for (var i = 0; i < mutations[0].addedNodes.length; i++) {
  if (mutations[0].addedNodes[i].nodeType == 1) {
   $(mutations[0].addedNodes[i]).find(".userContentWrapper").each(function () {
    injectFBMButton($(this));
   });
  }
 }
 injectMainButton();
});
obs.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false });

创建 Chrome 扩展以隐藏 DIV display:none；在特定页面上

Creating Chrome extensions to hide DIV display:none; on a specific page

html

css

google-chrome

google-chrome-extension