<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"><channel><title>Posts tagged bookmarklet  - Entropy and Ecstasy</title><link>http://aaron.maenpaa.ca/blog/tags/bookmarklet/</link><description>The most recent ranting and ravings of a madman.</description><lastBuildDate>Sun, 22 May 2016 05:32:35 GMT</lastBuildDate><generator>PyRSS2Gen-1.0.0</generator><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title>Show Passwords Bookmarklet</title><link>http://aaron.maenpaa.ca/blog/entries/2010/10/31/show_passwords_bookmarklet/</link><description>&lt;p&gt;I wrote a bookmarklet that makes &lt;a class="reference external" href="http://aaron.maenpaa.ca/show_password/"&gt;password inputs show you their contents&lt;/a&gt;. The motivation is threefold:&lt;/p&gt;
&lt;ol class="arabic simple"&gt;
&lt;li&gt;Pasting &lt;tt class="docutils literal"&gt;&lt;span class="pre"&gt;$('input[type=&amp;quot;password&amp;quot;]').val()&lt;/span&gt;&lt;/tt&gt; the console of a page with saved passwords has always amused me and the bookmarklet makes this easier to do on pages that don't have jQuery.&lt;/li&gt;
&lt;li&gt;I sometimes actually want to see the password I'm typing, either because it's fiendishly complicated or for some reason I've messed up a bunch and want to verify my typing.&lt;/li&gt;
&lt;li&gt;I wanted to play with &lt;a class="reference external" href="http://sass-lang.com/"&gt;SASS&lt;/a&gt; and CSS linear gradients. So I put together a tiny website and needed &lt;em&gt;something&lt;/em&gt; to put up there on it.&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="section" id="teh-codez"&gt;
&lt;h3&gt;Teh Codez&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span class="nx"&gt;javascript&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;passwords&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'input[type=&amp;quot;password&amp;quot;]'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;passwords&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="nx"&gt;passwords&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;setAttribute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'type'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'text'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})();&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;
&lt;ol class="arabic simple"&gt;
&lt;li&gt;This is a bookmarklet, hence the &lt;tt class="docutils literal"&gt;javascript:&lt;/tt&gt; protocol. In order for the browser to not navigate to a new page, bookmarklets need to return &lt;tt class="docutils literal"&gt;undefined&lt;/tt&gt;, hence the anonymous function.&lt;/li&gt;
&lt;li&gt;&lt;a class="reference external" href="https://developer.mozilla.org/En/DOM/Document.querySelector"&gt;document.querySelector&lt;/a&gt; and friends are very cool and they let you find elements jQuery style without needing to try and pull in jQuery to run your three lines of actual code.&lt;/li&gt;
&lt;li&gt;Unfortunately, &lt;a class="reference external" href="https://developer.mozilla.org/En/DOM/Document.querySelectorAll"&gt;document.querySelectorAll&lt;/a&gt; doesn't return a real Array so you can't use &lt;a class="reference external" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach"&gt;Array.forEach&lt;/a&gt; and are stuck using JavaScript's built in &lt;tt class="docutils literal"&gt;for&lt;/tt&gt;. Sad sauce!&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
</description><guid isPermaLink="true">http://aaron.maenpaa.ca/blog/entries/2010/10/31/show_passwords_bookmarklet/</guid><pubDate>Sun, 31 Oct 2010 09:59:33 GMT</pubDate></item></channel></rss>