Question

我曾试图谷歌，但似乎无法找到答案。

我试图制作一个Chrome扩展程序来做一件事，将style.display属性更改/插入到一个或多个元素。通常情况下这是微不足道的，但由于某种原因，我无法使用扩展程序。

manifest.json 文件

  {
    "name": "My app",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Do thing.",
    "permissions": [
        "tabs", "http://*/",
"tabs", "https://*/"
    ],
    "content_scripts": [
        {
            "matches": ["https://www.facebook.com/*"],
            "js": ["myapp.js"],
            "run_at": "document_end"
        }
    ]
}

和 myapp.js

document.getElementById("rightCol").style.display="none";

但它没有做任何事情。

Answer 1

在document_end被触发后，页面可能会以编程方式添加元素。如果您注入CSS而不是脚本，这可以解决，并简化整个任务。

除非网页本身以编程方式覆盖此规则，否则应该完成您尝试执行的操作：

在清单文件中更改content_scripts，如下所示：

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

并使用以下myapp.css：

#rightCol { display:none !important; }

Answer 2

抱歉延迟回来。事实证明它不是脚本，因为某些原因我必须在每次更改后重新启动chrome。

之后，通过将其添加到myapp.css

，它不会总是隐藏我修复的栏

document.addEventListener("DOMSubtreeModified", listener, false);

然后隐藏在监听器函数中（在try / catch内部，它不在屏幕上）。

现在效果很好，甚至在Chrome网上商店:) 对于任何感兴趣的人都是链接：https://chrome.google.com/webstore/detail/hide-facebook-adsfacebook/pkconkhalmgfkbikgonhonmmlbkkoonc

Chrome扩展插入样式内联不起作用

2 个答案: