Article

Injecting CSS Style Sheets into a Webpage

Add to or override styles by injecting CSS style sheets into webpages.

Overview

After you've written a style sheet that can modify page presentation, you need to add it to your Safari App Extension and apply it to webpages.

A style sheet can apply to a single webpage, all webpages, or only some webpages—for example, webpages from certain domains. For your style sheet to be injected, you must specify either Some or All website access for your app extension. For details, see Access and Permissions. For more about injected style sheets, see About Injected Style Sheets and Scripts.

Add a Style Sheet

After specifying website access, add the style sheet to your Safari App Extension.

  1. Add the CSS files to your extension’s Xcode target.

  2. Add an SFSafariStyleSheet key to the NSExtension element in your extension’s Info.plist file. The value for this key is an array of dictionaries.

  3. For each CSS file, add a dictionary to this array. Each dictionary must have a Style Sheet key whose value specifies the path (relative to the Resources directory of the bundle) to the style sheet to include.

You can have more than one injected style sheet. Style sheets are processed in the order in which they’re specified.

Your style sheet can reference resources in your app extension’s bundle. All relative URLs are relative to the Resources folder in the app extension’s bundle.

See Also

Injecting Scripts and Style Sheets

About Injected Style Sheets and Scripts

Learn how you can affect the appearance or behavior of a webpage by using injected style sheets and scripts.

Injecting a Script into a Webpage

Inject a script that you've written from a Safari App Extension into a webpage.

Passing Messages Between Safari App Extensions and Injected Scripts

Pass data back and forth between Safari App Extension and injected scripts.

class SFSafariExtensionHandler

A base class that you subclass to handle events in your Safari app extension.

class SFSafariExtensionManager

A class used by your app to find out the current state of a Safari app extension.

class SFSafariExtensionState

The state of a Safari app extension.

class SFSafariPageProperties

Information about a webpage.

protocol SFSafariExtensionHandling

A protocol used to implement event handling in a Safari app extension.