Is CSS injection possible on iPad using Safari?

Question

There is a possibility to use a custom style sheet in Safari on Mac to inject CSS syntax that changes the rendered output of web pages.

I’m seeking a similar tool for iPad and iPadOS.

Is there any way to use CSS injection in Safari or other browsers on the iPad?

Answer 1

To inject a custom CSS into a webpage on iPad you can use the app Shortcuts. First, you need to create a new shortcut:

1. Open Shortcuts

2. Select Create Shortcut > Web > Run JavaScript on Web Page

3. Use the following JavaScript:

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('body { color: red !important }');
addStyleString('body { background: silver !important }');
// This way allows you to add CSS in multiple passes


// Call completion to finish
completion();

4. Tap Next

5. Add the Shortcut Name

To apply a custom CSS you need to run the shortcut in Safari:

1. Open a web page in Safari

2. Tap on the share button

3. Scroll all the way down and tap on the newly created shortcut.

HINT: Use !important in CSS injections to override default rules.