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

Chrome Extension insert style inline not working

本文关键字：插入 样式 不起作用 扩展 插件 Chrome      更新时间：2023-09-26

我尝试谷歌，但似乎找不到答案。

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

清单.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";

但它什么也没做。

触发

document_end 后，页面可能会以编程方式添加该元素。如果您注入 CSS 而不是脚本，则可以解决此问题并简化整个任务。

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

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

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

  • 并使用以下myapp.css：

    #rightCol { 
    display:none !important;
}

很抱歉延迟回来。事实证明它不是脚本，由于某种原因，我不得不在每次更改后重新启动 chrome。

在那之后，它不会总是隐藏我通过将其添加到 myApp 来修复的栏.css

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

然后隐藏在侦听器功能中（在尝试/捕获内，以防它不在屏幕上）。

现在工作完美，甚至在Chrome网上应用店:)对于任何感兴趣的人，这里是链接：https://chrome.google.com/webstore/detail/hide-facebook-adsfacebook/pkconkhalmgfkbikgonhonmmlbkkoonc

相关文章：