There’s a one-click install available at the Safari Extensions Gallery, or feel free to download it directly below.

For an overview of features in the new version, see the original 2.0 announcement post.

Related posts:

1. Single-keystroke Instapaper in Google Reader
2. Minor TabLinks update
3. TabLinks 2.0

Originally posted on BrettTerpstra.com at TabLinks 2.0 is live

• Opens a new tab instead of an overlay.
• Adds %b (line break) to the template options. Use as many as you like, one will be inserted at the end of each line by default.
• In preferences, you can choose to operate on all open windows, or just the current foreground window.
• The template can be edited live from the TabLinks window. Save/Apply will update the links in the list with the new template.
• Default template presets are included, accessible through the “Presets” button.
• Clicking the links once will select the whole block, as will the “Select All” button.
• Double-clicking the links will make them editable, changes are saved when you click or tab out of the box.

You can download the 2.0 release below, or wait for it to update in the Extensions Gallery.

Related posts:

1. Minor TabLinks update
2. TabLinks 2.0 is live
3. TabLinks Safari Extension

Originally posted on BrettTerpstra.com at TabLinks 2.0

Primer: gleeBox is an amazing extension for Safari (and Chrome and Firefox) that gives you keyboard navigation of links, bookmarks, bookmarklets and more. If you haven’t tried it out, you should.

A while back I wrote about fixing the highlights in gleeBox. I found them just ugly enough to require measures to soften the colors and handle padding a little differently. Well, color me tickled, the latest update that just showed up in my extensions panel brings, among other things, prettier highlights. Prettier than my makeshift ones, too. Just thought I’d share…

Related posts:

1. Fixing Gleebox
2. Why I will never be a wildlife photographer
3. A little HootSuite userstyling

Originally posted on BrettTerpstra.com at gleeBox gets prettier highlights

I cleaned up a few loose ends, fixed some error messages, general housekeeping. However, I’m still stuck as to how to tell when a post to Instapaper fails. I’m unable to get a response code from the async post, so all I can really tell is that there was a response. I can’t tell if it was good or bad. So… the notification will pretty much always tell you it was a success. If your articles aren’t showing up in Instapaper, check your username and password in the settings and try again.

I doubt I’ll push much further on this, given that the Instapaper bookmarklet does a fine job with Google Reader, and you can trigger it with a ⌘-# if it’s in your bookmarks bar, # being the position of the bookmarklet in the bar, from 1–9.

Related posts:

1. Bookmarklet: Read Pinboard links with Instapaper Text
2. Instapaper Beyond: fix for text style controls
3. Single-keystroke Instapaper in Google Reader

Originally posted on BrettTerpstra.com at GReader Instapaper 0.2

Click below to download, unzip the extension and double click it to install. Head for Preferences->Extensions and set up your Instapaper username and password, and pick a hotkey. The default hotkey is “i”, which doesn’t interfere with existing Google shortcuts. Tailor to taste.

The only issue I’m having right now is that it doesn’t fail properly if you have an incorrect user/pass combination. It tells you it succeeded, but doesn’t post to your account. I’ll have to add a verification step at some point in the process. For now, if things aren’t showing up in Instapaper for you, check your username and password in the Extensions preferences. Be sure to check out Instapaper Beyond, too!

Download:

Related posts:

1. GReader Instapaper 0.2
2. Instapaper Beyond for Safari
3. Instapaper Beyond: fix for text style controls

Originally posted on BrettTerpstra.com at Single-keystroke Instapaper in Google Reader

This release includes:

• Alphabetical sorting of the help HUD (A-Z,a-z)
• Edit a bookmark with “E” (Shift-E)
  • you can tab through the fields and submit with Enter, returning you to your listing
• Scroll animation when navigating bookmark lists
  • makes it more obvious which direction the page just scrolled you in when selecting a bookmark partially or entirely offscreen.

Download:

Related posts:

1. Instapaper Beyond: fix for text style controls
2. Instapaper Beyond 1.3
3. Instapaper Beyond 1.8.7

