Safari 扩展 CSS 注入未加载

Question

我从头开始在 XCode 中构建了一个 Safari 扩展。主要目标是在观看某些内容时隐藏 YouTube 上的视频推荐 - 我想我可以使用一些 css 属性来做到这一点。

\n\n

出于测试目的，我添加了一些更多的样式修改。

\n\n

/* Testing */\nbody {\n    background: red !important;\n    color: blue !important;\n}\n\n/* Hide column with video recommendations */\n#secondary {\n    display: none !important;\n}\n

\n\n

由于某种原因，我保存在 nostyle.css 中的这些 css 属性不会影响站点。

\n\n

我尽可能严格地遵循有关注入 CSS 样式表的Apple 指南，主要是通过编辑 Info.plist 文件：

\n\n

\n
• 我在 NSExtension -> SFSafariStyleSheet -> Array -> Dictionary 中添加了 css 文件作为引用，其中包含键Style Sheet（注意空格）和值nostyle.css（与项目默认设置一起提供的与“script.js”位于同一目录中的文件）
\n
• 我添加*.youtube.com到允许的域列表中（以及用于测试目的的其他 URL）
\n

\n\n

我使用 script.js 文件在控制台中输出消息，尽管速度有些不一致。

\n\n

我没有碰过任何其他文件（除了我添加了一些图标Assets.xcassets）。下面显示了Extension 文件夹中 Info.plist 文件的完整内容。它还包含一个工具栏项 ( SFSafariToolbarItem)，该项目出现在 Safari 的菜单栏中，但单击时不执行任何操作（按预期）。

\n\n

<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">\n<plist version="1.0">\n<dict>\n    <key>CFBundleDevelopmentRegion</key>\n    <string>$(DEVELOPMENT_LANGUAGE)</string>\n    <key>CFBundleDisplayName</key>\n    <string>DistractionFreeYouTube Extension</string>\n    <key>CFBundleExecutable</key>\n    <string>$(EXECUTABLE_NAME)</string>\n    <key>CFBundleIdentifier</key>\n    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>\n    <key>CFBundleInfoDictionaryVersion</key>\n    <string>6.0</string>\n    <key>CFBundleName</key>\n    <string>$(PRODUCT_NAME)</string>\n    <key>CFBundlePackageType</key>\n    <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>\n    <key>CFBundleShortVersionString</key>\n    <string>1.0</string>\n    <key>CFBundleVersion</key>\n    <string>1</string>\n    <key>LSMinimumSystemVersion</key>\n    <string>$(MACOSX_DEPLOYMENT_TARGET)</string>\n    <key>NSExtension</key>\n    <dict>\n        <key>SFSafariStyleSheet</key>\n        <array>\n            <dict>\n                <key>Style Sheet</key>\n                <string>nostyle.css</string>\n            </dict>\n        </array>\n        <key>NSExtensionPointIdentifier</key>\n        <string>com.apple.Safari.extension</string>\n        <key>NSExtensionPrincipalClass</key>\n        <string>$(PRODUCT_MODULE_NAME).SafariExtensionHandler</string>\n        <key>SFSafariContentScript</key>\n        <array>\n            <dict>\n                <key>Script</key>\n                <string>script.js</string>\n            </dict>\n        </array>\n        <key>SFSafariToolbarItem</key>\n        <dict>\n            <key>Action</key>\n            <string>Command</string>\n            <key>Identifier</key>\n            <string>Button</string>\n            <key>Image</key>\n            <string>ToolbarItemIcon.pdf</string>\n            <key>Label</key>\n            <string>Distraction Free</string>\n        </dict>\n        <key>SFSafariWebsiteAccess</key>\n        <dict>\n            <key>Allowed Domains</key>\n            <array>\n                <string>*.youtube.com</string>\n            </array>\n            <key>Level</key>\n            <string>Some</string>\n        </dict>\n    </dict>\n    <key>NSHumanReadableCopyright</key>\n    <string>Copyright \xc2\xa9 2020 (my name). All rights reserved.</string>\n    <key>NSHumanReadableDescription</key>\n    <string>This extension hides the column of recommended videos when watching YouTube videos.</string>\n</dict>\n</plist>\n

\n\n

这是我的工作区的屏幕截图。

\n\n

\n

Answer 1

检查应用程序扩展中的manifest.json文件，确保键“ content_scripts ”具有您需要的css文件：

\n

"content_scripts": [{\n    "css": ["nostyle.css"],\n    "js": [ "script.js" ],\n    "matches": [ "*://*.youtube.com/*" ],\n}],\n

\n

苹果文档中没有提到\xc2\xa0，而是MDN WebExtensions Doc

\n