Alle Bilder in Safari unkenntlich machen, sofern nicht angeklickt

Ich weiß, dass ich im Menü „Entwickeln“ alle Bilder in Safari blockieren kann, aber ich habe noch ein paar weitere Anforderungen:

  • Alle Bilder von allen Webseiten unkenntlich machen, nicht blockieren
  • Klicken Sie hier, um unscharfe Bilder anzuzeigen

Ich mag es nicht, Bilder standardmäßig zu sehen, möchte aber dennoch die Möglichkeit behalten, sie selektiv „einzublenden“. Das Verwischen des Bildes macht den Auswahlprozess (welches angezeigt werden soll) viel einfacher.

Gibt es eine Möglichkeit, dies in Safari zu tun? Vielleicht als Erweiterung?

Als Bonus wäre es großartig, wenn es eine Möglichkeit gäbe, eine Reihe von Bildern oder Websites (z. B. die Abstimmungsschaltflächen in Stackexchange) auf die Whitelist zu setzen.

Diese Chrome-Erweiterung kommt näher (verwischt nicht, zeigt aber farbige Kästchen an Ort und Stelle).

Antworten (3)

Der folgende Ansatz kommt dem ziemlich nahe, deckt aber Bilder, die als Hintergrund eingestellt sind, nicht ab (und kann es auch nicht). Es kann auch das Laden der Seite etwas verlangsamen.

Das Ziel ist es, benutzerdefiniertes CSS in die Seite einzufügen. Ich werde dafür das Add-On Stylish verwenden ( theoretisch könnte man es ohne externe Add-Ons machen, aber man braucht dafür eine kostenlose Safari-Entwickler-ID - siehe hier - ich habe mich geirrt, siehe Antwort von @markhunte). Nach der Installation von Stylish sehen Sie neben dem URL-Feld einen großen „S“-Button. Klicken Sie darauf und wählen Sie „Verwalten“. Wählen Sie auf der neuen Registerkarte „Bearbeiten“, um einen neuen Stil zu erstellen. Geben Sie ihm einen Titel (z. B. „Unscharfe Bilder“) und fügen Sie das folgende CSS in das Feld „CSS“ ein:

img {
  -webkit-filter: blur(10px);
}
img:active {
  -webkit-filter: blur(0px);
}

Wählen Sie unter „Applies to:“ „Global“ (wenn Sie möchten, können Sie es auf bestimmte URLs, URL-Präfixe, Domains usw. eingrenzen) und speichern Sie dann den Stil, um ihn zu aktivieren.

Wenn Sie eine Webseite laden, werden alle Bilder (außer Hintergrundbilder) unkenntlich gemacht. Wenn Sie auf ein Bild klicken, wird es unscharf gemacht, solange Sie die Maustaste gedrückt halten. Sie können den Grad der Unschärfe anpassen, indem Sie den Pixelwert im ersten Selektor bearbeiten, während der zweite Selektor das Bild unscharf macht.

Das ist alles, was Sie in einfachem CSS tun können. Wenn Sie eine selektive Whitelist wünschen, die über Sitzungen hinweg bestehen bleibt, müssen Sie auf jeden Fall Ihre eigenen Erweiterungen schreiben. Dies läuft immer noch auf die Anwendung des oben geposteten CSS hinaus, aber die Whitelist und der „Click-to-Add“-Teil sind möglicherweise etwas komplizierter, und ich habe nicht genug Erfahrung, um Ihnen in diesem Fall eine hilfreiche Antwort zu geben.

Das ist fantastisch, und es funktioniert. Wie Sie bereits erwähnt haben, ist die Leistung jedoch ziemlich schlecht, wenn ich dies tue. Nachdem beispielsweise die reddit.com-Startseite in einem neuen Tab angezeigt wurde, ging die CPU-Auslastung dieses Tabs allein auf 25-40 % auf einem modernen Macbook Pro zurück. Das Laden von Seiten fühlt sich auch träge an.
FWIW, dies ohne Stylish (per @markhunte unten) zu tun, half auch nicht bei der Leistung. Vielleicht können wir bei der Weichzeichnungsanforderung einen Kompromiss eingehen, indem wir das CSS Bilder durch eindeutige Muster ersetzen lassen (kein Weichzeichnen von irgendetwas), ähnlich wie diese Chrome-Erweiterung ?
Die einzigen Dinge, die Leistungsprobleme verursachen, wären der Unschärfeeffekt und die Stylish-Erweiterung. Die Unschärfe ist die größte. Ich würde vorschlagen, opacity: 0.1stattdessen CSS zu verwenden, da es viel weniger CPU-intensiv sein sollte. Das Ersetzen des Bildes selbst erfordert eine JS-basierte Lösung.
@Teak - Ja, opacityverschlechtert die Leistung nicht - obwohl Unschärfe ideal ist, um die Details des Bildes zu verbergen. Danke für die Antwort.

Dies ist eine Ergänzung zu @ thees Antwort.

Sie können den CSS-Code in ihre Antwort ohne Apps von Drittanbietern oder eine Entwickler-ID einfügen.

Erstellen Sie eine CSS-Datei, indem Sie den Code als einfachen Text in eine Textdatei einfügen. Sie können dazu TextEdit.app verwenden. Speichern Sie die Datei als .css

Geben Sie hier die Bildbeschreibung ein

Gehen Sie dann in Safari zu Einstellungen> Registerkarte Erweitert. Navigieren Sie mithilfe des Dropdown-Menüs> Andere ... der Stylesheet- Option zu Ihrer Datei und wählen Sie sie aus.

Geben Sie hier die Bildbeschreibung ein

Safari nimmt das Stylesheet sofort auf und beginnt damit, es zu verwenden.

@klanomath. Danke, dass du diesen Miss Credit aufgefangen hast. :-)
Guter Fang, das wusste ich nicht. Ich habe meine Antwort (kurz) bearbeitet, um diese Möglichkeit widerzuspiegeln.
Ich denke, ein Nachteil dieser einfacheren Lösung ist, dass sie das CSS zwangsweise auf alle Websites ohne Wahl (über Whitelist/Blacklist) anwendet.

img:hover { opacity: 1; }

Auf diese Weise können Sie einfach mit der Maus über das Bild fahren, damit es angezeigt wird. Es hat nur minimale Auswirkungen auf die Ressourcen und Sie haben kein Problem, wenn das Klicken auf ein Bild eine Aktion ausführt, die Sie möglicherweise nicht möchten.

+1 Ich kam gerade zurück, um img: hover hinzuzufügen, das besser funktioniert als Active. Und sehen Sie, dass Sie es hier aus dem gleichen Grund verwenden, aus dem ich es hinzufügen wollte
Alle Bilder in Safari unkenntlich machen, sofern nicht angeklickt
AntwortenHierDatenschutz-Bestimmungen1y, 0v