GUIDE: make your own personal "browser"

Guides
1

this guide uses the power of median.co and netlify drop, the concept is as follows: create simple html page → host on netlify drop → html has links to approved sites as per setup on median.co

step 1

gather list of sites.

step 2

gather the appropriate URL’s (A.I. is your friend(and enemy :slight_smile: )).
take time to get download urls wildcards, otherwise downloads won’t work.

step 3

go to median.co to configure your app, when you get to link handling toggle advanced mode, you should see a JSON with regex rules, using the structure found in the default JSON set the rules to open only your list of urls internally.

example 
  {
    "id": 1,
    "regex": "^(mailto:|tel:|sms:|file:|intent:).*$",
    "mode": "internal",
    "label": "Non-web schemes"
  },
  {
    "id": 2,
    "regex": "https?://(www\\.)?(thelakewoodscoop\\.com|matzav\\.com|theyeshivaworld\\.com)(/.*)?$",
    "mode": "internal",
    "label": "News sites"
  },
  {
    "id": 3,
    "regex": "https?://(www\\.)?(td\\.com|onlinebanking\\.tdbank\\.com|chase\\.com|capitalone\\.com|santanderbank\\.com|discover\\.com|americanexpress\\.com|bankofamerica\\.com)(/.*)?$",
    "mode": "internal",
    "label": "Banking"
  },
  {
    "id": 4,
    "regex": "https?://(www\\.)?(dansdeals\\.com|forums\\.dansdeals\\.com)(/.*)?$",
    "mode": "internal",
    "label": "DansDeals"
  },
  {
    "id": 5,
    "regex": "https?://(www\\.)?jtechforums\\.org(/.*)?$",
    "mode": "internal",
    "label": "JTech Forums"
  },
  {
    "id": 6,
    "regex": "https?://(www\\.)?mitmachim\\.top(/.*)?$",
    "mode": "internal",
    "label": "MitmachimTop"
  },
  {
    "id": 7,
    "regex": "https?://(www\\.)?music-table\\.com(/.*)?$",
    "mode": "internal",
    "label": "Music Table"
  },
  {
    "id": 8,
    "regex": "https?://mail\\.google\\.com/.*$",
    "mode": "internal",
    "label": "Gmail"
  },
  {
    "id": 9,
    "regex": "https?://drive\\.google\\.com/(file|drive|uc)\\/.*$",
    "mode": "internal",
    "label": "Google Drive"
  },
  {
    "id": 11,
    "regex": "https?://(www\\.)?(google\\.com/maps|maps\\.google\\.com|goo\\.gl/maps)(/.*)?$",
    "mode": "external",
    "label": "Google Maps"
  },
  {
    "id": 12,
    "regex": "https?://(www\\.)?google\\.com/search\\?q=.*$",
    "mode": "external",
    "label": "Google Maps Search"
  },
  {
    "id": 13,
    "regex": "https?://([-\\w]+\\.)*(linkedin\\.com|lnkd\\.in)(/.*)?$",
    "mode": "external",
    "label": "LinkedIn"
  },
  {
    "id": 14,
    "regex": "https?://([-\\w]+\\.)*(microsoft\\.com|office\\.com|outlook\\.com|live\\.com|microsoftonline\\.com)(/.*)?$",
    "mode": "external",
    "label": "Microsoft / Office"
  },
  {
    "id": 15,
    "regex": "https?://([-\\w]+\\.)*(twitter|x)\\.com(/.*)?$",
    "mode": "external",
    "label": "Twitter / X"
  },
  {
    "id": 16,
    "regex": "https?://([-\\w]+\\.)*instagram\\.com(/.*)?$",
    "mode": "external",
    "label": "Instagram"
  },
  {
    "id": 17,
    "regex": "https?://([-\\w]+\\.)*(facebook\\.com|m\\.facebook\\.com|fb\\.com)(/.*)?$",
    "mode": "external",
    "label": "Facebook"
  },
  {
    "id": 18,
    "regex": "https?://(www\\.)?(policies\\.google\\.com|support\\.google\\.com/legal|myaccount\\.google\\.com/(terms|privacy)|accounts\\.google\\.com/.+#(privacy|terms)).*$",
    "mode": "external",
    "label": "Google Legal / Privacy"
  },
  {
    "id": 19,
    "regex": ".*",
    "mode": "block",
    "label": "Block all other links"
  }
]

