Chrome Extension Not Displaying Bookmarklet

[grayghostvisuals]

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

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.

[sindresorhus]

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.

[grayghostvisuals]

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.

[addyosmani]

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!

[millette]

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.

[grayghostvisuals]

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.

[sindresorhus]

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

[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

[grayghostvisuals]

@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. 🤘

[sindresorhus]

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.

[addyosmani]

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.

[sindresorhus]

@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.

[grayghostvisuals]

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

[addyosmani]

sgtm, @sindresorhus