问题描述

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

问题如下：扩展注入的 CSS 被网站本身的低层次 CSS 规则所推翻。在这个截图div{}中，规则在网站的 CSS 中，并且div.hello{}规则在 Safari 扩展的内容 CSS 中声明并由 Safari 注入。

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

请在此处查看最小示例，或我为最小可重现示例创建的 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>

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

标签： csssafari-extension

css - Safari 扩展的内容 CSS 优先级问题