javascript - chrome插件通过JQuery在facebook newsfeed DOM树中添加或删除一些元素

Question

我正在编写 chrome-plugin，它可以在 facebook 的新闻源中添加一些功能或从 DOM 树中删除一些元素。但我有一个麻烦。起初页面已显示，并且仅在添加或删除此 DOM 元素之后。但是我想让页面已经显示了这些元素。怎么做？

清单.json

{
    "manifest_version": 2,
    "name": "Facebook plugin",
    "version": "1.0",
    "description": "Facebook plugin",
    "permissions": ["tabs", "https://www.facebook.com/*", "webNavigation", "background", "<all_urls>"],
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
            "matches": ["https://www.facebook.com/*"],
            "js": ["jquery.js"]
        }
    ]
}

背景.js

chrome.webNavigation.onDOMContentLoaded.addListener(function(details) {

    chrome.tabs.executeScript(details.tabId, {
        code: 
                ' $("#home_stream li div.attachmentText span.caption:contains(\'youtube.com\')").closest("li").empty();'
    });

});

和jquery.js - 最新的 jquery 库版本。请告诉我我做错了什么？谢谢你。

Answer 1

我已经解决了这个问题。
1. 在“content_scripts”部分添加manifest.json - css: ["style.css"]:

"content_scripts": [
    {
        "matches": ["https://www.facebook.com/*"],
        css: ["style.css"],
        "js": ["jquery.js"]
    }
]

2.在style.css中加入下一段代码：

body {display: none;}

3.添加到background.js

chrome.webNavigation.onDOMContentLoaded.addListener(function(details) {    

    chrome.tabs.executeScript(details.tabId, {
        code: 
            ' $("#home_stream li div.attachmentText span.caption:contains(\'youtube.com\')").closest("li").empty();' +
        ' $("body").css("display", "inline");'
    });
});