Safari Extension CSS Injection not loading

Question

I built a Safari Extension in XCode from scratch. The main goal was to hide the video recommendations on YouTube when watching something - I figured I could do that using some css properties.

For testing purposes, I included some more style modifications.

/* Testing */
body {
    background: red !important;
    color: blue !important;
}

/* Hide column with video recommendations */
#secondary {
    display: none !important;
}

For some reason these css properties, which I saved in nostyle.css, do not affect the site.

I followed the Apple Guide on injecting CSS Style Sheets as closely as I could, mainly by editing the Info.plist file:

• I added the css file as a reference in NSExtension -> SFSafariStyleSheet -> Array -> Dictionary with Key Style Sheet (notice the space) and value nostyle.css (a file in the same directory as "script.js" that came together with the project default setup)
• I added *.youtube.com to the list of allowed domains (among other URLs for testing purposes)

I got the script.js file to output messages in my console, although at a somewhat inconsistent rate.

I have not touched any other files (except I added some Icons to Assets.xcassets). The following shows the full content of my Info.plist file inside the Extension folder. It also contains a Toolbar Item (SFSafariToolbarItem) that appears in the menu bar in Safari but doesn't do anything on click (as intended).

<?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>CFBundleDevelopmentRegion</key>
    <string>$(DEVELOPMENT_LANGUAGE)</string>
    <key>CFBundleDisplayName</key>
    <string>DistractionFreeYouTube Extension</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSMinimumSystemVersion</key>
    <string>$(MACOSX_DEPLOYMENT_TARGET)</string>
    <key>NSExtension</key>
    <dict>
        <key>SFSafariStyleSheet</key>
        <array>
            <dict>
                <key>Style Sheet</key>
                <string>nostyle.css</string>
            </dict>
        </array>
        <key>NSExtensionPointIdentifier</key>
        <string>com.apple.Safari.extension</string>
        <key>NSExtensionPrincipalClass</key>
        <string>$(PRODUCT_MODULE_NAME).SafariExtensionHandler</string>
        <key>SFSafariContentScript</key>
        <array>
            <dict>
                <key>Script</key>
                <string>script.js</string>
            </dict>
        </array>
        <key>SFSafariToolbarItem</key>
        <dict>
            <key>Action</key>
            <string>Command</string>
            <key>Identifier</key>
            <string>Button</string>
            <key>Image</key>
            <string>ToolbarItemIcon.pdf</string>
            <key>Label</key>
            <string>Distraction Free</string>
        </dict>
        <key>SFSafariWebsiteAccess</key>
        <dict>
            <key>Allowed Domains</key>
            <array>
                <string>*.youtube.com</string>
            </array>
            <key>Level</key>
            <string>Some</string>
        </dict>
    </dict>
    <key>NSHumanReadableCopyright</key>
    <string>Copyright © 2020 (my name). All rights reserved.</string>
    <key>NSHumanReadableDescription</key>
    <string>This extension hides the column of recommended videos when watching YouTube videos.</string>
</dict>
</plist>

Here's a screenshot of my workspace.

Answer 1

check the manifest.json file in your app extension, make sure the key "content_scripts" has the css file you need:

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

And this is not mentioned in Apple documents but MDN WebExtensions Doc