Regardless of whether or not your in the web development industry, the need for a website screen capture tool is imperative for almost anyone that’s job revolves around a computer so finding the right one is huge.

Good thing I love Google Chrome, I almost torched it completely as it was breaking YouTube, Asana, Google Analytics, and lots of other sites I frequently use daily.  The irony is that it was most of Google’s own sites which were breaking on Google’s own web browser. Since today was a light work day for me I caved and spent an hour trying to figure this beast out.  I first deleted EVERY extension I had but none of that resolved the issue, next I unistalled and deleted Chrome and re-installed… no luck.  So after reading lots of forums I found where a lot of google data is stored on my hard drive and torched all of that data and then reinstalled chrome and boom… finally a clean slate with Chrome and all issues resolved.  The problem is I was never able to pinpoint what caused the issue to begin with but that’s another post some other day.

Because I was starting from scratch I had to go back and reinstall all of my extensions, bookmarks, settings, etc. In light of starting from scratch I was decided to look at some new extensions or replacements to the extensions I previously had.  As mentioned one of the most important extensions for me (and most people) is a powerful yet simple screen capturing tool.  I have tested 12 different ones extensively but always found them to be less than par.  There is one that Google developed called Screen Capture (by Google) that I have been wanting to use for a while however the tools main features set (text size/color, shapes, highlights, etc.) drops behind the image so you can’t change the settings because they fall ‘behind’ the image you are editing. I actually found that “awesome screen capture” (another extension that is a close comparison) has this same error.

Screen Capture by Google BrokenScreen Capture After Update

So looking through some more forums I found this sweet article, and updated the extensions locally on my machine by adding a z-index line to the css of the extensions. Now I get all the screen capture tools that were previously falling behind the image which allows me to change the colors, shapes, sizes, fills, etc. of my markups.  The update was super quick and extremely worth while.  I highly recommend it, too bad Google doesnt just update the css with the appropriate z index to start with.

Sometimes you just have to cave in to get your tools sharpened back up.  Thanks for reading hopefully this makes you more efficient like it did for me.

How to fix Screen Capture by Google:

1. Find showimage.css file:

Path in OS X:
/Users/$username$/Library/ApplicationSupport/Google/Chrome/Default/Extensions/
cpngackimfmofbokmjmljamhdncknpmg/$version-number$/showimage.css

Path in Windows XP: C:/DocumentsandSettings/LocalSettings/ApplicationData/Google/Chrome/UserData/Default/Extensions/
cpngackimfmofbokmjmljamhdncknpmg/$version-number$/showimage.css

*Note: ‘Local Settings’ and ‘Application Data’ are hidden folders, so you may need to change your options in Windows Explorer via Tools > Folder Options > View so that ‘Show hidden folders and files’ is activated.

2. Change .toolbar by adding z-index code:

.toolbar {
position:fixed;
height: 30px;
margin-left: 10px;
padding-top: 6px;
z-index: 100000;
}

3.Restart chrome

That’s it, you’re done.