creating a faster Synology quickconnect.to

OffCorner Developer — Sun, 13 Mar 2022 21:52:06 +0000

After setting up my third Synology Server (rip DS415+ C2000 CPU error) I set up my external access using the QuickConnect service provided by Synology. It checks if the server is in your local network and depending on that redirects you to a https protected website linking to your server (either internal network IP or through a proxy provided by Synology).
There was one annoyance though:
going to the address [QUICKCONNECT_USERNAME].quickconnect.to when I was in my local network took quite long.

Official way: setup a custom domain

There is the possibility of using a custom domain and setting up a DNS server to route local access to the Synology directly without going outside of the home network. I have done this with my previous Synology Nas devices but the convenience of quickconnect.to made me stick with it this time.

caveats

The issue with setting up a local DNS Server is that browsers like Chrome can (and as far as I am aware of nowadays do by default) use other DNS servers or DNS over https, thus ignoring your local DNS server. If your router doesn't support redirecting requests to a domain that points to your external IP then you might end up having to look for other alternatives.

So today we will be using a simple, but for the most part very effective trick to check if the Nas is in our local network or not and redirect quicker than the quickconnect.to service.

Background

This trick simply tries accessing the Nas using the local address first and, if it doesn't respond within a certain threshold, redirects to the outbound quickconnect.to address.

Script

Here's the script making it work:

(() => {
  let internal =
    "https://[INTERNAL_SYNOLOGY_IP].[QUICKCONNECT_USERNAME].direct.quickconnect.to:5001/";
  let external = "https://[QUICKCONNECT_USERNAME].quickconnect.to/";
  fetch(internal).catch(() => (window.location = internal));
  setTimeout(() => (window.location = external), 1000);
})();

replace [INTERNAL_SYNOLOGY_IP] with the internal IP Address of your Synology and [QUICKCONNECT_USERNAME] with your quickconnect id.
We have turned it into a self executing anonymous function so that we don't have issues with variables being already declared. Our threshold right now is 1000ms but you can increase it in case your internal network is slow and the nas doesn't respond in time.

The fetch request fails because of CORS issues, that is fine though as we are looking for any response from a server at that IP address. If that takes longer than 1 second, we redirect to the official quickconnect.to address.

Make it even faster

If you want to be risky and make the external address faster, you can hardcode the country code of the Synology CDN by replacing the external variable with:

let external = "https://[QUICKCONNECT_USERNAME].[COUNTRY_CODE].quickconnect.to/";

In order to find it, simply connect to your synology via [QUICKCONNECT_USERNAME].quickconnect.to while outside your home network and read the country code from the url. In my case it's de7.

Bookmarklet

Ever since finding out that bookmarklets exist I have been a very avid user of them. My bookmarks Bar is filled with Bookmarklets for all the various different things (including a dark mode, webpage translator, bookmarks manager, web scraper… you name it!).
Essentially, bookmarks starting with javascript: instead of https:// will execute any following JavaScript code you throw at it.
So here's our bookmarklet:

javascript:(() => {
  let internal =
    "https://[INTERNAL_SYNOLOGY_IP].[QUICKCONNECT_USERNAME].direct.quickconnect.to:5001/";
  let external = "https://[QUICKCONNECT_USERNAME].quickconnect.to/";
  fetch(internal).catch(() => (window.location = internal));
  setTimeout(() => (window.location = external), 1000);
})();

HTML Bookmark

First I wanted to spin up a vercel, netlify or glitch site for this but then I realised: I can just save the file as an HTML file locally on my computer and create a bookmark for that. So just copy the code below into a text editor, save it as an HTML file (like synology.html) and drag it into your browsers bookmarks bar. Works just as great.

With a tiny bit of styling (note: we are inlining everything because it's small enough to understand and would just add overhead):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>QuickConnect</title>
    <script>
      (() => {
        let internal =
          "https://[INTERNAL_SYNOLOGY_IP].[QUICKCONNECT_USERNAME].direct.quickconnect.to:5001/";
        let external = "https://[QUICKCONNECT_USERNAME].quickconnect.to/";
        fetch(internal).catch(() => (window.location = internal));
        setTimeout(() => (window.location = external), 1000);
      })();
    </script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial;
        background: #042069;
        color: #fff;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    connecting to synology
  </body>
</html>

There you have it!
I hope this helps somebody. Maybe you are using quickconnect and have also been annoyed or you just learned about bookmarklets and want to create your own :)

spice up your omnibox with deepl and more!

OffCorner Developer — Thu, 04 Feb 2021 16:39:11 +0000

Do you find yourself translating sentences quite often or are you just a fan of deepl.com?
Today we are going to use the custom Search Engine functionality built into most browsers to trigger a translation right from the omnibox!
Translating in Deepl results in the original text being added to the current url, like so:

We can create a new Search Engine in the Chrome Settings, and set it up like so:

Here is the URL String you will have to enter:

http://deepl.com/translator#en/de/%s

The %s is a placeholder for any text you would like to add later on.

Now, whenever we type "en-de" in the omnibox and press tab, we can enter the english text that we'd like to have translated by deepl. Pressing enter brings us right to the deepl page with the translation!

You can also use this as a note-taking shortcut:


data:text/html, 
<html contenteditable><body>%s</body>
<style>
    html {
        font-family: system-ui; 
        background: %23f5f3f0;
        padding: 1em;
    }
    body {
        margin: 2em auto;
        max-width: 40em; 
        background: %23fff;
        padding: 1em;box-shadow: 5px 5px 0 rgb(0 0 0 / 10%);
    }
</style>
<script>window.onbeforeunload = function(){  return 'Are you sure you want to leave?';};</script>
</html>

Now, all you have to do is type "note", press tab and write anything down!

DEV Community: OffCorner Developer