Webpage Selection to Snippets App

I really like the Snippets application and wanted an easy way to select some code on a webpage and insert that into Snippets. I also wanted to add the author, link, title, highlight style, license, notes and have the ability to edit the text before sending to Snippets.

Snippets has a URI-scheme of "snippet:add?code=" with several more options. This looked like what I needed so I started here. I created the JavaScript code below to use as a bookmark and then wrote a php page to handle the information gathered from the current page.

javascript:window.open("http://allancraig.net/Snippets/snippet.php?title="+encodeURIComponent(document.title)+"&code="+encodeURIComponent(window.getSelection())+"&link="+window.location, "createsnippet", "height=775,width=585,status=0,toolbar=0,menubar=0,location=0");

You can drag Snippet to your bookmark bar if you want to use the php file on my server. If not, the php code is supplied below so you can add it to your server or even in your Sites folder. Just make sure to alter the location in this JavaScript to reflect where you put and named the php file.

Here is what the php page looks like when I selected the JavaScript code above on this page and then clicked the bookmark I placed in Safari's bookmark bar. Once you fill in the missing details and click the "Send to Snippet" button, you will have a new snippet in Snippet app!

Here is the php code I am using on this site.

<?php

if (isset($_GET['title'])) {
	$title  = $_GET['title'];
	$link   = isset($_GET['link']) 	 ? $_GET['link'] : '';
	$code   = isset($_GET['code']) 	 ? $_GET['code'] : '';
	$author = isset($_GET['author']) ? $_GET['author'] : '';
}
else {
	$title  = '';
	$link   = '';
	$code   = '';
	$author = '';
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		
		<style type="text/css" media="screen">
			body {
				margin: 3em;
				background-image: url(http://allancraig.net/Snippets/bg.png);
				background-repeat: repeat-x;
				color: #6f6f6f;
				font-family: "Lucida Grande", Verdana, Arial, sans-serif;
				background-color: #FFF;
				font-size: 13px
			}
			
			div#sponsor {
				position: absolute;
				top: 10px;
				left: 400px;
			}

			input.input,textarea.input {
				border: 0 solid red;
				-moz-border-radius: 4px;
				-moz-box-shadow: rgba(0,0,0,0.296875) 0 1px 3px;
				-webkit-border-radius: 4px 4px;
				-webkit-box-shadow: rgba(0,0,0,0.296875) 0 1px 3px;
				border-radius: 4px 4px;
				box-shadow: 0 1px 3px rgba(0,0,0,0.296875)
			}
			
			#slgf td input.input, td textarea {
				width: 400px;
				font-size: 14px;
				margin: 0;
				padding: 5px
			}
			
			h1 {
				font-size: xx-large;
				font-family: Helvetica, Verdana, Arial, sans-serif;
				text-shadow: 0 1px 1px #FFF;
				color: #003230;
				font-weight: 700
			}
			
			#slgf #notes {
				height: 70px;
				width: 400px
			}
			
			#slgf #code {
				width: 400px;
				height: 200px;
				font-size: 12px;
				font-family: monospace;
				padding: 5px
			}
			
			#slgf td {
				vertical-align: top;
			}

		</style>

		<script language="javascript" type="text/javascript">

			function sendToSnippet()
			{
				var highlight  = document.getElementById('highlight').selectedIndex.value;
				
				var snippetURL = '';
				snippetURL += 'snippet:add?code=' 	+ encodeURIComponent(document.getElementById('code').value);
				snippetURL += '&relatedurl=' 		+ encodeURIComponent(document.getElementById('link').value); 
				snippetURL += '&name=' 				+ encodeURIComponent(document.getElementById('title').value);
				snippetURL += '&author=' 			+ encodeURIComponent(document.getElementById('author').value);
				snippetURL += '&highlight=' 		+ document.getElementById('highlight').value; 
				snippetURL += '&notes=' 			+ encodeURIComponent(document.getElementById('notes').value);
				
				var license = document.getElementById('license').selectedIndex.value;
				if (license != 'na') {
					snippetURL += '&license=' + license;
				}				
				
				var labels = document.getElementById('labels').value;
				if (labels != '') {
					snippetURL += '&labels=' + encodeURIComponent(labels);
				}
				
				window.location = snippetURL;
				self.close();
			}

		</script>
		<title></title>
	</head>
	<body>
		<a href="http://allancraig.net" target="_blank">Provided by AllanCraig</a>
		<h1>Submit Form to Snippet!</h1>
		<form name="frm" id="slgf">
			<table border="0" cellspacing="5" cellpadding="5">
				<tr>
					<td><label for="title">Title:</label></td>
					<td><input type="text" name="title" value="<?php echo stripslashes($title); ?>" id="title" class="input"></td>
				</tr>
				
				<tr>
					<td><label for="author">Author:</label></td>
					<td><input type="text" name="author" value="<?php echo stripslashes($author); ?>" id="author" class="input">
