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

polhcujo 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(129)

我发现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不包含此类声明。

请看这里的最小示例，或者我创建的GitHub repo作为最小可复制示例：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;
}

一米七六

这是通过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扩展构建器添加showcase.safariextension文件夹作为Safari扩展，并打开showcase.safari.html作为最小示例。

css

来源：https://stackoverflow.com/questions/55710055/safari-extensions-content-css-priority-issue

2条答案

按热度按时间

qnakjoqk1#

我找到了一个对我来说足够好的变通方法，并且可能是开发扩展时的一个很好的通用实践。

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

分度
项目a

和其他来定制标签，这样它就永远不会与网站自己的样式定义冲突：

阿迪夫
aa

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

赞(0）回复(0）举报 2023-03-14

3vpjnl9f2#

我也发现这个问题建设Safari扩展。
我找到了两个解决方案：
1.将!important添加到所有内容中。下面是一个插件的例子：Polyglot
1.将CSS与.js文件捆绑在一起，并在加载Dom后将其插入到一个内嵌的样式标签中（Safari将把您的CSS与网站自己的CSS一样对待，并遵守特定性顺序规则）：
使用Webpack和'style-loader'我配置了我的webpack.config.js：

const insertAtTop = (element) => {
  if (window.top === window) {
    document.addEventListener('DOMContentLoaded', () => {    
      var parent = document.querySelector("head");
      var lastInsertedElement =
        window._lastElementInsertedByStyleLoader;

      if (!lastInsertedElement) {
        parent.insertBefore(element, parent.firstChild);
      } else if (lastInsertedElement.nextSibling) {
        parent.insertBefore(element, lastInsertedElement.nextSibling);
      } else {
        parent.appendChild(element);
      }

      window._lastElementInsertedByStyleLoader = element;
    })
  }
};

...

module: {
  rules: [
    ....
    {
      test: /\.css$/i,
      use: [
        {
          loader: "style-loader",
          options: {
            insert: insertAtTop,
          },
        },
        "css-loader",
      ],
      exclude: /node_modules/
    }
  }
}

然后在JS/ TSX / TS文件中导入CSS文件：

import '../Resources/style.css';

尽管这原则上可以手动地或不用webpack来实现。
注：使用此方法时，无需通过info.plist中的SFSafariStyleSheet键导入，因此将其从此处删除。

赞(0）回复(0）举报 2023-03-14

我来回答