Originally posted on BrettTerpstra.com at Instapaper Beyond 1.8.9

This is relatively minor update for Instapaper Beyond, the Safari extension which gives you full Ajax loading and keyboard control over Instapaper. It does, however, have one very cool new feature, and one often-requested fix.

The new feature is type-ahead folder selection in the popup HUDs for Move To and Go To Folder. When the HUD pops up, you can just start typing and it will find the first folder that matches the letters you’ve typed and select it. The arrow keys function as usual, and enter or right arrow will open the selected folder. If you type a few letters and then hit backspace or escape, it will clear the filter field. If you pause for a second, then start typing again, it will start a new filter, QuickSilver/Launchbar style.

The other noticeable change is that it works better with Greystyled now. It’s not perfect, as Greystyled wants to do its own thing with the Ajax-loaded text versions and there’s a major conflict. I check for Greystyled now, though, and give it a little leeway. The text view will not look like it does in Greystyled without IB loaded, but it will work for you.

If you have Instapaper Beyond loaded, it will either update automatically, or show up in your available updates if you have auto-updates turned off. If you haven’t loaded it, download it below and give it a try!

Related posts:

1. Instapaper Beyond Bugs (fixed)
2. Instapaper Beyond: fix for text style controls
3. GReader Instapaper 0.2

Originally posted on BrettTerpstra.com at Instapaper Beyond 1.8.7

I actually ended up rewriting the existing javascript as a module in Instapaper Beyond, so there’s the possibility of easily extending it to handle more options. Background color, more fonts, etc. We’ll see how far I get with that. My next order of business is to get it to work with some of the existing userstyles out there, but time has been tight for me when it comes to these side projects. I’ll keep you posted.

If you have Instapaper Beyond installed, it should show up in your updates (or be updated automatically, depending on your settings). If you want to download the extension, please use the link below. For more information on Instapaper Beyond, see the original post for the Safari Release.

Related posts:

1. Instapaper Beyond 1.8.7
2. Instapaper Beyond 1.8.9
3. GReader Instapaper 0.2

Originally posted on BrettTerpstra.com at Instapaper Beyond: fix for text style controls

BetterSource adds two buttons to your toolbar. The first is for viewing the source code of the current page in a new tab, and with line numbers and syntax highlighting. That in itself is a huge improvement over the native source viewer. The second does the same, but with the rendered source (after DOM changes and other javascript fun), which is basically what you get in the Inspector, but with less fuss and easier copying.

Entropy provides the second extension (actually, a plugin to be placed in ~/Library/Internet Plugins), called the XML View Plugin. It provides a more Firefox-like view of XML data (which Safari fails to display), and also formats JSON data for easy viewing. For anyone who works with API’s and consumes web services, this is a great tool and a welcome addition to Safari.

Related posts:

1. Clippable updated to remove source code line numbers
2. Instapaper Beyond in the Safari Extensions Gallery
3. Single-keystroke Instapaper in Google Reader

Originally posted on BrettTerpstra.com at New Safari Extensions give good source

The automatic update is functioning, so anyone with TabLinks already installed should see it show up in their updates, or just update automatically if you have that option enabled. This version should show up as 1.3. If you’re looking for the initial install, you can find it below.

Related posts:

1. TabLinks 2.0 is live
2. Instapaper Beyond 1.8.7
3. Minor update to Instapaper Beyond (1.4)

Originally posted on BrettTerpstra.com at Minor TabLinks update

Okay, this one has a little refining left to go, but it seems to be working pretty flawlessly. I ported most of the code from a greasemonkey script. All I really want to add is a toolbar item that lets you easily turn it on and off, and maybe a whitelist feature.

There are actually legitimate uses for a plugin like this. Seriously.

Related posts:

1. Instapaper Beyond 1.8.7
2. Instapaper Beyond: fix for text style controls
3. Safari Reader Antique hack

Originally posted on BrettTerpstra.com at RedirectBuster, another late night Safari Extension

TabLinks is a quick experiment, designed to meet my own needs. It needs some work, but it does the trick: it copies the link information for every tab open in Safari, and outputs them as a list, based on a user-defined template. You set up your template in the Extension settings, and use the following variables to define your link style:

