Add drawsBackground parameter for WKWebView

PreviewExtension/Configuration.swift

@@ -13,6 +13,7 @@ struct Configuration {
   var loadingStrategy: LoadingStrategy
   var pageURL: URL
   var preferredContentSize: NSSize?
+  var transparentBackground: Bool
 }
 
 extension Configuration {
@@ -44,10 +45,13 @@ extension Configuration {
       throw GenericError(message: "Invalid loadingStrategy “\(strategyStr)” in QLJS configuration")
     }
 
+    let transparentBackground = (dict["transparentBackground"] as? Bool) ?? false
+
     return Configuration(
       loadingStrategy: loadingStrategy,
       pageURL: pageURL,
-      preferredContentSize: preferredContentSize
+      preferredContentSize: preferredContentSize,
+      transparentBackground: transparentBackground
     )
   }
 }

PreviewExtension/Info.plist

@@ -53,6 +53,8 @@
 		<string>preview.html</string>
 		<key>preferredContentSize</key>
 		<string>{500,300}</string>
+		<key>transparentBackground</key>
+		<false/>
 	</dict>
 </dict>
 </plist>

PreviewExtension/PreviewViewController.swift

@@ -57,10 +57,24 @@ private func makeMouseEvent(_ type: NSEvent.EventType, at location: NSPoint, in
   )
 }
 
+class TransparentWebView: WKWebView {
+  func enableTransparentBackground() {
+    setValue(false, forKey: "drawsBackground")
+  }
+
+  // Try to avoid crashing if this drawsBackground hack stops working in a future macOS version
+  override func setValue(_ value: Any?, forUndefinedKey key: String) {
+    if key == "drawsBackground" {
+      return
+    }
+    super.setValue(value, forUndefinedKey: key)
+  }
+}
+
 class PreviewViewController: NSViewController, QLPreviewingController, WKUIDelegate, WKNavigationDelegate,
   WKScriptMessageHandlerWithReply
 {
-  let webView: WKWebView
+  let webView: TransparentWebView
   let configuration: Configuration
 
   var cancellables = Set<AnyCancellable>()
@@ -79,7 +93,7 @@ class PreviewViewController: NSViewController, QLPreviewingController, WKUIDeleg
     assert(promise != nil)
     loadCompletePromise = promise
 
-    webView = WKWebView(frame: .zero)
+    webView = TransparentWebView(frame: .zero)
 
     do {
       configuration = try Configuration.fromMainBundle()
@@ -88,6 +102,10 @@ class PreviewViewController: NSViewController, QLPreviewingController, WKUIDeleg
       fatalError("Unable to load QuickLookJS configuration: \(error.localizedDescription)")
     }
 
+    if configuration.transparentBackground {
+      webView.enableTransparentBackground()
+    }
+
     super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
     if let size = configuration.preferredContentSize {
       preferredContentSize = size

README.md

@@ -101,6 +101,8 @@ You can customize some of the preview extension's behaviors by editing the `QLJS
 
 - **`preferredContentSize`** (optional): a string specifying the size of the preview window. In the example Info.plist this is `{500,300}`.
 
+- **`transparentBackground`** (optional): a boolean specifying whether the web view should have a transparent background. This relies on undocumented APIs, so use it with caution.
+
 ## 🧠 Behind the scenes
 
 Under the hood, quicklookjs loads your preview page in a [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview), and the `quicklook` functions are provided in a user script.