Skip to content

Instantly share code, notes, and snippets.

@atnbueno

atnbueno/shortcut-preview.user.js

Last active June 1, 2023 18:49
Show Gist options
  • Save atnbueno/cb8f429759136fbc569a63703b0f103e to your computer and use it in GitHub Desktop.
Save atnbueno/cb8f429759136fbc569a63703b0f103e to your computer and use it in GitHub Desktop.
Download ZIP
Greasemonkey: Add "Preview" button to iOS shortcut's iCloud links, linking to showcuts.app, and fixes the icon CSP bug
Raw
shortcut-preview.user.js
// ==UserScript==
// @name iOS Shortcut Preview
// @namespace https://www.atnbueno.com/
// @match https://showcuts.app/share/view
// @match https://www.icloud.com/shortcuts/*
// @version 2.0
// @grant GM_addStyle
// ==/UserScript==
/*
* Version 2.0 (2021-03-25)
* - Changed preview to showcuts.app
* - Localized the preview button to more than 30 languages
* - Fixes the icon CSP bug with github.com/atnbueno/shortcut-icons/
* - Compatible with Violentmonkey (except the icon glyph)
*/
(function () {
"use strict";
const preview = {ar:"معاينة",ca:"Previsualització",cs:"Náhled",da:"Eksempel",de:"Vorschau",el:"Προεπισκόπηση",
es:"Previsualización",fi:"Näyte",fr:"Aperçu",he:"קטע להאזנה",hi:"प्रीव्यू",hr:"Pregled",hu:"Előnézet",
id:"Pratinjau",it:"Anteprima",ja:"プレビュー",ko:"미리보기",ms:"Pratonton",nl:"Voorvertoning",
no:"Forhåndsvisning",pl:"Podgląd",pt:"Pré-Visualização",ro:"Previzualizare",ru:"Просмотр",
sk:"Náhľad",sv:"Förhandsvisning",th:"การแสดงตัวอย่าง",tr:"Önizleme",uk:"Передогляд",vi:"Xem trước"};
if (location.host == "www.icloud.com"){
if (/^\/shortcuts\/[\da-f]{32}$/.test(location.pathname)) {
// adds localized "Preview" button to iCloud shortcut links
let previewLink = document.createElement("a");
previewLink.appendChild(document.createTextNode(preview[navigator.language.slice(0, 2)] || "Preview"));
previewLink.href = location.href.replace("www.icloud.com/shortcuts/", "showcuts.app/#");
document.getElementById("shortcut-links").appendChild(previewLink);
// fixes icon CSP bug
fetch(location.href.replace("/shortcuts/", "/shortcuts/api/records/"))
.then(response => response.json())
.then(metadata => {
let container = document.getElementById("shortcut-container");
container.innerHTML = `<div class="shortcut-icon c${metadata.fields.icon_color.value} g${metadata.fields.icon_glyph.value}"></div>` + container.innerHTML;
document.getElementById("shortcut-icon").style.display = "none";
});
}
} else { // showcuts.app
if (/^#[\da-f]{32}$/.test(location.hash)) {
// auto-submits icloud link
document.getElementById("id_iCloudLink").value = location.hash.replace("#", "https://www.icloud.com/shortcuts/");
document.getElementById("icloud-submit").click();
}
}
// Adapted from https://github.com/atnbueno/shortcut-icons/
let stylesheet = document.createElement("style");
stylesheet.textContent = `
.shortcut-icon {
--icon-size: 128px;
border-radius: calc(var(--icon-size) / 6);
box-shadow: 0 calc(var(--icon-size) / 64) calc(var(--icon-size) / 32) 0 rgba(0, 0, 0, .14);
box-sizing: border-box;
display: inline-block;
height: var(--icon-size);
padding: calc(var(--icon-size) / 6.7368421);
width: var(--icon-size);
}
.shortcut-icon::after {
background-image: url(https://raw.githubusercontent.com/atnbueno/shortcut-icons/main/ios14-glyphs.png);
background-position: right bottom;
background-size: 2000% 1700%;
content: '';
height: calc(var(--icon-size) * 0.703125);
margin-left: calc(var(--icon-size) / -3);
position: absolute;
width: calc(var(--icon-size) * 0.703125);
}
.c4282601983, .c-12365313 { background: linear-gradient(#F36F74, #F2585E) }
.c4251333119, .c-43634177 { background: linear-gradient(#FF8E73, #FF7C5C) }
.c4271458815, .c-23508481 { background: linear-gradient(#F8AE5F, #F7A145) }
.c4274264319, .c-20702977 { background: linear-gradient(#E8CA45, #E5C238) }
.c4292093695, .c-2873601 { background: linear-gradient(#53CD6B, #37C553) }
.c431817727 , .c-3863149569 { background: linear-gradient(#57CFB4, #2AC7A8) }
.c1440408063, .c-2854559233 { background: linear-gradient(#5ACCDE, #3FC4D9) }
.c463140863 , .c-3831826433 { background: linear-gradient(#24BAF7, #00AFF6) }
.c946986751 , .c-3347980545 { background: linear-gradient(#5874CA, #3D5EC2) }
.c2071128575, .c-2223838721 { background: linear-gradient(#9164C7, #7F4BBE) }
.c3679049983, .c-615917313 { background: linear-gradient(#C085E6, #B671E2) }
.c3980825855, .c-314141441 { background: linear-gradient(#F694D8, #F583D2) }
.c255 , .c-4294967041 { background: linear-gradient(#9099A3, #7E8994) }
.c3031607807, .c-1263359489 { background: linear-gradient(#9DA79D, #8D998E) }
.c2846468607, .c-1448498689 { background: linear-gradient(#A49995, #968984) }
.g59392::after { background-position: 47.3684% 0% }
.g59395::after { background-position: 94.7368% 12.5% }
.g59402::after { background-position: 100% 12.5% }
.g59403::after { background-position: 0% 18.75% }
.g59405::after { background-position: 42.1053% 12.5% }
.g59412::after { background-position: 5.2632% 18.75% }
.g59414::after { background-position: 10.5263% 18.75% }
.g59436::after { background-position: 15.7895% 18.75% }
.g59437::after { background-position: 21.0526% 18.75% }
.g59438::after { background-position: 68.4211% 0% }
.g59445::after { background-position: 36.8421% 0% }
.g59446::after { background-position: 84.2105% 6.25% }
.g59448::after { background-position: 26.3158% 18.75% }
.g59452::after { background-position: 31.5789% 18.75% }
.g59454::after { background-position: 36.8421% 18.75% }
.g59456::after { background-position: 84.2105% 0% }
.g59459::after { background-position: 42.1053% 18.75% }
.g59460::after { background-position: 47.3684% 18.75% }
.g59461::after { background-position: 52.6316% 18.75% }
.g59465::after { background-position: 73.6842% 12.5% }
.g59468::after { background-position: 57.8947% 18.75% }
.g59471::after { background-position: 63.1579% 18.75% }
.g59473::after { background-position: 89.4737% 6.25% }
.g59489::after { background-position: 0% 6.25% }
.g59494::after { background-position: 68.4211% 18.75% }
.g59497::after { background-position: 52.6316% 0% }
.g59498::after { background-position: 73.6842% 18.75% }
.g59502::after { background-position: 10.5263% 6.25% }
.g59508::after { background-position: 26.3158% 0% }
.g59511::after { background-position: 78.9474% 18.75% }
.g59512::after { background-position: 84.2105% 18.75% }
.g59514::after { background-position: 89.4737% 18.75% }
.g59515::after { background-position: 94.7368% 18.75% }
.g59516::after { background-position: 100% 18.75% }
.g59519::after { background-position: 0% 25% }
.g59578::after { background-position: 5.2632% 25% }
.g59648::after { background-position: 100% 0% }
.g59649::after { background-position: 10.5263% 25% }
.g59650::after { background-position: 0% 0% }
.g59651::after { background-position: 15.7895% 25% }
.g59652::after { background-position: 21.0526% 25% }
.g59653::after { background-position: 26.3158% 25% }
.g59654::after { background-position: 31.5789% 25% }
.g59655::after { background-position: 36.8421% 25% }
.g59656::after { background-position: 15.7895% 12.5% }
.g59657::after { background-position: 42.1053% 25% }
.g59658::after { background-position: 47.3684% 25% }
.g59659::after { background-position: 52.6316% 25% }
.g59660::after { background-position: 57.8947% 25% }
.g59661::after { background-position: 57.8947% 12.5% }
.g59662::after { background-position: 94.7368% 6.25% }
.g59663::after { background-position: 63.1579% 25% }
.g59664::after { background-position: 26.3158% 12.5% }
.g59665::after { background-position: 100% 6.25% }
.g59666::after { background-position: 5.2632% 12.5% }
.g59667::after { background-position: 68.4211% 25% }
.g59668::after { background-position: 73.6842% 25% }
.g59669::after { background-position: 68.4211% 12.5% }
.g59670::after { background-position: 78.9474% 25% }
.g59671::after { background-position: 84.2105% 25% }
.g59672::after { background-position: 89.4737% 25% }
.g59673::after { background-position: 94.7368% 25% }
.g59674::after { background-position: 100% 25% }
.g59675::after { background-position: 0% 31.25% }
.g59676::after { background-position: 5.2632% 31.25% }
.g59677::after { background-position: 10.5263% 31.25% }
.g59678::after { background-position: 15.7895% 31.25% }
.g59679::after { background-position: 21.0526% 31.25% }
.g59680::after { background-position: 42.1053% 6.25% }
.g59681::after { background-position: 26.3158% 31.25% }
.g59682::after { background-position: 89.4737% 0% }
.g59683::after { background-position: 31.5789% 0% }
.g59684::after { background-position: 31.5789% 31.25% }
.g59685::after { background-position: 26.3158% 6.25% }
.g59686::after { background-position: 36.8421% 31.25% }
.g59687::after { background-position: 47.3684% 6.25% }
.g59688::after { background-position: 10.5263% 0% }
.g59689::after { background-position: 52.6316% 6.25% }
.g59690::after { background-position: 42.1053% 31.25% }
.g59691::after { background-position: 47.3684% 31.25% }
.g59692::after { background-position: 52.6316% 31.25% }
.g59693::after { background-position: 57.8947% 31.25% }
.g59694::after { background-position: 31.5789% 6.25% }
.g59695::after { background-position: 15.7895% 0% }
.g59696::after { background-position: 63.1579% 31.25% }
.g59697::after { background-position: 68.4211% 31.25% }
.g59698::after { background-position: 21.0526% 0% }
.g59699::after { background-position: 5.2632% 0% }
.g59700::after { background-position: 42.1053% 0% }
.g59701::after { background-position: 21.0526% 6.25% }
.g59702::after { background-position: 73.6842% 31.25% }
.g59703::after { background-position: 78.9474% 31.25% }
.g59704::after { background-position: 84.2105% 31.25% }
.g59705::after { background-position: 94.7368% 0% }
.g59706::after { background-position: 89.4737% 31.25% }
.g59707::after { background-position: 94.7368% 31.25% }
.g59708::after { background-position: 100% 31.25% }
.g59709::after { background-position: 0% 37.5% }
.g59710::after { background-position: 5.2632% 37.5% }
.g59711::after { background-position: 10.5263% 37.5% }
.g59712::after { background-position: 78.9474% 6.25% }
.g59713::after { background-position: 15.7895% 37.5% }
.g59714::after { background-position: 78.9474% 0% }
.g59715::after { background-position: 21.0526% 37.5% }
.g59716::after { background-position: 26.3158% 37.5% }
.g59717::after { background-position: 31.5789% 37.5% }
.g59718::after { background-position: 36.8421% 37.5% }
.g59719::after { background-position: 42.1053% 37.5% }
.g59720::after { background-position: 47.3684% 37.5% }
.g59721::after { background-position: 52.6316% 37.5% }
.g59722::after { background-position: 57.8947% 37.5% }
.g59723::after { background-position: 63.1579% 37.5% }
.g59724::after { background-position: 68.4211% 37.5% }
.g59725::after { background-position: 73.6842% 37.5% }
.g59726::after { background-position: 0% 12.5% }
.g59727::after { background-position: 78.9474% 37.5% }
.g59728::after { background-position: 36.8421% 12.5% }
.g59729::after { background-position: 47.3684% 12.5% }
.g59730::after { background-position: 21.0526% 12.5% }
.g59731::after { background-position: 84.2105% 37.5% }
.g59732::after { background-position: 89.4737% 37.5% }
.g59733::after { background-position: 94.7368% 37.5% }
.g59734::after { background-position: 100% 37.5% }
.g59735::after { background-position: 0% 43.75% }
.g59736::after { background-position: 5.2632% 43.75% }
.g59737::after { background-position: 10.5263% 43.75% }
.g59738::after { background-position: 15.7895% 43.75% }
.g59739::after { background-position: 21.0526% 43.75% }
.g59740::after { background-position: 26.3158% 43.75% }
.g59741::after { background-position: 31.5789% 43.75% }
.g59742::after { background-position: 36.8421% 43.75% }
.g59743::after { background-position: 42.1053% 43.75% }
.g59744::after { background-position: 47.3684% 43.75% }
.g59745::after { background-position: 52.6316% 43.75% }
.g59746::after { background-position: 15.7895% 6.25% }
.g59747::after { background-position: 57.8947% 0% }
.g59748::after { background-position: 57.8947% 43.75% }
.g59749::after { background-position: 63.1579% 43.75% }
.g59750::after { background-position: 68.4211% 43.75% }
.g59751::after { background-position: 73.6842% 43.75% }
.g59752::after { background-position: 63.1579% 6.25% }
.g59753::after { background-position: 78.9474% 43.75% }
.g59754::after { background-position: 84.2105% 43.75% }
.g59755::after { background-position: 89.4737% 43.75% }
.g59756::after { background-position: 94.7368% 43.75% }
.g59757::after { background-position: 100% 43.75% }
.g59758::after { background-position: 0% 50% }
.g59759::after { background-position: 63.1579% 0% }
.g59760::after { background-position: 5.2632% 50% }
.g59761::after { background-position: 10.5263% 50% }
.g59762::after { background-position: 15.7895% 50% }
.g59763::after { background-position: 73.6842% 0% }
.g59764::after { background-position: 5.2632% 6.25% }
.g59765::after { background-position: 68.4211% 6.25% }
.g59766::after { background-position: 21.0526% 50% }
.g59767::after { background-position: 26.3158% 50% }
.g59768::after { background-position: 31.5789% 50% }
.g59769::after { background-position: 36.8421% 50% }
.g59770::after { background-position: 42.1053% 50% }
.g59771::after { background-position: 47.3684% 50% }
.g59772::after { background-position: 52.6316% 50% }
.g59773::after { background-position: 57.8947% 50% }
.g59774::after { background-position: 63.1579% 50% }
.g59775::after { background-position: 68.4211% 50% }
.g59776::after { background-position: 10.5263% 12.5% }
.g59777::after { background-position: 73.6842% 50% }
.g59778::after { background-position: 78.9474% 50% }
.g59779::after { background-position: 84.2105% 50% }
.g59780::after { background-position: 89.4737% 50% }
.g59781::after { background-position: 94.7368% 50% }
.g59782::after { background-position: 100% 50% }
.g59783::after { background-position: 0% 56.25% }
.g59784::after { background-position: 5.2632% 56.25% }
.g59785::after { background-position: 10.5263% 56.25% }
.g59786::after { background-position: 15.7895% 56.25% }
.g59787::after { background-position: 21.0526% 56.25% }
.g59788::after { background-position: 26.3158% 56.25% }
.g59789::after { background-position: 31.5789% 56.25% }
.g59790::after { background-position: 36.8421% 56.25% }
.g59791::after { background-position: 42.1053% 56.25% }
.g59792::after { background-position: 52.6316% 12.5% }
.g59793::after { background-position: 63.1579% 12.5% }
.g59794::after { background-position: 31.5789% 12.5% }
.g59795::after { background-position: 47.3684% 56.25% }
.g59796::after { background-position: 52.6316% 56.25% }
.g59797::after { background-position: 57.8947% 56.25% }
.g59798::after { background-position: 63.1579% 56.25% }
.g59799::after { background-position: 68.4211% 56.25% }
.g59800::after { background-position: 73.6842% 56.25% }
.g59801::after { background-position: 78.9474% 56.25% }
.g59802::after { background-position: 84.2105% 56.25% }
.g59803::after { background-position: 89.4737% 56.25% }
.g59804::after { background-position: 94.7368% 56.25% }
.g59805::after { background-position: 100% 56.25% }
.g59806::after { background-position: 0% 62.5% }
.g59807::after { background-position: 5.2632% 62.5% }
.g59808::after { background-position: 10.5263% 62.5% }
.g59809::after { background-position: 15.7895% 62.5% }
.g59810::after { background-position: 73.6842% 6.25% }
.g59811::after { background-position: 21.0526% 62.5% }
.g59812::after { background-position: 26.3158% 62.5% }
.g59813::after { background-position: 31.5789% 62.5% }
.g59814::after { background-position: 36.8421% 62.5% }
.g59815::after { background-position: 42.1053% 62.5% }
.g59816::after { background-position: 47.3684% 62.5% }
.g59817::after { background-position: 52.6316% 62.5% }
.g59818::after { background-position: 57.8947% 62.5% }
.g59819::after { background-position: 63.1579% 62.5% }
.g59820::after { background-position: 68.4211% 62.5% }
.g59821::after { background-position: 73.6842% 62.5% }
.g59822::after { background-position: 78.9474% 62.5% }
.g59823::after { background-position: 36.8421% 6.25% }
.g59824::after { background-position: 84.2105% 62.5% }
.g59825::after { background-position: 89.4737% 62.5% }
.g59826::after { background-position: 94.7368% 62.5% }
.g59827::after { background-position: 100% 62.5% }
.g59828::after { background-position: 57.8947% 6.25% }
.g59829::after { background-position: 0% 68.75% }
.g59830::after { background-position: 5.2632% 68.75% }
.g59831::after { background-position: 10.5263% 68.75% }
.g59832::after { background-position: 15.7895% 68.75% }
.g59833::after { background-position: 21.0526% 68.75% }
.g59834::after { background-position: 26.3158% 68.75% }
.g59835::after { background-position: 31.5789% 68.75% }
.g59836::after { background-position: 36.8421% 68.75% }
.g59837::after { background-position: 42.1053% 68.75% }
.g59838::after { background-position: 47.3684% 68.75% }
.g59839::after { background-position: 52.6316% 68.75% }
.g59840::after { background-position: 78.9474% 12.5% }
.g59841::after { background-position: 57.8947% 68.75% }
.g59842::after { background-position: 63.1579% 68.75% }
.g59843::after { background-position: 68.4211% 68.75% }
.g59844::after { background-position: 73.6842% 68.75% }
.g59845::after { background-position: 78.9474% 68.75% }
.g59846::after { background-position: 84.2105% 68.75% }
.g59847::after { background-position: 89.4737% 68.75% }
.g59848::after { background-position: 94.7368% 68.75% }
.g59849::after { background-position: 100% 68.75% }
.g59850::after { background-position: 0% 75% }
.g59851::after { background-position: 5.2632% 75% }
.g59852::after { background-position: 10.5263% 75% }
.g59853::after { background-position: 15.7895% 75% }
.g59854::after { background-position: 21.0526% 75% }
.g59856::after { background-position: 26.3158% 75% }
.g59857::after { background-position: 31.5789% 75% }
.g59858::after { background-position: 36.8421% 75% }
.g59859::after { background-position: 42.1053% 75% }
.g59860::after { background-position: 47.3684% 75% }
.g59861::after { background-position: 52.6316% 75% }
.g59862::after { background-position: 57.8947% 75% }
.g59863::after { background-position: 63.1579% 75% }
.g59864::after { background-position: 68.4211% 75% }
.g59865::after { background-position: 73.6842% 75% }
.g59866::after { background-position: 78.9474% 75% }
.g59867::after { background-position: 84.2105% 75% }
.g59868::after { background-position: 89.4737% 75% }
.g59869::after { background-position: 94.7368% 75% }
.g59870::after { background-position: 100% 75% }
.g61440::after { background-position: 84.2105% 12.5% }
.g61442::after { background-position: 0% 81.25% }
.g61444::after { background-position: 5.2632% 81.25% }
.g61446::after { background-position: 10.5263% 81.25% }
.g61447::after { background-position: 15.7895% 81.25% }
.g61448::after { background-position: 21.0526% 81.25% }
.g61449::after { background-position: 26.3158% 81.25% }
.g61450::after { background-position: 31.5789% 81.25% }
.g61452::after { background-position: 36.8421% 81.25% }
.g61453::after { background-position: 42.1053% 81.25% }
.g61454::after { background-position: 47.3684% 81.25% }
.g61455::after { background-position: 52.6316% 81.25% }
.g61456::after { background-position: 57.8947% 81.25% }
.g61457::after { background-position: 63.1579% 81.25% }
.g61458::after { background-position: 68.4211% 81.25% }
.g61459::after { background-position: 73.6842% 81.25% }
.g61460::after { background-position: 78.9474% 81.25% }
.g61461::after { background-position: 84.2105% 81.25% }
.g61462::after { background-position: 89.4737% 81.25% }
.g61464::after { background-position: 94.7368% 81.25% }
.g61465::after { background-position: 100% 81.25% }
.g61466::after { background-position: 0% 87.5% }
.g61467::after { background-position: 5.2632% 87.5% }
.g61468::after { background-position: 10.5263% 87.5% }
.g61470::after { background-position: 15.7895% 87.5% }
.g61471::after { background-position: 21.0526% 87.5% }
.g61472::after { background-position: 26.3158% 87.5% }
.g61473::after { background-position: 31.5789% 87.5% }
.g61474::after { background-position: 36.8421% 87.5% }
.g61475::after { background-position: 42.1053% 87.5% }
.g61476::after { background-position: 47.3684% 87.5% }
.g61477::after { background-position: 52.6316% 87.5% }
.g61478::after { background-position: 57.8947% 87.5% }
.g61479::after { background-position: 63.1579% 87.5% }
.g61480::after { background-position: 68.4211% 87.5% }
.g61481::after { background-position: 73.6842% 87.5% }
.g61482::after { background-position: 78.9474% 87.5% }
.g61483::after { background-position: 84.2105% 87.5% }
.g61484::after { background-position: 89.4737% 87.5% }
.g61486::after { background-position: 94.7368% 87.5% }
.g61487::after { background-position: 100% 87.5% }
.g61488::after { background-position: 0% 93.75% }
.g61489::after { background-position: 5.2632% 93.75% }
.g61490::after { background-position: 10.5263% 93.75% }
.g61491::after { background-position: 15.7895% 93.75% }
.g61493::after { background-position: 21.0526% 93.75% }
.g61494::after { background-position: 26.3158% 93.75% }
.g61495::after { background-position: 31.5789% 93.75% }
.g61496::after { background-position: 36.8421% 93.75% }
.g61497::after { background-position: 42.1053% 93.75% }
.g61498::after { background-position: 47.3684% 93.75% }
.g61499::after { background-position: 52.6316% 93.75% }
.g61500::after { background-position: 57.8947% 93.75% }
.g61501::after { background-position: 63.1579% 93.75% }
.g61502::after { background-position: 68.4211% 93.75% }
.g61503::after { background-position: 73.6842% 93.75% }
.g61504::after { background-position: 89.4737% 12.5% }
.g61505::after { background-position: 78.9474% 93.75% }
.g61506::after { background-position: 84.2105% 93.75% }
.g61507::after { background-position: 89.4737% 93.75% }
.g61508::after { background-position: 94.7368% 93.75% }
.g61509::after { background-position: 100% 93.75% }
.g61510::after { background-position: 0% 100% }
.g61511::after { background-position: 5.2632% 100% }
.g61512::after { background-position: 10.5263% 100% }
.g61513::after { background-position: 15.7895% 100% }
.g61514::after { background-position: 21.0526% 100% }
.g61515::after { background-position: 26.3158% 100% }
.g61517::after { background-position: 31.5789% 100% }
.g61518::after { background-position: 36.8421% 100% }
.g61519::after { background-position: 42.1053% 100% }
.g61520::after { background-position: 47.3684% 100% }
.g61521::after { background-position: 52.6316% 100% }
.g61522::after { background-position: 57.8947% 100% }
.g61523::after { background-position: 63.1579% 100% }
.g61524::after { background-position: 68.4211% 100% }
.g61525::after { background-position: 73.6842% 100% }
.g61528::after { background-position: 78.9474% 100% }
.g61529::after { background-position: 84.2105% 100% }
.g61530::after { background-position: 89.4737% 100% }
.g61531::after { background-position: 94.7368% 100% }
`;
if (typeof GM_addStyle !== 'function') {
document.querySelector("head").appendChild(stylesheet); // Greasemonkey
} else {
GM_addStyle(stylesheet.textContent); // Violentmonkey
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment