Search code examples
csssafari-extension

Safari extension's content CSS priority issue

I found a problem with how Safari prioritises CSS between the css included with the HTML page and the injected content CSS. I created a minimal reproducible showcase and uploaded it to GitHub.

The issue is as follows: Extension-injected CSS is overruled by lower-hierarchy css rules from the website itself. In this screenshot div{} rule is within the website's CSS, and div.hello{} rule is declared in the Safari extension's content CSS and injected by Safari.

Result: The div in the HTML is red, instead of blue.The screenshot shows that Safari uses div{} with higher priority over div.hello{}. Please note, that initial rules are added by Safari automatically. The content CSS doesn't include such declaration.

enter image description here

Please see minimal example here, or the GitHub repo I created for a minimal reproducible example: https://github.com/MikeSpock/safari-extension-css-bug

How to create stable CSS for the markup I add to websites via my Safari extension, seeing that every CSS within the website overrules the CSS from the extension? This is not how Chrome extension work for example, it works as you might expect, handling CSS priorities correctly.

Minimal viable example:

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

This is the css injected via a Safari extension

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>

Add showcase.safariextension folder as a Safari Extension via Safari Extension Builder, and open showcase.safari.html for a minimal example.

Solution

  • I found a workaround that was good enough for me, and possibly a good general practice when developing extensions.

    Change all your html tags you generate in your content script such as

    • div
    • a

    and others to custom tags, so that it would never collide with the website's own style definitions:

    • adiv
    • aa

    Then you can make sure you start your styles from scratch and nothing would be overridden.