Skip to content

Instantly share code, notes, and snippets.

Last active Jun 15, 2018
What would you like to do?


How to use

Paste the js code to Tampermonkey(Chrome) or Greasemonkey(Firefox). Paste the css code to Stylish, and set the matching url pattern as "".

Open a new workflowy page, it works!

There are three different types of configuration:

    using today's bing wallpaper as workflowy background
    using random bing wallpaper as the background. double click the background image, you can randomly get a new one
    using user defined image as the background. you can use one or more images, and swap in/out by double click on the image

you can change the settings by modify the js code, and if you have a good idea, feel free to update the code.

How it works

using image as background is an easy task, simply adding a "background-image" property to <body> will do the trick.

but change the background image smoothly is a hard one. when user double click on the image, the js code will load a new background image in the background. At the very moment the loading process has done, the background image will change with a fade in/out special effects.

the problem is loading a new image will take some time, from 1s to 10s, depends on the quality of the internet connection. so a "loading icon" is added to the top left corner of the page. when the loading process begins, the icon shows; when it ends, it disappears. As a result, users will know that the "double click" has really triggered the changing of wallpaper.

So if the changing procedure is slow, please don't blame the code. :)

Custom image url list

You can add your own image to the list CUSTOM_URL_LIST, and when you double click on the background, the js code will randomly pick a new image for you.

p.s. sometimes the random new one is the same as the previous one, that is, your changing request doesn't work. please kindly blame the random number generator, not me :)

but remember, if you add an image from a website, please add the domain name as a @connect property of our code. otherwise, our request to the image will be blocked as a "cross-domain attack".

p.s. there is no gurantee that the injected userscript code is safe from the xss attack, so please use the image from a trusty source as far as possible (e.g. your own dropbox, your own google drive, etc.)

Any problems?

if there's any problems or advices, feel free to contact me on Twitter (@Wizmann) or send me an email(

happy workflowy :)

body {
transition: background-image 1s ease-in-out;
background-image: url("");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
} {
background: rgba(255, 255, 255, 0.95) !important;
// ==UserScript==
// @name New Userscript
// @namespace
// @version 0.1
// @description try to take over the world!
// @author Wizmann
// @match
// @grant GM_xmlhttpRequest
// @connect
// @connect
// ==/UserScript==
// There are three types of the background image
// 1. BING_TODAY (Default) - Today's Bing wallpaper
// 2. BING_RAND - Random Bing wallpaper
// 3. CUSTOM - Custom background img list
var TYPE = "CUSTOM";
// special thanks to Microsoft :)
// and thanks for for the bing wallpaper api
var BING_TODAY_API = "";
$(window).load(function() {
$("div#getMoreSpaceButtonTopLeft").html("<img id=\"bgprocessing\" src=\"\" style=\"display:none; height:20px\" />");
$("div#pageContainer").dblclick(function(e) {
if ( != this) {;
var next_url = BING_TODAY_API;
if (TYPE == "CUSTOM") {
next_url = CUSTOM_URL_LIST[Math.floor(Math.random() * CUSTOM_URL_LIST.length)];
} else if (TYPE == "BING_RAND") {
next_url = BING_RANDOM_API + '?_=' + new Date().getTime();
var image = new Image();
$("img#bgprocessing").css("display", "inline");
image.onload = function () {
$("img#bgprocessing").css("display", "none");
$("body").css('background-image', 'url(' + next_url + ')');
image.src = next_url;
Copy link

frankman777 commented May 11, 2016

Thanks a ton @Wizmann!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment