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

【问题标题】：chrome plugin add or delete some elements in facebook newsfeed DOM tree via JQuerychrome插件通过JQuery在facebook newsfeed DOM树中添加或删除一些元素
【发布时间】：2013-10-08 15:07:11
【问题描述】：

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

manifest.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"]
        }
    ]
}

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();'
    });

});

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

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension

【解决方案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");'
    });
});

【讨论】：