How to set up Reload Frame for Safari (macOS)

 

As Squarespace developers with 15+ years experience between us (🤓), we have learnt a thing or two and refined our processes / tools to ensure that we can code effectively and efficiently. 

As a long-term PC user, I generally use(d) Chrome as my primary browser. Chrome is an extremely powerful browser for many reasons including, extensions, it's minimalist design, Google's V8 JavasScript processor and most importantly, it has a 'Reload Frame' feature.

Reload Frame means that we're not having to reload an entire web page to check code etc - reloading the whole page generally chucks you back to the first menu in the Squarespace backend and you have to navigate back to the page you're working on which takes approx 10 seconds (super annoying). 

Big deal right?!

It may not seem like much but when you're working on Squarespace sites all day, every day, and having to reload/re-navigate 20-30 times an hour, that adds up to 30 minutes a day or 18 days a year!! For me, Reload Frame make a real difference to my efficiency.

Everything was hunky dory in Chrome Town...

That was until a few weeks ago when my PC threw a wobbly, meaning that I needed to jump across to the old faithful iMac (luckily I'm also familiar with MacOS, so the switch wasn't painful) that was going spare. After a week or so of my usual workflow, I noticed that Chrome was less responsive and 'lagging' when loading up and navigating between the Squarespace menus.


A quick check of the Activity Monitor showed me that Chrome was hogging an insane amount of processing power! Having then tested Chrome against Safari, it was clear that Safari was a much more stable (and productive) browser.

But wait. Safari doesn't have Reload Frame. Shit...

Luckily for us (and you), Safari allows you to make your own extensions and run them on your browser, which is exactly what we did to get past the lack of a Reload Frame feature. 

Here's how to do it...

 

1. Getting started


First you need to download the extension folder we've put together here, unzip and save it somewhere safe.

  • Open Safari

  • Open preferences (shortcut is ⌘ Command+Comma (,) if you're feeling fancy)

  • Click on the advanced tab

  • Select 'Show Develop menu in menu bar'

  • BOOM 💥 (you can close the window)

safari-screenshot-preferences-reload-frame-developer-squarespace-shopify-website-design-bristol.png
 

2. Initial installation


Now you need to actually get the extension set up so you can boss your Squarespace development on Safari.

  • Click "Develop" (which has now been added to the top menu bar)

  • Click "Show Extension Builder"

  • Click the (+) button in the bottom left of the window

  • Click "Add Extension"

  • Find the extension folder you downloaded earlier ☝️

  • Click "Select"

  • Click "Install" (top right corner)

  • Click "Install" again in the pop-up window

  • Enter you password

  • Close the "Extension Builder" window

 

3. Subsequent installation(s)


Please note that the Reload Frame extension will need to be installed each time you shut down/restart start up your Mac (or Safari).

It's totally annoying I know, but Apple doesn't allow auto-installation without having an Apple Developer account. If the demand for this extension is there, we'd definitely be open to properly packaging/publishing it - if this is something you'd us to do, please let us know!

So every time you fire up your Mac:

  • Open Safari (obviously 🙄)

  • Click on the "Develop" in the top menu bar

  • Click on "Show Extension Builder"

  • Click on the "Reload Frame" extension

  • Click "Install" (top right corner)

  • Click "Install" again in the pop-up window

  • Enter you password

  • Close the "Extension Builder" window

JOB DONE 🎉

 

4. Go forth and code!


You will now have the option to right click inside of an iFrame to "Reload Frame" - happy days!

 
TechJoe Cory