• %u = URL
• %t = title
• %w = window index
• %n = tab index (within window)

That’s all there is for now. The default link format is a Markdown reference list, with the references being window#-tab#, so they come out as [0-12]: yourlink.com "and its title". If you dig Markdown, you can easily modify this to make a list of titles linked to their respective pages by changing the template to * [%t](%u). If you’d rather get plain HTML, try <a href="%u">%t</a>. Maybe you just want a list of URLs, in which case your template would just be %u.

Like I said, it’s pretty simple right now, and may stay that way while I go back to tidy up and improve on InstapaperBeyond. I do plan to add a checkbox to the settings that lets you decide whether clicking the toolbar button copies just the current window’s tabs, or all tabs as it does now. I would have liked to add a “copy to clipboard” button, but (as far as I know), Safari doesn’t allow access to the clipboard in any fashion, even with something like ZeroClipboard.

The popup window could use some classing up, too… a little CSS3 animation/transition and some more consistent styling that isn’t constantly being overridden by site styles. However, it’s quite useful to me as is, so I’m sharing it in the hopes that others will find it as helpful as I do. Personally, I use it when I write posts, especially on TUAW, where there are a lot of links to deal with. I pop open the links I know, run searches in new tabs for the ones I need, then copy the whole bunch as references to paste into the top of my post.

Related posts:

1. TabLinks 2.0
2. Minor TabLinks update
3. nvALT 1.0.7

Originally posted on BrettTerpstra.com at TabLinks Safari Extension

For a quick “how-to” on using the Antique (or any) Safari Reader hack, see the related article in the HowTo section.

This will be the last release of Antique, I think, barring a few minor fixes (follow @ttscoff for updates on this and other projects). You can download it here. The code is completely open source, if anyone wants to continue the project feel free (credit would be swell, where it’s due). I’ll be putting my free time into Instapaper Beyond and other more “legitimate” projects now (although I really would like to do a nice, high-contrast, Helvetica version…). In deference to Faruk Ateş, I’d like to clearly state that this is a hack, and you run a risk (albeit very minimal) of breaking your Safari install if you don’t know what you’re doing. I also won’t be posting further simplified instructions for installation, but they’re not hard to find. For advanced users, you simply need to know that you’re replacing Reader.html in Contents/Resources.

The coolest changes, in my opinion, are an amped-up Widon’t for headlines, and improved image linking. On the Widon’t end, if a title exceeds the width of the headline area, it’s actually split in the middle to provide more equal-length lines. It’s neat-o. And for the images: I had it only lightboxing images which were too large for the style and which weren’t already linked somewhere else, resulting in the user never knowing what would happen when they clicked an image. Now, if an image is linked to an external site, that link is extracted and placed on a line below the image. If an alt or title attribute are present in the image or the link, they’re preferred over the source attribute for naming the link, which should provide a decent idea of where you’re going, in most cases. Images which are linked, then, are always linked to the Colorbox effect, and will never take you out of the Reader page. Ah, consistency.

Here’s what else is new in this version.

• I swapped out the scrollbar images, shifted the colors a little, and included them in the HTML file.
• Some style changes, including a darker background and slightly heavier gradient
• Massively fixed up the ampersand code. Also shifted ampersands 1 pixel left for better kerning within non-italicized text.
• Improved smashing of empty paragraphs in bad markup to avoid huge spaces between paragraphs.
• Fixed a CSS mistake I had introduced which caused the background and drop shadow to be visible before the content slid up from the bottom.
• Set up an onscroll check for new elements. Every time the page is scrolled, Antique checks for new elements (i.e. additional pages that were inserted after initial load) and applies the default functions to them.
• did I mention 12px Droid Sans Mono for code blocks? 12px seems reasonable, and doesn’t change when zooming/shrinking the rest of the text.

Are there too many buttons in the HUD for your taste? They’re there as an example, but you can remove them easily by commenting out the “button” lines at the bottom of the Reader.html file. The HUD will adjust size and position automatically based on the number of buttons you have in there, so just remove the ones that aren’t of use to you.