it’s not that scary, just use A.I., case in point, I’m not even entirely sure what regex is ;).

we’re not done with the json, gotta add your netlify site…

[It might be a good idea to block any known links that can “creep in”].

step 4

create a page of HTML pointing to all your sites.

you can use this template if you like 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Site Launcher</title>
<style>
  :root{
    --bg:#0b0f12;
    --card:#11181c;
    --muted:#9aa6ad;
    --accent:#7bd389;
    --line:#1a2325;
    --radius:12px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:#e8f3f1;
  }
  main{
    max-width:600px;
    margin:40px auto;
    padding:20px;
  }
  h1{
    text-align:center;
    color:var(--accent);
    font-size:22px;
    font-weight:600;
    margin-bottom:30px;
  }
  section{
    margin-bottom:28px;
    border-top:1px solid var(--line);
    padding-top:16px;
  }
  h2{
    font-size:14px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  ul{
    list-style:none;
    padding:0;
    margin:0;
  }
  li{
    margin-bottom:10px;
  }
  a{
    display:block;
    text-decoration:none;
    color:#e8f3f1;
    background:var(--card);
    padding:10px 14px;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.03);
    transition:background .1s ease, transform .1s ease;
  }
  a:hover{
    background:#162226;
    transform:translateY(-2px);
  }
  footer{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:40px;
  }
</style>
</head>
<body>
  <main>
    <h1>Site Launcher</h1>

    <section>
      <h2>News</h2>
      <ul>
        <li><a href="https://thelakewoodscoop.com/">The Lakewood Scoop</a></li>
        <li><a href="https://matzav.com/">Matzav</a></li>
        <li><a href="https://www.theyeshivaworld.com/">Yeshiva World News</a></li>
      </ul>
    </section>

    <section>
      <h2>Banking</h2>
      <ul>
        <li><a href="https://www.td.com/us/en/personal-banking">TD</a></li>
        <li><a href="https://onlinebanking.tdbank.com/">TD Online</a></li>
        <li><a href="https://www.chase.com/">Chase</a></li>
        <li><a href="https://www.capitalone.com/">Capital One</a></li>
        <li><a href="https://www.santanderbank.com/">Santander</a></li>
        <li><a href="https://www.discover.com/">Discover</a></li>
        <li><a href="https://www.americanexpress.com/">American Express</a></li>
        <li><a href="https://www.bankofamerica.com/">Bank of America</a></li>
      </ul>
    </section>

    <section>
      <h2>Other</h2>
      <ul>
        <li><a href="https://www.dansdeals.com/">DansDeals</a></li>
        <li><a href="https://forums.dansdeals.com/">DansDeals Forum</a></li>
        <li><a href="https://jtechforums.org/">JTech Forums</a></li>
        <li><a href="https://mitmachim.top/">MitmachimTop</a></li>
        <li><a href="https://www.music-table.com/">Music Table</a></li>
        <li><a href="https://mail.google.com/">Gmail</a></li>
        <li><a href="https://drive.google.com/drive">Google Drive</a></li>
      </ul>
    </section>

    <footer>Site Launcher • Clean Dark Edition</footer>
  </main>
</body>
</html>

once again, A.I. seems to be able to handle simple HTML fairly well.

step 5

go to netlify drop and create a free account (othwerwise your url will only be temporary), follow the site, (it’s pretty much drag and drop (hence,netlify drop :roll_eyes:) ).
take note of the url created for you.

step 6

add the url to list of internally opened links in your regex JSON.

step 7

when creating your median.co app, the url to be opened on launch should be your netlify site/HTML page.

step 8

finish app creation in median.co to your liking.

tada!!
:clap: :clap: :clap:

7 Likes