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

时间：2019-04-16 14:01:38

标签： css safari-extension

我发现Safari如何在HTML页面附带的CSS和注入的内容CSS之间对CSS进行优先级排序。我创建了一个minimal reproducible展示柜，并将其上传到GitHub。

问题如下：扩展名注入的CSS被网站本身的下层CSS规则所取代。在此屏幕快照中，div{}规则位于网站的CSS中，并且div.hello{}规则在Safari扩展程序的内容CSS中声明，并由Safari注入。

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

enter image description here

请在此处查看最小示例，或者我为一个最小的可复制示例创建的GitHub存储库：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作为最小示例。

1 个答案:

答案 0 :(得分：0)

我找到了一种对我来说足够好的解决方法，并且在开发扩展程序时可能是一种很好的常规做法。

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

  • div
  • a

和其他自定义标签，以使其永远不会与网站自身的样式定义冲突：

  • 阿迪夫
  • aa

然后，您可以确保从头开始创建样式，并且不会被覆盖。

相关问题
最新问题