Safari扩展程序的内容CSS优先级问题

问题描述 投票：0回答：1

我发现Safari在HTML页面包含的CSS和注入的内容CSS之间优先考虑CSS的问题。我创建了一个minimal reproducible展示并将其上传到GitHub。

问题如下：扩展注入的CSS被来自网站本身的低层次css规则所推翻。在此屏幕截图中，div{}规则位于网站的CSS中，div.hello{}规则在Safari扩展程序的内容CSS中声明并由Safari注入。

结果：HTML中的div是红色，而不是蓝色。屏幕截图显示Safari使用div{}优先于div.hello{}。请注意，Safari会自动添加initial规则。内容CSS不包括此类声明。

enter image description here

请参阅此处的最小示例，或者我为最小可重现示例创建的GitHub repo：https://github.com/MikeSpock/safari-extension-css-bug

如何为我通过Safari扩展添加到网站的标记创建稳定的CSS，看到网站中的每个CSS都超出了扩展中的CSS？这不是Chrome扩展程序的工作方式，例如，它可以正常工作，正确处理CSS优先级。

最小可行的例子：

showcase.safari.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="./">
    <link rel="stylesheet" href="./showcase.safari.css">
</head>
<body>
<div>
    This should have a red background.
</div>
<div class="hello">
    This should have a green background.
</div>
</body>
</html>

showcase.safari.css

div{
    background:red;
}

showcase.safariextension/content.css

这是通过Safari扩展注入的css

div.hello {
    background:green;
}

showcase.safariextension/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Builder Version</key>
    <string>13607.1.40.1.5</string>
    <key>CFBundleDisplayName</key>
    <string>safari-extension-css-bug</string>
    <key>CFBundleIdentifier</key>
    <string>com.yourcompany.safari-extension-css-bug</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>Content</key>
    <dict>
        <key>Stylesheets</key>
        <array>
            <string>content.css</string>
        </array>
    </dict>
    <key>ExtensionInfoDictionaryVersion</key>
    <string>1.0</string>
    <key>Permissions</key>
    <dict>
        <key>Website Access</key>
        <dict>
            <key>Include Secure Pages</key>
            <true/>
            <key>Level</key>
            <string>All</string>
        </dict>
    </dict>
</dict>
</plist>

通过Safari Extension Builder将showcase.safariextension文件夹添加为Safari扩展，并打开showcase.safari.html作为最小的示例。

css safari-extension
1个回答
0
投票

我找到了一个对我来说足够好的解决方法，并且在开发扩展时可能是一个很好的通用做法。

更改您在内容脚本中生成的所有html标记，例如

  • DIV
  • 一个

以及其他自定义标签，以便它永远不会与网站自己的样式定义发生冲突：

  • ADIV
  • 啊啊

然后你可以确保你从头开始你的风格，没有任何东西会被覆盖。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.