Safari Extension CSS Injection not loading - xcode

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