</td>
				</tr>
				
				<tr>
					<td><label for="link">Link:</label></td>
					<td><input type="text" name="link" value="<?php echo stripslashes($link); ?>" id="link" class="input"></td>
				</tr>
				
				<tr>
					<td><label for="filename">Filename:</label></td>
					<td><input type="text" name="filename" value="<?php echo stripslashes($title); ?>" id="filename" class="input"></td>
				</tr>
					
				<tr>
					<td>Highlight:</td>
					<td>
						<select id="highlight">
							<option selected value="apple-script">AppleScript</option>
							<option value="applescript-objc">AppleScriptObjC</option>
						  	<option value="actionscript">ActionScript</option>
						  	<option value="bash">Bash</option>
						  	<option value="c">C</option>
						  	<option value="cpp">C++</option>
						  	<option value="csharp">C#</option>
						  	<option value="css">CSS</option>
						  	<option value="cold-fusion">Cold Fusion</option>
						  	<option value="erlang">Erlang</option>
						  	<option value="javascript">JavaScript</option>
						  	<option value="java">Java</option>
						  	<option value="html">HTML</option>
						  	<option value="objective-c">Objective-C</option>
						  	<option value="plain-text">Plain Text</option>
						  	<option value="python">Python</option>
						  	<option value="php">PHP</option>
						  	<option value="ruby">Ruby</option>
						  	<option value="vb">VB</option>
						  	<option value="sql">SQL</option>
						  	<option value="xml">XML</option>
						  	<option value="xslt">XSLT</option>
						</select>
					</td>
				</tr>
				
				<tr>
					<td>License:</td>
					<td>
						<select id="license">
							<option selected value="na">-- Select --</option>
							<option value="apache2">Apache 2</option>
							<option value='bsd'>BSD</option>
							<option value='freebsd'>FreeBSD</option>
							<option value='gpl'>GPL</option>
							<option value='gplv3'>GPLv3</option>
							<option value='mit'>MIT</option>
						</select>
					</td>
				</tr>
				
				<tr>
					<td><label for="labels">Labels:</label></td>
					<td><input type="text" name="labels" value="" id="labels" class="input"></td>
				</tr>
				
				<tr>
					<td><label for="notes">Notes:</label></td>
					<td><textarea id="notes" class="input"></textarea></td>
				</tr>
				
				<tr>
					<td><label for="code">Code:</label></td>
					<td><textarea id="code" class="input"><?php echo stripslashes($code); ?></textarea></td>
				</tr>
				
				<tr>
					<td> </td>
					<td align="right"><input type="button" onclick="javascript:sendToSnippet()" value="Send to Snippet"></td>
				</tr>
			</table>
			
		</form>
	</body>
</html>

Please leave a comment if you like this example or if you have suggestions or just comments.
Know issue: In Firefox, once you click the bookmark link, the containing window tries to go to the JavaScript code url. If you know how to fix this issue, please let me know.

Comments

0 # 2012-07-17 13:30

For the life of me I can't get this to work with Safari, the only browser I have tried it on.

Are you sure it works with Safari 5.1.7? I will keep trying but just no luck, even tried using the php on my HD and linking the bookmarklet to the local version but no luck.

This would be an excellent addition and time saver if I could get it working but I have spent more time trying to get it to work then filling the forms manually would take.

Anyways, thanks for posting, if you have any tips please let me know, I will try some more but will have to give up if I can't get it working in the next 15-20 minutes. Thanks again, Cheers!

Reply | Reply with quote | Quote

0 # 2012-07-17 21:16

As I said before, I can't get this bugger to work as a bookmarklet. Not by dragging the bookmarklet named "Snippet" or manually copy pasting the code you posted into the bookmark bar. The two codes actually do not match...

Would it be much trouble to wrap this thing up into a nice safari extension?!? Contextual menu to bring up the info box to fill or even hotkey would be awesome... I never liked having to save bookmarklets to the bookmark bar because once it is out of sight you can't trigger it with a simple command + #... you have to assign a key combo in System preferences. Oh well, I am dreaming, I still can't get the bookmarklet to work.

Thanks for sharing anyhow.

Reply | Reply with quote | Quote

0 # Craig Williams 2012-07-18 19:40

Hi Bob,

I haven't used this in a very long time and I believe that Snippets app has been updated several times. It is very likely that this just will not work any longer. You might want to look at the SnippetsApp website extra page to see how you might get this working again. snippetsapp.com/.../...

Reply | Reply with quote | Quote

Refresh comments list
RSS feed for comments to this post.