[Post To Tumblr](https://chrome.google.com/webstore/detail/post-to-tumblr/dbpicbbcpanckagpdjflgojlknomoiah) my popular Chrome extension will be entering its 6th year of continual development this year so I thought it fitting that I give it a much needed overhaul.

It had been long coming, the last major update I gave it was about 1.5 years ago. In that version I moved the backend from Google App Engine over to Parse and I rewrote the frontend to use requireJS and knockoutJS. Although they have served me well, a lot has happened in the past 18 months and maintaining the client code was starting to become painful.



So I decided to checkout what all the cool kids were talking about these days: React.

[React](https://facebook.github.io/react/) is a really cool Javascript framework from Facebook which uses some interesting technologies to render the UI of your application using a component-based structure. It does this by inventing its own language / markup format called JSX which is a hybrid of Javascript and HTML much like MXML was a hybrid of XML and AS3\.

Although awesome to use, and I managed to get it working pretty quick with Typescript too I found that the build chain needed was really a headache. I went through so many different tools and variants. I found that people no longer use Grunt, its now Gulp then I heard some people just use NPM scripts then I read that you want to be using Webpack or Browserify with React. So many tools and options really hampered my progress and ended up giving me a headache.

I eventually fought through the tooling quagmire and ended up with a Gulp / Webpack / Typescript hybrid that sort of work but it takes a long time to compile which i'm not happy about so im definitely on the lookout for a better solution there.

Anyways, now that I have a shiney new client codebase I decided to go through some of the features that people have suggested and implement them so since version 6 came out I have done 6 more updates:

> - v6.7 - 25/01/2016
>
> * Added a new option to general that lets you set what state the format post window should be opened in:
>
> * Added a privacy policy to the account page
>
> * Require privacy policy to be accepted before signing up
>
> * Added a "clear formatting" button to the format page.
>
> * Users that arent logged in must not provide an email when reporting an error
>
> * Fixed a spelling mistake (Thanks Tom)
>
> * Logs older than 2 days are now removed
>
> - v6.6 - 19/01/2016
>
> * The "Remind Me in A Month" and Two Weeks are now working as expected, sorry about that!
>
> * One-click now also gets a reminder.
>
> - v6.5 - 18/01/2016
>
> * The donate button now correctly links to the donation page.
>
> * Added another donation popup, only showing it every 6 months.
>
> * Removed some unnecessary logging to preserve privacy.
>
> - v6.4 - 14/01/2016
>
> * Increased the size of the format post page a little, its 2016 after all ;)
>
> * HTML editing text areas are now resizeable.
>
> * Previous tag sets are now listed in reverse date order that they were used. It displays a maximum of 6 tags. If you have more tags sets you can optionally select to view them.
>
> * Fixed an issue with context menu items not refreshing after adding an account
>
> - v6.3 - 14/01/2016
>
> * Post scheduling is back in addition to queuing. Queuing a post just adds it to the queue, scheduling lets you pick a specific date. (thanks joe, vitor, blinkingline, and others!)
>
> * Fixed an error in the oneclick options which was causing a few errors including not able to rearrange sibling menu items. (thanks adena)
>
> * Reduced the number of plugins TinyMCE is using in the format post window which I hope will increase performance of the text areas, let me know if you are still experiencing issues. (thanks shiinto)
>
> - v6.2 - 12/01/2016
>
> * Added saved tags back to the format post page
>
> - v6.1 - 12/01/2016
>
> * Added HTML editing back to the various text areas in the extension, sorry about that!
>
> * Currently you cannot click a text area in the format post window to have it auto-fill with a value, im working on it :)
>
> - v6.0 - 11/01/2016
>
> * Huge new internal update, should make future changes much easier but may have caused a few bugs, please do report them if you see them!

So im keen to do new features and upgrades so email me if you have suggestions!

