Safari 扩展的内容 CSS 优先级问题
Safari extension's content CSS priority issue
我发现 Safari 如何在 HTML 页面包含的 css 和注入的内容 CSS 之间确定 CSS 的优先级存在问题。我创建了一个 minimal reproducible 展示柜并将其上传到 GitHub。
问题如下：扩展注入 CSS 被网站本身的较低层级 css 规则否决。在此屏幕截图中，div{} 规则位于网站的 CSS 内，并且 div.hello{} 规则在 Safari 扩展的内容 CSS 中声明并由 Safari 注入。
结果：
HTML 中的 div 是红色的，而不是 blue.The 屏幕截图显示 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>
通过 Safari Extension Builder 添加 showcase.safariextension 文件夹作为 Safari Extension，并打开 showcase.safari.html 作为最小示例。
我找到了一个对我来说足够好的解决方法，并且在开发扩展时可能是一个很好的通用实践。
更改您在内容脚本中生成的所有 html 标签，例如
- div
- 一个
和其他人自定义标签，这样它就不会与网站自己的样式定义冲突：
- 一个div
- aa
然后您可以确保从头开始您的样式并且不会覆盖任何内容。
我发现 Safari 如何在 HTML 页面包含的 css 和注入的内容 CSS 之间确定 CSS 的优先级存在问题。我创建了一个 minimal reproducible 展示柜并将其上传到 GitHub。
问题如下：扩展注入 CSS 被网站本身的较低层级 css 规则否决。在此屏幕截图中，div{} 规则位于网站的 CSS 内，并且 div.hello{} 规则在 Safari 扩展的内容 CSS 中声明并由 Safari 注入。
结果：
HTML 中的 div 是红色的，而不是 blue.The 屏幕截图显示 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>
通过 Safari Extension Builder 添加 showcase.safariextension 文件夹作为 Safari Extension，并打开 showcase.safari.html 作为最小示例。
我找到了一个对我来说足够好的解决方法，并且在开发扩展时可能是一个很好的通用实践。
更改您在内容脚本中生成的所有 html 标签，例如
- div
- 一个
和其他人自定义标签，这样它就不会与网站自己的样式定义冲突：
- 一个div
- aa
然后您可以确保从头开始您的样式并且不会覆盖任何内容。