覆盖 CSS 的边缘扩展

Question

在 Edge 中加载 PDF 时，我想删除一个“保存”和“另存为”按钮。从 Web 服务器加载的 pdf 以及本地文件都会出现这种情况。

我已加载扩展并且弹出窗口正在工作，但是，我似乎无法让 CSS 覆盖页面。所需的 CSS 是：

` button#save, button#saveAs {   display: none !important;   cursor: not-allowed;   pointer-events: none; }`

这是我的manifest.json：

`{

"name": "CSS Override",
"version": "0.0.5",
"manifest_version": 3,
"description": "Override CSS on any website",

"icons": {
    "16": "icons/favicon.png"
},

"action": {
    "default_icon": {
        "16": "icons/favicon.png"
    },
    "default_title": "CSS Override",
    "default_popup": "popup/popup.html"
},

"permissions": ["activeTab", "scripting"],

"content_scripts": [
    {
        "matches": ["<all_urls>", "file:///*", "http://*/*", "https://*/*"],
        "css": ["css/content.css"],
        "all_frames": true
    }
]

}

`

这里删除了“另存为”按钮，并在开发者控制台中添加了自定义 CSS 样式：

我希望这是足够的信息！我阅读了大量的知识库，并用谷歌搜索并询问了我认识的其他开发人员，但这让每个人都感到困惑！

我尝试过的事情：

• 阅读有关扩展构建的 Chrome 文档
• 用谷歌搜索我的问题的不同变体，并阅读论坛、博客、stockoverflow 等，
• 问ChatGPT
• 联系了一些我认识的专业开发人员（他们之前没有使用过边缘扩展）
• 哭了

Answer 1

不幸的是，就像 K J 所说，您无法删除该按钮，或者更确切地说，您只是无法设置内置 PDF 查看器的样式。它被设计成一个插件，你不能把它当作DOM，这意味着它只能由插件修改。您可以阅读这个答案了解更多详情。

如果您想自定义 PDF 查看器，我建议您创建自己的 PDF 查看器，而不是修改内置 PDF 查看器。您可以尝试一些库，例如 PDF.js。

Answer 2

检查CSS特异性：确保您的CSS选择器（button#save和button#saveAs）具有足够的特异性来覆盖任何现有样式。您可能需要使用更具体的选择器或在必要时使用 !important。

检查元素：使用浏览器的开发人员工具检查元素并确认您的 CSS 规则正在应用。检查是否有任何冲突的样式可能会覆盖您的样式。

尝试不同的选择器：不要使用button#save和button#saveAs，而是尝试使用更通用的选择器，例如.save或.saveAs。这有时在特定 ID 被覆盖的情况下会有所帮助。

检查 JS 干扰：有时，页面上的 JavaScript 可以动态更改 DOM 或样式。确保页面加载后没有脚本修改这些按钮。

在不同的 PDF 上进行测试：确保在各种 PDF 上进行测试，以确保问题不是特定于特定的 PDF 文件。

在弹出窗口中进行调试：考虑在弹出窗口脚本中添加一些调试语句，以确保脚本正在执行并且它针对的是正确的元素。

Edge 扩展文档：仔细检查 Microsoft Edge 的扩展文档，了解清单 v3 的任何特定细微差别或要求。

考虑使用 JavaScript：如果单独使用 CSS 不起作用，您可能需要使用 JavaScript 来操作 DOM 并删除按钮。这可以在您的内容脚本中完成。

根据您提供的信息，您似乎已正确设置清单文件和内容脚本。