As always you can grab Post To Tumblr over at the Chrome Web Store: [https://chrome.google.com/webstore/detail/post-to-tumblr/dbpicbbcpanckagpdjflgojlknomoiah](https://chrome.google.com/webstore/detail/post-to-tumblr/dbpicbbcpanckagpdjflgojlknomoiah)

One thing that has always bothered me with Post To Tumblr ever since version 1.0, and I have finally fixed it in 5.9!



First I should explain how photo posting works in Post To Tumblr. Its pretty simple. First I take the URL of the image the user clicks on from Chrome, then send that URL to my server with some other information (such as formatting options) then I bundle all that up into an API call to Tumblr. Tumblr then takes that URL and downloads it, caching it to its own server returning a URL with the newly created post, I hand that back to the browser for the user to view and we are done.

Now the problem comes if Tumblr is unable to access that image. That could happen if the image is behind a password protected firewall such a GMail attachment or a private Facebook photo for example.

The solution is to upload the image bytes to Tumblr directly so that Tumblr doesn't have to go and try to download the image from a URL. The problem is that the Tumblr API is a NIGHTMARE. Im not kidding, I have struggled for years (off and on) to try to get this to work with no hope.

An idea came to me the other day however, why not just cache that image on my server temporarily then provide a URL that tumblr can definitely access and use to download the image. Well after an hour or two of hacking I have it working!

<iframe width="640" height="360" src="//www.youtube.com/embed/Fpn6MVzjqss?list=UU9-RJld8R0v5ywwBT8csdZA" frameborder="0" allowfullscreen></iframe>

Images are cached on my Parse.com backend and will be deleted after a certain period of time.

Im so happy to finally have this working. Now I have this in place I hope to get uploading from the desktop working soon!

[![head](/wp-content/uploads/2013/03/head1.png)](/posts/posttotumblr-v3-18-fixed-tumblr-oauth-change/attachment/head-9/)



Just a quick update to say I have now fixed the authentication issue my [PostToTumblr](https://chrome.google.com/webstore/detail/post-to-tumblr/dbpicbbcpanckagpdjflgojlknomoiah?hl=en) that quite a few people contacted me about.

What was going on was that Tumblr appear to have changed the format of the data they return from a token request which was causing a library that PostToTumblr relies on to fail.

Before PostToTumblr can post content on a users behalf it first must get an "access token". This token is given to PostToTumblr as part of the authentication flow.

When PostToTumblr first starts up it checks to see if it still has a valid token (they can expire over time and other various reasons). If it doesnt it must go through the authentication flow. Firstly it redirects the user to the grant permission dialog:

[![screenshot_02](/wp-content/uploads/2013/03/screenshot_02.png)](/posts/posttotumblr-v3-18-fixed-tumblr-oauth-change/attachment/screenshot_02-13/)

When the user clicks allow Tumblr then returns an "oauth token" and an "oauth verifier" to PostToTumblr, which it can then use to get an "access token" which is used to do the posting.

The problem that this update fixed was that the "oauth verifier" that was returned from Tumblr changed:

[![screenshot_03](/wp-content/uploads/2013/03/screenshot_03.png)](/posts/posttotumblr-v3-18-fixed-tumblr-oauth-change/attachment/screenshot_03-10/)

You see at the end of the query string there is now a "#_=_" well this was causing havoc with the URL parameter parsing code in the Google oauth library I was using.

My solution is quick and dirty, just strip out the "#_=_" from the url while parsing:

// MIKE HACK!!  
if(param.indexOf('oauth*verifier=')!=-1)
{
param = param.replace('oauth_verifier=','');
param = param.replace('#*=\_','');  
 decoded['oauth_verifier'] = ChromeExOAuth.fromRfc3986(param);
}
else
{  
 var keyval = param.split("=");
if (keyval.length == 2) {
var key = ChromeExOAuth.fromRfc3986(keyval[0]);
var val = ChromeExOAuth.fromRfc3986(keyval[1]);
decoded[key] = val;
}
}

Well I hope this helps anyone else that may encounter this issue too!

[![head](/wp-content/uploads/2013/01/head1.png)](/posts/posttotumblr-v3-12-update/attachment/head-5/)

I have finally found some time to do a long overdue update to my popular Chrome extension [PostToTumblr](https://chrome.google.com/webstore/detail/dbpicbbcpanckagpdjflgojlknomoiah) built using Haxe. 30,000 people currently have the extension installed and they post about 10,000 images, links, quotes per day so I thought it was about time to give it some love.



The list of improvements are:

- One-Click posting now available in the options
- Tall images now no longer appear off the screen
- Notifications now used instead of popups
- Improved error detection
- Improved authorization process

The main feature in the update is the one-click posting. This much-requested feature was available in the original PostToTumblr but for various reasons never made it into the latest reincarnation.

[![screenshot_01](/wp-content/uploads/2013/01/screenshot_011.png)](/posts/posttotumblr-v3-12-update/attachment/screenshot_01-9/)

Once enabled in the options it enables the user to bypass the post preformatting window that usually pops up and instead posts with some default settings. If you have more than one blog the post menu gives you the option for which blog you would like the post to go to:

[![screenshot_05](/wp-content/uploads/2013/01/screenshot_051.png)](/posts/posttotumblr-v3-12-update/attachment/screenshot_05-7/)

The normal popup "posting.." window has been replaced with HTML5 notifications.

[![screenshot_02](/wp-content/uploads/2013/01/screenshot_02.png)](/posts/posttotumblr-v3-12-update/attachment/screenshot_02-12/)

This should make posting a smoother, less intrusive process.

If you haven't got the extension already you can grab it on the [Chrome Store](https://chrome.google.com/webstore/detail/dbpicbbcpanckagpdjflgojlknomoiah) else Chrome should auto-update the extension for you very soon!

[![](/wp-content/uploads/2012/09/newhead.jpg "newhead")](/wp-content/uploads/2012/09/newhead.jpg)

I have been working off and on for a while on an update to my [popular Chrome Extension 'Post To Tumblr'](https://chrome.google.com/webstore/detail/dbpicbbcpanckagpdjflgojlknomoiah) and seeing as Tumblr have[ just changed thier API](https://developers.tumblr.com/post/28557510444/welcome-to-the-official-tumblr-developers-blog) I thought it was time to accelerate its development and release it, finally.



First some screenshots to give you an idea of what it does:

[![](/wp-content/uploads/2012/09/postss01.jpg "postss01")](/wp-content/uploads/2012/09/postss01.jpg)

You can right-click any thing on a page and "Post To Tumblr".

[![](/wp-content/uploads/2012/09/postss02.jpg "postss02")](/wp-content/uploads/2012/09/postss02.jpg)

A new tab opens where you can format it how you like.

[![](/wp-content/uploads/2012/09/postss03.jpg "postss03")](/wp-content/uploads/2012/09/postss03.jpg)

You can change the post type very easily.

[![](/wp-content/uploads/2012/09/postss04.jpg "postss04")](/wp-content/uploads/2012/09/postss04.jpg)

When done you just "Create Post"

This version is written totally from scratch using Haxe's Javascript target. Although not strictly necessary for something as simple as this I thought it was a good opportunity to experiment around with Haxe's JS capabilities. I must admit I was pleasantly surprised at how well it worked.

Most stuff just worked. There are also plenty of externs out there for the popular Javascript [libraries on lib.haxe.org](https://lib.haxe.org/t/js) such as the "chrome-extension" library.

Having type-safe Javacript is great for for so many reasons that im not going to get into here. I must admit however there were times when I was lazy and didn't want fancy creating a type-safe extern class for a library. Fortunately however Haxe has a mechanism for the lazy coder in the form of "untyped".

An example of this is the way in which you access the "localStorage" object in chrome extensions. localStorage is basically a global object that you can set keys and values in and will persist for the life of your extension. To access it you use: "localStorage[myKey]" to return a value. If you tried to do that in Haxe it would throw an error because Haxe has no concept of global variables (quite rightly).

So to access the localStorage you can use untyped to quickly get access to a global variable, I then decided to wrap this little hack in a Model class to make it a little neater:

```haxe
package models;
import js.Lib;

/**
 * ...
 * @author MikeC
 */

class ChromeLocalStorageModel extends BaseModel
{
	public function get(key:String) : Dynamic
	{
		var val = untyped localStorage[key];
		trace('Getting from localStorage: '+key+" :: "+val);
		return val;
	}

	public function set(key:String, val:Dynamic) : Void
	{
		trace('Saving in localStorage: '+key+" :: "+val);
		untyped localStorage[key] = val;
	}
}

```

This lets you just just mix and match the type-safe stuff when you need to and just do a little "hack" when you need to ;)

The above example also shows off another cool feature im using in Post To Tumblr, which is RobotLegs. Thanks to the fact that the [RobotHaxe](https://github.com/DavidPeek/robothaxe) library is written in pure Haxe (has no platform specific bits) that means I am able to use it on a Javascript project.

The only problem is the issue with Views and Mediation. Because unlike Flash events don't bubble up to a central source there is no way to do automatic mediation in the JS target. Instead what you do is implement "IViewContainer" on your context view, then whenever a child is added or removed you call viewAdded() or viewRemoved() that way the MediatorMap can try to make a mediator for that view.

Im not sure if the way I have used RobotLegs is the correct or best way, it was more of an experiment as I went along. The way I have done it is to wrap many of the main HTML elements in my own view classes. So for example I have a "DivView" that represents a "div" and extends BaseView:

```haxe
class DivView extends BaseView
{
	public function new(elementId:String=null)
	{
		super(Lib.document.createElement('div'));
		if (elementId != null) element.id = elementId;
	}
}

```

BaseView implements the IViewContainer interface:

```haxe
class BaseView implements IViewContainer
{
	public var viewAdded:Dynamic -> Void;
	public var viewRemoved:Dynamic -> Void;

	public var element : HtmlDom;
	public var parent : BaseView;
	public var children : Array;

....

	public function new(element:HtmlDom)
	{
		this.element = element;
		this.children = [];
		isLayoutInvalid = true;
	}

	...

	public function add(child:BaseView) : BaseView
	{
		children.push(child);
		child.parent = this;
		child.viewAdded = viewAdded;
		child.viewRemoved = viewRemoved;
		if(viewAdded!=null) child.addChildren();
		element.appendChild(child.element);
		if (viewAdded != null) viewAdded(child);
		return child;
	}

	public function remove(child:BaseView) : Void
	{
		if (viewRemoved != null) child.removeChildren();
		children.remove(child);
		child.parent = null;
		child.viewAdded = null;
		child.viewRemoved = null;
		element.removeChild(child.element);
		if (viewRemoved != null) viewRemoved(child);
	}

	...

}

```

Then say I want to construct the following html:

```haxe
<div id="container">
<div id="inner">Hello World!</div>
</div>
```

I would do something like this:

```haxe
class MainPopupContainer extends DivView
{
	private var inner : DivView;

	public function new()
	{
		super("container");

		inner = new DivView("inner");
		inner.element.innerHTML = "Hello World!";
		add(inner);
	}
}

```

Then perhaps I want to turn the "Hello World!" red when clicked I would do something like this:

```haxe
class MainPopupContainer extends DivView
{
	private var inner : DivView;

	public function new()
	{
		super("container");

		inner = new DivView("inner");
		inner.element.innerHTML = "Hello World!";
		add(inner);

		new JQuery(inner.element).click(onInnerClicked);
	}

	private function onInnerClicked()
	{
		inner.element.style.color = "#FF0000";
	}
}

```

What this means is you have a RobotLegs-familiar looking View with a Mediator behind it (thanks to the mediation happening when you call add()) which is nice. What it does mean however is I have quite abit of boiler plate wrapping the HTML nodes, which definitely slowed down my development.

Another thing im not sure about is my mixing of in-line styles and stylesheets. Sometimes I would use the styles in my css and other times I would just set them on the element directly. To be honest, because I was using classes and inheritance and all that good stuff I usually found it easier and more expedient to set the styles inline in my View class rather than go digging through several hundred lines of css to find the selector I was looking for

For example I may have a "HeaderOptionButton" that defines some inline styles then whenever I wanted a button that looked and acted like a header button I would just make and add a HeaderOptionButton. I know im probably going to get flamed to hell and back for that!

As I said, im not sure if im doing it the "right" or "best" way, its just the way that seemed to work at the time ;)

Well that's a quick overview of where im at. Once I have cleaned the project up a little and added some missing features ill be sticking the source up on GitHub for anyone interested.

[![](/wp-content/uploads/2011/06/Shot_01.png "Shot_01")](/wp-content/uploads/2011/06/Shot_01.png)

I cant believe how well my humble little extension for the chrome browser is doing. [8000 users](https://chrome.google.com/webstore/developer/detail/dbpicbbcpanckagpdjflgojlknomoiah/publish-accepted) when just a few months ago [I was celebrating 1.5k](/posts/posttotumblrs-1628th-user-celebration/).



There were so many requests for new features and things that I thought I would push an update out this evening to add a little more functionality.

From the change log:

- v.0.8 -- 19/06/11 --

* Text, Page, and Links are now supported in addition to Images
* Added an app icon to the bar for easy access to the options

To highlight these new changes I decided to update the promo video too:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/hvqjEXdAeqI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I have also added a donation button into the options. I have no idea if anyone will click it, an interesting experiment tho.

If you have it installed it should auto-update, if not go grab it over on the chrome app store: [https://chrome.google.com/webstore/detail/dbpicbbcpanckagpdjflgojlknomoiah](https://chrome.google.com/webstore/detail/dbpicbbcpanckagpdjflgojlknomoiah)

[![](/wp-content/uploads/2010/12/icon128.png "icon128")](/wp-content/uploads/2010/12/icon128.png)

Just a quick update to my chrome extension tonight. I recently had an email asking if there was a way I could make it so that you could send a Tweet at the same time as posting to Tumblr.



After a quick check on the Tumblr API to confirm that yes Tumblr supports the "post-to-twitter" option I spun out this little option.

So now you have three options for tweeting when posting: "no", "auto" and "prompt".

Chrome should auto-update the extension for you soon. If you dont have it hope over to the [gallery page here](https://chrome.google.com/extensions/detail/dbpicbbcpanckagpdjflgojlknomoiah?hl=en).

[![](/wp-content/uploads/2010/10/Shot_0012.png "Shot_001")](/wp-content/uploads/2010/10/Shot_0012.png)

Today is a small update day it seems.



I have updated my Post To Tumblr extension again. I was getting a couple of requests for the ability to add a 'caption' to a post before the image is uploaded so I cranked out this little feature. You can enable it in the options.

Once enabled rather than immediately posting the image it will popup a new tab allowing you to add a caption or whatever to your post:

[![](/wp-content/uploads/2010/10/Shot_0022.png "Shot_002")](/wp-content/uploads/2010/10/Shot_0022.png)

Its not perfect, I would have preferred the pre formatting window to open in a div popup on the current page instead of a whole new tab, but for now this solution is simple and it works.

I must admit I borrowed the idea from another Tumblr posting extension called "Share on Tumblr". The code is ultra simple:

```html
<html>
  <head>
    <script>
      // Thanks to share on tumblr extension for this
      chrome.tabs.getSelected(null, function (tab) {
        var url = getParam(tab.url, "u");
        //var url = encodeURIComponent(getParam(tab.url,"u"));
        var finalurl = "https://www.tumblr.com/share?v=3&amp;u=" + url + "&amp;s=";
        document.getElementById("container").src = finalurl;
      });

      // Thanks https://www.netlobo.com/url_query_string_javascript.html
      function getParam(url, name) {
        name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
        var regexS = "[\?&amp;]" + name + "=([^&amp;#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(url);
        if (results == null) return "";
        else return results[1];
      }
    </script>
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>
  <body>
    <div id="header">
      <h1>Post To Tumblr</h1>
    </div>
    <div class="section-header first"><em>Format your post below</em></div>
    <br />
    <iframe id="container" style="width:500px;height:430px;border:0px" src=""></iframe>
  </body>
</html>
```

It just opens an iframe with the Tumblr Share page. Simples!

[![](/wp-content/uploads/2010/10/Shot_0011.png "Shot_001")](/wp-content/uploads/2010/10/Shot_0011.png)

Just a quick update to [my first chrome extension](/posts/my-first-chrome-extension-post-to-tumblr/).



Following a request someone left in the comments I have now added an option to set how the post should be published. So now you can choose whether you want your cat with a lime on its head to be posted to your drafts or your queue or simply to your default wall.

You can grab the new version in the usual place on the Chrome Extensions Gallery ->[ https://chrome.google.com/extensions/detail/dbpicbbcpanckagpdjflgojlknomoiah?hl=en](https://chrome.google.com/extensions/detail/dbpicbbcpanckagpdjflgojlknomoiah?hl=en)

I think it updates by its itself, but I cant be sure!

Enjoy!

[![](/wp-content/uploads/2010/10/Shot_002.png "Shot_002")](/wp-content/uploads/2010/10/Shot_002.png)

Woo! I have just published my first Chrome extension :)



It was really annoying me that when I found a funny cat or some other silly image I would have to go through an annoying process to get that image on [my Tumblr account](https://mikeysee.tumblr.com).

What I really wanted was some right-click-post action going on and wondered why no one had done one it yet. So with an hour or so to spare I whipped this extension up really quick.

It uses the Chrome 6 Context Menu API so you obviously need to have Chrome 6 to be able to use it.

Currently it only posts images as that's all I needed for now but if enough people want more then ill whip out the other data types.

The source couldn't be any simpler really, infact this is it here:

```typescript
chrome.contextMenus.create({
  title: "Post Image To Tumblr",
  contexts: ["image"],
  onclick: postImage,
});

function postImage(info, tab) {
  var email = localStorage["tumblr_email"];
  var password = localStorage["tumblr_pass"];

  if (!email || email == "" || !password || password == "") {
    alert("Need to set your Tumblr username and password in the options before posting!");
  } else {
    var o = {
      email: email,
      password: password,
      type: "photo",
      source: info.srcUrl,
    };

    var success = function (data, textStatus, request) {
      if (textStatus == "success") {
        alert("Image posted to Tumblr. Image -> " + info.srcUrl);
      } else {
        alert("Bad email or password");
      }
    };

    $.post("https://www.tumblr.com/api/write", o, success);
  }
}
```

Simples!

Theres even an option page where you put in your Tumblr details:

[![](/wp-content/uploads/2010/10/Shot_003.png "Shot_003")](/wp-content/uploads/2010/10/Shot_003.png)

Oh, there is one issue.

No matter what I tried I couldn't manage to get the Tumblr API to return an error. So if you enter your username or password incorrectly it still reports success, not entirely sure why, if someone knows I would love to hear why!

Interested? You can go grab it over on the chrome extensions gallery page -> [HERE](https://chrome.google.com/extensions/detail/dbpicbbcpanckagpdjflgojlknomoiah?hl=en)