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

转载作者：行者123 更新时间：2023-11-28 00:05:47

26

4

我发现 Safari 如何在 HTML 页面包含的 CSS 和注入(inject)的内容 CSS 之间确定 CSS 的优先级存在问题。我创建了一个 minimal reproducible展示并上传到 GitHub。

问题如下:扩展注入(inject)的 CSS 被来自网站本身的较低层次的 css 规则所否决。在此屏幕截图中，div{} 规则在网站的 CSS 中，div.hello{} 规则在 Safari 扩展的内容 CSS 中声明并由 Safari 注入(inject)。

结果: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 扩展注入(inject)的 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 标签，例如

分区
一个

和其他人自定义标签，这样它就不会与网站自己的样式定义冲突:

广告
一个

然后您可以确保从头开始您的样式并且不会覆盖任何内容。

关于css - Safari 扩展的内容 CSS 优先级问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55710055/

26

4

0

文章推荐： c++ - 指针和引用传递 C++

文章推荐： c++ - 使用来自 std::map 的数据填充 QML ListView

文章推荐： c++ - 包含头文件和 C++ 文件有什么区别？

文章推荐： c++ - 继承抛出的纯虚函数

Java 优先级
int x = 1; System.out.println( x++ + x++ * --x ); 上面的代码打印出“5”，但我不明白怎么办？我一直为最后一个 x 取零，然后乘以仍然为 0 的第二个
java - 优先级
我现在正在尝试使用 Preference 类首选项 pfrOfThis = Preferences.userNodeForPackage(this) 出现错误: “类 java.util.prefs
Python 优先级
用下面的代码 import sys print "Hello " + sys.argv[1] if len(sys.argv) > 1 else "Joe" + "." 当我运行时 python he
CSS 优先级
我的网页包含: td { padding-left:10px; } 引用的样式表包含: .rightColumn * {margin: 0; padding: 0;} 我在 rightc
JPA CascadeType 优先级？
使用 JPA 我有一个关于 CascadeTypes 的问题。例如: @ManyToMany(fetch=FetchType.LAZY, cascade={CascadeType.PERSIST,
隐含点和括号的 Scala 优先级
下面的“括号”是怎么写的？ val words = List("foo", "bar", "baz") val phrase = "These are upper case: " + words ma
c - 运算符结合性，优先级
我只是想知道，对于以下代码，编译器是否单独使用关联性/优先级或其他一些逻辑来评估。 int i = 0, k = 0; i = k++; 如果我们根据关联性和优先级进行评估，postfix ++具有比
Azure FrontDoor 优先级
我设置了一个 Azure FrontDoor 服务，以主/备份类型的方式将流量分配给两个 API 管理服务。就像我希望所有流量都流向我的主要 APIM 服务一样，如果我碰巧关闭该服务(假装中断)，那么
css - 媒体查询逻辑(优先级)
这是一个简单的 CSS: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-devi
Azure FrontDoor 优先级
我设置了一个 Azure FrontDoor 服务，以主/备份类型的方式将流量分配给两个 API 管理服务。就像我希望所有流量都流向我的主要 APIM 服务一样，如果我碰巧关闭该服务(假装中断)，那么
Perl:优先级(左列表运算符)
来自 Programming Perl pg 90，他说: @ary = (1, 3, sort 4, 2); print @ary; 排序右侧的逗号在排序之前求值，而左侧的逗号在排序之
Sqlite GROUP BY 优先级
+----+------------+------+ | id | title | lang | +----+------------+------+ | 1 | title 1 EN |
java - DSCP 优先级
如何使用 Java 获取 DiffServe 代码点 (DSCP) 整数的优先级部分？我预计它涉及位移位，但由于某种原因，我似乎无法获得我期望的值。最佳答案假设我理解正确，只需向右执行 3 位逻辑
jquery - $.ajax()优先级
我有下一个运行良好的 js 函数: $(function () { $(".country").click(function () { var countries = Arra
c++ - 取消引用和后缀++优先级
int a[3]={10,20,30}; int* p = a; cout << *p++ << endl; 根据 wikipedia ，后缀++的优先级高于解引用，*p++应该先运行p++再解引用结
通过归档的 C++ 优先级
我想在优先读取归档后解决这种类型的表达式 2+3/5*9+3-4 这是我尝试解决该任务的代码我该如何解决这个问题 while ( !inputFile.eof() ) { getline( inp
括号的 Javascript 优先级
我正在玩 Rhino 并注意到这种奇怪的行为似乎是运算符优先级: js> {}+{} NaN js> ''+{}+{} [object Object][object Object] js> ''+({
具有复合表达式的 bash 优先级
我想遍历文件列表并检查它们是否存在，如果文件不存在则给出错误并退出。我写了下面的代码: FILES=( file1.txt file2.txt file3.txt ) for file in ${FI
mysql - 合并多个级联选择，优先级
我正在执行级联 SELECT: SELECT * FROM x WHERE a = 1 AND b = 2 AND c = 3 => If nothing found, try: SELECT * F
CSS 优先级——哪一个优先？
即将参加考试，我正在参加之前的考试。问题: 当两个或多个样式表规则应用于同一元素时，以下哪种类型的规则将优先？一个。任何来自浏览器的声明 b.有用户来源的正常声明 C。作者来源正常声明 d.文档级

首页

博学

6Ren·AI