If you’re playing with Reader styles, here’s a tip: you can set up a “sandbox” page to speed up development (at least with css). Once Reader has loaded a page that has elements you want to style, right click and choose “Inspect Element” (obviously, you have to have the developer menu enabled in preferences). Then, right click on the doctype declaration in the element inspector and choose “Copy as HTML.” That will give you the full HTML of the rendered document, which you can save to a new HTML file. Extract the inline stylesheets and link them into external stylesheets, and you can edit in CSSEdit or Firebug. It’s handy, given that, in order to change the live styles, you have to restart Safari every time you edit Reader.html.

I had started working on smart quotes and other javascript-based typography changes, but decided it wasn’t worth the time to try to come up with regular expressions that covered every possible circumstance. If anyone wants to pick up where I left off, I’d love to see what you come up with.

For a quick “how-to” on using the Antique (or any) Safari Reader hack, see the related article in the HowTo section.

Related posts:

1. Antique is back, baby
2. Antique Safari Reader hack update with Evernote goodness
3. Safari Reader Antique hack

Originally posted on BrettTerpstra.com at Antique 1.6, final release

Version 1.5 1.6 of Antique (originally posted here) is officially available for download. Here’s what’s new!

• jQuery: added the jQuery library via Google’s Ajax API to make some of the other additions much easier to implement.
• Colorbox: links to images are automatically opened in a “lightbox” so you don’t have to leave the page. Uses jQuery Colorbox and automatically applies the effect to links ending in ‘.jpg’ or ‘.png’.
• Widon’t: headlines and paragraphs have a widon’t function applied to them, preventing “widows” (short words alone on a line). This was mostly annoying me in the top-level headings of the page, but it’s a nice touch throughout. It ignores words longer than 8 characters. They’ll do just fine on their own.
• New HUD buttons: in addition to the Evernote web clipper button in the floating HUD, there are new buttons for DEVONthink, Delibar and Webbla. These are mostly to show how to pull it off, and are easily edited. See the instructions below to remove buttons from the HUD.
• Pass text selections: unlike using bookmarklets, clicking on a HUD icon makes you lose your text selection. Any service that accepts a selection as a note or description (Evernote, DEVONthink, Webbla, etc.) won’t normally work. By storing the selected text in an HTML5 sessionStorage key every time your mouse enters the HUD, Antique is able to pass what was selected before you clicked the button. Still working on making this function with Evernote.
• Smarter image resizing: when you load a page, Antique shrinks the larger images. It’s smarter now, though: wide, centered images are only reduced slightly and left centered, and any floated images that are reduced (and aren’t already linked somewhere) are now linked to the full size version of themselves, which will display in-page using Colorbox. Floated images also have bottom margin and clear:left applied to them to prevent horizontal stacking when images are close to each other in the layout.
• Minor Update: (version 1.5.1) I just swapped out Crimson Text for OFL Sorts Mill Goudy TT, primarily because I like the quotation marks much better. I also added hanging quotes (image-based) to blockquotes, and improved code blocks and bulleted lists wrapped around images.

Installation

If you want to try out the style, download it here and open the archive. Inside you’ll find a file called Reader.html. The file you’re going to replace (back it up somewhere safe first) is /Applications/Safari.app/Contents/Resources/Reader.html. If you don’t know how to do this from Terminal, you can just do it in Finder: go to your Applications folder and locate Safari, then right click on it and choose “Show Package Contents.” That will open a new window with the inner workings of Safari inside it. Open the folder called Contents, and then the Resources folder inside of that. Locate the file Reader.html and drag it out to your desktop (that’s your original, keep it safe). Then drag the new Reader.html file you downloaded into the Resources folder. Restart Safari and try it out!

There are lots of minor efficiency and style tweaks, but those are the major changes. If you’re interested in modifying the HUD (removing unnecessary buttons), read on…

Removing HUD buttons

