feat: improve safari ux

This commit is contained in:
David Ralph
2026-01-02 23:29:34 +00:00
parent 9ac7327691
commit 8265bf06e7
19 changed files with 136 additions and 36 deletions

View File

@@ -7,9 +7,6 @@
"version": "7.1.2",
"homepage_url": "https://muetab.com",
"permissions": ["search"],
"action": {
"default_icon": "icons/128x128.png"
},
"chrome_url_overrides": {
"newtab": "index.html"
},

View File

@@ -62,8 +62,8 @@
);
explicitFolders = (
Resources/_locales,
Resources/icons,
Resources/assets,
Resources/icons,
Resources/src,
);
path = "Mue Extension";
@@ -248,19 +248,19 @@
GENERATE_INFOPLIST_FILE = YES;
INFOPLIST_FILE = "Mue Extension/Info.plist";
INFOPLIST_KEY_CFBundleDisplayName = "Mue Extension";
INFOPLIST_KEY_NSHumanReadableCopyright = "";
INFOPLIST_KEY_NSHumanReadableCopyright = "Copyright (c) 2019-2026 The Mue Authors";
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/../Frameworks",
"@executable_path/../../../../Frameworks",
);
MACOSX_DEPLOYMENT_TARGET = 10.14;
MARKETING_VERSION = 1.0;
MARKETING_VERSION = 7.1.2;
OTHER_LDFLAGS = (
"-framework",
SafariServices,
);
PRODUCT_BUNDLE_IDENTIFIER = mueauthors.mue.Extension;
PRODUCT_BUNDLE_IDENTIFIER = mueauthors.mue.extension;
PRODUCT_NAME = "$(TARGET_NAME)";
SKIP_INSTALL = YES;
STRING_CATALOG_GENERATE_SYMBOLS = YES;
@@ -282,19 +282,19 @@
GENERATE_INFOPLIST_FILE = YES;
INFOPLIST_FILE = "Mue Extension/Info.plist";
INFOPLIST_KEY_CFBundleDisplayName = "Mue Extension";
INFOPLIST_KEY_NSHumanReadableCopyright = "";
INFOPLIST_KEY_NSHumanReadableCopyright = "Copyright (c) 2019-2026 The Mue Authors";
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/../Frameworks",
"@executable_path/../../../../Frameworks",
);
MACOSX_DEPLOYMENT_TARGET = 10.14;
MARKETING_VERSION = 1.0;
MARKETING_VERSION = 7.1.2;
OTHER_LDFLAGS = (
"-framework",
SafariServices,
);
PRODUCT_BUNDLE_IDENTIFIER = mueauthors.mue.Extension;
PRODUCT_BUNDLE_IDENTIFIER = mueauthors.mue.extension;
PRODUCT_NAME = "$(TARGET_NAME)";
SKIP_INSTALL = YES;
STRING_CATALOG_GENERATE_SYMBOLS = YES;
@@ -428,6 +428,7 @@
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
CODE_SIGN_STYLE = Automatic;
COMBINE_HIDPI_IMAGES = YES;
CURRENT_PROJECT_VERSION = 1;
@@ -437,14 +438,14 @@
ENABLE_USER_SELECTED_FILES = readonly;
GENERATE_INFOPLIST_FILE = YES;
INFOPLIST_KEY_CFBundleDisplayName = Mue;
INFOPLIST_KEY_NSHumanReadableCopyright = "";
INFOPLIST_KEY_NSHumanReadableCopyright = "Copyright (c) 2019-2026 The Mue Authors";
INFOPLIST_KEY_NSMainStoryboardFile = Main;
INFOPLIST_KEY_NSPrincipalClass = NSApplication;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/../Frameworks",
);
MARKETING_VERSION = 1.0;
MARKETING_VERSION = 7.1.2;
OTHER_LDFLAGS = (
"-framework",
SafariServices,
@@ -468,6 +469,7 @@
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
CODE_SIGN_STYLE = Automatic;
COMBINE_HIDPI_IMAGES = YES;
CURRENT_PROJECT_VERSION = 1;
@@ -477,14 +479,14 @@
ENABLE_USER_SELECTED_FILES = readonly;
GENERATE_INFOPLIST_FILE = YES;
INFOPLIST_KEY_CFBundleDisplayName = Mue;
INFOPLIST_KEY_NSHumanReadableCopyright = "";
INFOPLIST_KEY_NSHumanReadableCopyright = "Copyright (c) 2019-2026 The Mue Authors";
INFOPLIST_KEY_NSMainStoryboardFile = Main;
INFOPLIST_KEY_NSPrincipalClass = NSApplication;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/../Frameworks",
);
MARKETING_VERSION = 1.0;
MARKETING_VERSION = 7.1.2;
OTHER_LDFLAGS = (
"-framework",
SafariServices,

View File

@@ -1,51 +1,61 @@
{
"images" : [
{
"filename" : "icon_16x16.png",
"idiom" : "mac",
"scale" : "1x",
"size" : "16x16"
},
{
"filename" : "icon_16x16@2x.png",
"idiom" : "mac",
"scale" : "2x",
"size" : "16x16"
},
{
"filename" : "icon_32x32.png",
"idiom" : "mac",
"scale" : "1x",
"size" : "32x32"
},
{
"filename" : "icon_32x32@2x.png",
"idiom" : "mac",
"scale" : "2x",
"size" : "32x32"
},
{
"filename" : "icon_128x128.png",
"idiom" : "mac",
"scale" : "1x",
"size" : "128x128"
},
{
"filename" : "icon_128x128@2x.png",
"idiom" : "mac",
"scale" : "2x",
"size" : "128x128"
},
{
"filename" : "icon_256x256.png",
"idiom" : "mac",
"scale" : "1x",
"size" : "256x256"
},
{
"filename" : "icon_256x256@2x.png",
"idiom" : "mac",
"scale" : "2x",
"size" : "256x256"
},
{
"filename" : "icon_512x512.png",
"idiom" : "mac",
"scale" : "1x",
"size" : "512x512"
},
{
"filename" : "icon_512x512@2x.png",
"idiom" : "mac",
"scale" : "2x",
"size" : "512x512"

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 804 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 KiB

View File

@@ -80,7 +80,7 @@
<window key="window" title="Mue" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" restorable="NO" releasedWhenClosed="NO" animationBehavior="default" id="IQv-IB-iLA">
<windowStyleMask key="styleMask" titled="YES" closable="YES"/>
<windowCollectionBehavior key="collectionBehavior" fullScreenNone="YES"/>
<rect key="contentRect" x="196" y="240" width="425" height="325"/>
<rect key="contentRect" x="196" y="240" width="600" height="500"/>
<rect key="screenRect" x="0.0" y="0.0" width="1680" height="1027"/>
<connections>
<outlet property="delegate" destination="B8D-0N-5wS" id="98r-iN-zZc"/>
@@ -99,11 +99,11 @@
<objects>
<viewController id="XfG-lQ-9wD" customClass="ViewController" customModule="Mue" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" id="m2S-Jp-Qdl">
<rect key="frame" x="0.0" y="0.0" width="425" height="325"/>
<rect key="frame" x="0.0" y="0.0" width="600" height="500"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<wkWebView wantsLayer="YES" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="eOr-cG-IQY">
<rect key="frame" x="0.0" y="0.0" width="425" height="325"/>
<rect key="frame" x="0.0" y="0.0" width="600" height="500"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<wkWebViewConfiguration key="configuration">
<audiovisualMediaTypes key="mediaTypesRequiringUserActionForPlayback" none="YES"/>

View File

@@ -2,18 +2,30 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../Style.css">
<script src="../Script.js" defer></script>
</head>
<body>
<img src="../Icon.png" width="128" height="128" alt="Mue Icon">
<p class="state-unknown">You can turn on Mues extension in Safari Extensions preferences.</p>
<p class="state-on">Mues extension is currently on. You can turn it off in Safari Extensions preferences.</p>
<p class="state-off">Mues extension is currently off. You can turn it on in Safari Extensions preferences.</p>
<button class="open-preferences">Quit and Open Safari Extensions Preferences…</button>
<div class="gradient-bg"></div>
<div class="content">
<img src="../Icon.png" width="128" height="128" alt="Mue Icon">
<h1 class="title">Mue</h1>
<p class="subtitle">Fast, open and free-to-use new tab page</p>
<div class="status-container">
<p class="state-unknown">Enable Mue in Safari Extensions preferences to get started.</p>
<p class="state-on">✓ Extension is enabled and ready to use!</p>
<p class="state-off">Extension is disabled. Enable it in Safari Extensions preferences.</p>
</div>
<button class="open-preferences">Open Safari Extensions Preferences</button>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -1,9 +1,9 @@
function show(enabled, useSettingsInsteadOfPreferences) {
if (useSettingsInsteadOfPreferences) {
document.getElementsByClassName('state-on')[0].innerText = "Mues extension is currently on. You can turn it off in the Extensions section of Safari Settings.";
document.getElementsByClassName('state-off')[0].innerText = "Mues extension is currently off. You can turn it on in the Extensions section of Safari Settings.";
document.getElementsByClassName('state-unknown')[0].innerText = "You can turn on Mues extension in the Extensions section of Safari Settings.";
document.getElementsByClassName('open-preferences')[0].innerText = "Quit and Open Safari Settings";
document.getElementsByClassName('state-on')[0].innerText = "Extension is enabled and ready to use!";
document.getElementsByClassName('state-off')[0].innerText = "Extension is disabled. Enable it in Safari Settings.";
document.getElementsByClassName('state-unknown')[0].innerText = "Enable Mue in Safari Settings to get started.";
document.getElementsByClassName('open-preferences')[0].innerText = "Open Safari Settings";
}
if (typeof enabled === "boolean") {

View File

@@ -2,12 +2,16 @@
-webkit-user-select: none;
-webkit-user-drag: none;
cursor: default;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
color-scheme: light dark;
--spacing: 20px;
--text-color: #ffffff;
--shadow: 0 4px 20px rgb(0 0 0 / 30%);
--background-color: #0A0A0A;
}
html {
@@ -15,17 +19,71 @@ html {
}
body {
height: 100%;
margin: 0;
overflow: hidden;
font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background-color);
z-index: -1;
}
.content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: var(--spacing);
margin: 0 calc(var(--spacing) * 2);
gap: calc(var(--spacing) * 0.5);
height: 100%;
font: -apple-system-short-body;
text-align: center;
color: var(--text-color);
padding: var(--spacing);
}
img {
filter: drop-shadow(var(--shadow));
margin-bottom: 5px;
}
.title {
font-size: 3em;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
letter-spacing: -0.5px;
}
.subtitle {
font-size: 1.2em;
font-weight: 400;
margin: 0;
opacity: 0.95;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.status-container {
margin: 10px 0;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.status-container p {
font-size: 1.1em;
margin: 0;
padding: 12px 24px;
background: #fff;
color: #000;
border-radius: 12px;
box-shadow: var(--shadow);
}
body:not(.state-on, .state-off) :is(.state-on, .state-off) {
@@ -41,5 +99,26 @@ body.state-off :is(.state-on, .state-unknown) {
}
button {
font-size: 1em;
font-size: 1.1em;
font-weight: 600;
padding: 12px 28px;
background: #fff;
color: #000;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow);
margin-top: 5px;
}
button:hover {
background: #f0f0f0;
transform: translateY(-2px);
box-shadow: 0 6px 25px rgb(0 0 0 / 40%);
}
button:active {
transform: translateY(0);
box-shadow: var(--shadow);
}

View File

@@ -9,7 +9,7 @@ import Cocoa
import SafariServices
import WebKit
let extensionBundleIdentifier = "mueauthors.Mue.Extension"
let extensionBundleIdentifier = "mueauthors.mue.Extension"
class ViewController: NSViewController, WKNavigationDelegate, WKScriptMessageHandler {