Drooodle Wiki

Pooodle's API is a set of javascript functions within Pooodle that are used to create Plugins to extend it.

Creating a plugin for Pooodle[]

Plugins for Pooodle are separate userscripts which interact with the main script. In order to create a plugin, you must have at least basic knowledge of javascript (and probably knowledge of how html5 canvases work).

Step 1: Create the script[]

To create a plugin the first thing to do it to create a new userscript in Greasemonkey/Tampermonkey/etc.

Upon creation, the userscript plugin should automatically insert a metadata block that should look something along the lines of this

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://www.drooodle.com/drdl
// @grant        none
// ==/UserScript==

The information in this block should be, of course, changed to the desired userscript name, author, description, etc.The section that says @match (or possibly @include) needs to be replaced with the following 

// @include     http://www.drooodle.com/drdl
// @include     http://www.drooodle.com/d/*/comment

This assures that the script is run both when creating a new thread as well as when replying to an existing one.

Step 2: Making sure the script runs at the proper time[]

In order to function properly, it is vital that we ensure that the plugin is not executed until after Poodle is completely loaded. Poodle makes this fairly simple by setting the variable window.pdl.ready to true once it's completely loaded, as well as firing an event on the document.

The following code executes the function executePlugin() once it has detected that Pooodle has finished loading

function executePlugin(){
  //Code that is to be executed once Pooodle is finished loading would go here.

function pooodleBindEvent'()'{
  $(document).bind('pooodleLoaded', function(e) {
if (!(window.pdl)){
  if (!(window.pdl.ready)){

From here on out, all additional code will be going into the executePlugin function so that it is not run until after Pooodle is loaded.

Step 3: Registering the plugin with Pooodle[]

To register the plugin and, in turn, create the plugin object, we call the function pdl.plugin.register. It's syntax is as follows


Obviously replaceing each argument with the proper values. The first three arguments are strings and should be in quotes. The last argument is the minimum version of Pooodle that is required to run the plugin (If you're unsure about this, just put in the number of the current version of Pooodle). The return value of this function is the plugin object, so it is important to store it in a variable.

The following is an example of how this function may be used.

var myPlugin = pdl.plugin.register("My Pooodle Plugin", "Me", "1", 9);

Step 5: Coding the plugin[]

That's up to you buddy. You can look at the documentation below to see what functions are provided by the plugin object that the pdl.plugin.register function returns.

API Reference[]

All of the following functions and objects are child members of the object returned by pdl.plugin.register and therefore must be accessed through that object. For example, if you stored the object in a variable named "myPlugin", you would print a line to the terminal like this

myPlugin.terminal.write("Hello World!");


A child-object within the plugin object. It contains different functions to interact with the debug terminal.

terminal.write( "Some string" );  This writes a line of text to the terminal.

terminal.error( "Some string" );  Same as above but marks the line as an error.

terminal.important( "Some string" );  Same as above but marks the line as important. In future updates this possibly will also create a notification that will show up even when the console is not opened.

messageOverlay() and getState()[]

messageOverlay( "Title", "Message", { style:"default", align:"center", opacity:0.5, behavior:"none" } );

This function creates a popup message. "Title" and "Message" are pretty self explanatory. The other arguments contained within an object are all optional.

style can be either "default" or "header". "default" will make the message box appear in the center of the screen while "header" will make the message box wide and appear at the top of the screen.

align defines the text alignment inside of the message box. This takes standard css align options (e.g. "left", "right", and "center").

opacity is the opacity of the black backdrop behind the message box.

behavior defines a preset behavior that the message box should use. At the moment the only options for this are "none" and "notify". "notify" makes the message box dissappear when any user input is given.

The return value of this function is the black backdrop div (which contains the message box) if the message box is successfully created, or -1 if there was an error (e.g. a message box is already active).

The return value object has one method, .destroy() which, as you might have guessed, closes the message box.

getState() returns a value of 1 if there is already a message box created or 0 if there is not.



Sets the currently selected color to a provided css-styled color (e.g. hexadecimal or "rgba()").


pasteText("Some string", "Monospace", "#000000");

This calls the text tool that's normally accessed through the interface.

The first argument is the text to be pasted.

The second argument is the font.

The third argument is the html5 fill style to be used. (This can be either a color or a canvas gradient object.)



This checks to see if a font exists on the client's computer and adds it to the font dropdown box if it does.

The return value is 0 if the font was detected and added to the menu. It returns 1 if the font was not detected.


The canvas context of the main drawing canvas.


A div object within the tool panel. It's created automatically and inserted when the plugin is registered. Can be used to create an interface for the plugin. (Buttons, text boxes, etc.)