This part is a cinch, even if you don’t know anything about Javscript or HTML. The HUD buttons are in the HTML body section of the Reader.html file, and you can just edit them out in a text editor. If you open the file (Reader.html) in a your editor of choice (as plain text, not rich text), and scroll all the way to the bottom, you’ll see a series of “<button id="hud... >” lines. It will be pretty obvious what each one is for, and you can simply comment out or delete the lines for buttons you don’t need. Antique will automatically resize and reposition the HUD based on the number of buttons in it, so that’s all you have to worry about.

Adding HUD buttons

Adding buttons is a different story, depending on what you want the button to do. So far, I’ve mostly been converting existing bookmarklets. You can set the function to call right in the button definition (just copy an existing button and edit it), then add the appropriate function to the script section above. Note that any bookmarklet that uses window.location, location.href or any means of getting the page title attribute are going to break. Reader overrides all of that, but thankfully, it stores the info in an object called ReaderJS. You can access the original page url with ReaderJS.originalURL and the title with ReaderJS.displayTitle. Those two make it pretty easy to cover 90% of bookmarklets you’d want to use.

I’m including most external javascript plugins and libraries directly in the html page. Standard rules don’t apply, this is all being served locally and the fewer files you have to keep track of, the easier it is to distribute. If your needs are different, you can reference external files in the Safari.app/Contents/Resources folder with safari-resource:/filename.ext, where filename.ext is the name of the file.

Antique handles the resizing of the HUD automatically, but if you’re doing it from scratch you’ll need to adjust the width and left-margin of #hud in the css section. The buttons are 48x48px PNG files, with the icon occupying approximately 36x36px of that space. White and transparent pixels only, if you want to fit the aesthetic, and the “inactive” version should be saved at about 70% opacity. I’ve been encoding all of my PNG files in base64 and including them inline in the CSS to make it easier to distribute, but you can reference them as mentioned above.

You also can’t use document.location when Reader.html is loaded, so most bookmarklets need to be modified. You can use window.open and immediately close the new window, like this:

function sendToWebbla() {
    var wlWindow = window.open('webbla:url='+encodeURIComponent(ReaderJS.originalURL)+'&mode=modify&title='+encodeURIComponent(ReaderJS.displayTitle))+'&textSelection='+encodeURIComponent(sessionStorage.getItem('textSelection'));
    wlWindow.close();
    self.focus();
}

I have the self.focus() in there because I have Saft running and restoring focus to the last active tab, which somehow is missing and leaving me on the wrong tab when I execute the above sequence. So this just brings me back to the right tab. When it runs, you can just barely see that it’s even opening a new window/tab. Should be pretty seamless for most folks.

I think that covers the process in a general sense. Each button I’ve added has had its own quirks and issues, so it would take a lot longer to detail every possible problem you’d run in to.

Related posts:

1. Antique Safari Reader hack update with Evernote goodness
2. Safari Reader Antique hack
3. Antique 1.6, final release

Originally posted on BrettTerpstra.com at Antique 1.5 for Safari Reader

There is a new version of Antique available! Check out version 1.6!

I was thrilled when it was first announced that someone had located the HTML/CSS for the new Safari Reader functionality in Safari 5, which happened the day it was released. I’ve been toying around with some ideas in the days since, and this hack is the result of a little too much effort. Click the screenshot thumbnail to see a full version.

It has a few interesting components…

• Uses CSS3 to find doubleclick.net ads, which Reader sometimes misses because they inject after the DOM loads
• Uses CSS3 to remove blank paragraphs and paragraphs containing nothing but a line break tag
• It only shows the title once, as opposed to at the top of every page
• Many style changes, including:
  • uses Google fonts (Crimson Text)
  • “antique” color palette, which extends to the background and HUD
  • less-contrasty links, easier to read over but still noticeable
  • slight gradient in the background
• Extra button in the HUD (Evernote, experimental)
• Narrower scrollbar
• Left-justified text
• Currently attempting to resize images to max-width 300px (but it’s not resizing properly if width/height attributes are set. I’ll fix that shortly.)
• Update: using a little Javascript now to resize the images proportionally after page load.
• Adds dashed line indicating page breaks, lightens and shrinks page numbers
• Update: added a background image. Let me know what you think.
  • Update to update: there’s a second download link without the background image.

