html - 创建 Chrome 扩展以隐藏 DIV 显示 :none; on a specific page

Question

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

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

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

list 文件:

{
"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; }

关于如何更正“匹配项”的任何想法？

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

Answer 1

维克多

你走错了路。您的扩展应该在 Facebook 站点上运行，因此 list 中的匹配语句必须完全如下所示:

“匹配”:["https://www.facebook.com/ *"]

然后您需要在时间轴中找到所有评论(很可能是通过 css 类)，检测目标站点地址 (//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 });