cssprettifier-bookmarklet Chrome Extension Not Displaying Bookmarklet

Oh my! The very first to start an issue. I'm so honored :+1:

I've installed the extension via the Chrome store, enabled it, restarted Chrome, but I'm still not seeing the bookmarklet displayed as the animated gif depicts in the README.

Mar 18 '13 17:03 grayghostvisuals

You must be confusing this with something else. A bookmarklet is just a bookmark with some JS. This is not a Chrome extension.

@addyosmani we should have some better instructions on how to save the bookmarklet.

Mar 18 '13 22:03 sindresorhus

Also available as a UserScript by Sindre Sorhus or an existing DevTools extension by Gildas Lormeau.

clicking "extension" takes you to the Chrome Store and gives me PrettyPrint. Yeah, if this could be clearer that would be great because I want to use it, but unsure how to still.

Mar 18 '13 22:03 grayghostvisuals

Agreed. We'll try to make this clearer. I (foolishly) assumed that people knew how to add this to their bookmarks toolbar but will update the readme to make this clearer soon. Thanks for bringing this to our attention!

Mar 23 '13 22:03 addyosmani

In the readme, where is says "or use this" in the Installation section, if "use this" was embedding the javascript itself it would be easy to install by drag and dropping. That's the first thing I tried. But linking to a file defeats that purpose. Just my 0.02$.

I found it helpful nonetheless :-)

P.S.: might also want to disable the automated syntax on the line below that, under "Before" to make it more obvious why it's prettier.

Mar 23 '13 22:03 millette

If anyone can give me a quick idea how the heck to use this that would be great because it's still unclear to me.

Mar 23 '13 23:03 grayghostvisuals

@grayghostvisuals you open a minified CSS file in the browser, then click the bookmarklet to unminify it.

Mar 24 '13 00:03 sindresorhus

As for instructions on how to save the bookmarklet, there are some here we could use/link to: http://marklets.com/FAQ.aspx#howDoIAddABookmarkletToMyBrowser

http://marklets.com/cssprettifier.aspx

Mar 24 '13 00:03 sindresorhus

@sindresorhus To clarify, I've known all along what a bookmarklet is and what your project does.

This link → http://marklets.com/cssprettifier.aspx is not in the README. I want to know what to do with the copy/paste line of JS from the current README. Where do I put it? copy and paste into what? That is the part that needs clarification.

Thanks for the assistance. :metal:

Mar 24 '13 13:03 grayghostvisuals

Where do I put it? copy and paste into what? That is the part that needs clarification.

Sorry, I foolishly thought that was common knowledge. Bookmarklet -> JS in bookmark === copy, paste the JS into a bookmark.

Mar 24 '13 18:03 sindresorhus

Btw, I think much of the confusion could have been avoided if we had just had a direct drag and drop link in the readme. I tried doing this using the minified bookmarklet code but GitHub flavored markdown didn't seem to like parsing it for some reason. I'll give this another try and see if I can get further, otherwise a note about what to do with the code will just be added.

Mar 24 '13 19:03 addyosmani

@addyosmani I'm pretty sure you can't have javascript: type links in the readme. That would have been a big XSS hole.

Best solution: Convert master branch to gh-pages. Add a simple bookmarklet.html page with just the link and short instruction on having to drag the link to the toolbar. Defer users to that from the readme.

Mar 24 '13 19:03 sindresorhus

I like the idea of having a page where you drag the link to your bookmark toolbar. That's what fitweird does. http://davatron5000.github.com/fitWeird

Mar 24 '13 19:03 grayghostvisuals

sgtm, @sindresorhus

Mar 24 '13 19:03 addyosmani