Page break closeup

If you want to try out the style, download it here (with background image), or grab the version with no background image, and open the archive. Inside you’ll find a file called Reader.html. The file you’re going to replace (back it up somewhere safe first) is /Applications/Safari.app/Contents/Resources/Reader.html. If you don’t know how to do this from Terminal, you can just do it in Finder: go to your Applications folder and locate Safari, then right click on it and choose “Show Package Contents.” That will open a new window with the inner workings of Safari inside it. Open the folder called Contents, and then the Resources folder inside of that. Locate the file Reader.html and drag it out to your desktop (that’s your original, keep it safe). Then drag the new Reader.html file you downloaded into the Resources folder. Restart Safari and try it out!

Some gory details about the process follow…

Antique HUD with Evernote button

I added a button to the HUD as a proof-of-concept. It doesn’t do anything very useful yet, the current one just loads the title and URL in the Evernote web clipper in a new tab/window. It would be far more useful if I could get the in-page web clipper to work, but when Reader loads, “Reader.html” becomes the current location and title. You can access the original information using the ReaderJS object (ReaderJS.originalURL for example), but Evernote’s web clipper doesn’t let you pass those in, it wants to find them itself. I played around with loading the entire contents of the Reader-rendered page into an iFrame and calling it from there, but I gave up on that after a while. The default print and email functions have success doing something similar; it’s more the Evernote clipper that’s dragging me down. Anyway, you can add Javascript right in the Reader.html file and insert a button to call it. It’s easy.

Update: I figured it out. I had to dupe Evernote’s injected javascript, edit it to use the ReaderJS object that Safari provides for getting the original url and title, then compress and include it in the Reader.html file. It should be fully functional now: pops up the hovering frame and lets you add tags and notes, clips just what Reader is showing using Reader styles (no cleanup necessary in Evernote!) and sends it to your main notebook without opening a new window. If you’re not an Evernote user, you can remove the button just by locating it near the bottom of Reader.html in the body portion. It’s clearly labeled. You’d also want to narrow the HUD back down, so look at the #HUD style and set the width appropriately.

All external images used in the style are base64-encoded and included in the html file, so there are no extra files to mess with. The Google fonts are loaded directly from Google’s website, so reading offline would provide a different look, but who reads web pages in Safari when they’re offline, really? Using Google’s Ajax API’s, you can also easily inject jQuery into the mix, but I haven’t found anything really useful to do with it yet. Actually, I just hacked in Colorbox and improved image resizing with some jQuery… it’s definitely going to be in the next release.

So, that’s the story. I’m sure I’ll have completely revamped this by the end of the weekend, but it’s at a good place right now. Here’s the download link again: Antique Style (and with no background image). Also, I got bored with looking at this style at one point, and decided to make a TUAW style, just for giggles. If you’re curious what the whole web would look like through a TUAW lens (preview), you can try that one out too. As always, have fun.

There is a new version of Antique available! Check out version 1.6!

Addendum: I’ve realized it would be entirely possible to add my own HUD with various style selectors and just switch out stylesheets with Javascript. Expect the next Reader hack I release to be a multi-theme bundle of fun. I’ve had to scratch this plan for lack of cross-domain local storage for preferences. I can’t access the safari.extension API from the Reader.html file, and I can’t store a cookie because once Reader loads there’s no domain to attach to. If anyone has a good idea that doesn’t involve complicated installs, let me know! In the meantime, I’m beginning work on a web tool reminiscent of Arc90’s. It will take your choices of fonts, colors and backgrounds and generate a ready-to-install Reader.html file for you. Not sure how soon I’ll get it done, but be sure to follow me on Twitter and/or subscribe to the RSS feed for updates.

Related posts:

1. Antique Safari Reader hack update with Evernote goodness
2. Antique is back, baby
3. Antique 1.5 for Safari Reader

Originally posted on BrettTerpstra.com at Safari Reader Antique hack