Appearance scripts are HTML pages that get loaded and ask AnyColor to update the browser’s appearance. The only difference they have from a regular HTML page is that they use Javascript to send updates to AnyColor.
Here’s how it works as of version 0.1.1:
- User ticks the “Set appearance using a script” checkbox and fills in the URL to the script.
- AnyColor loads the page in a hidden window and starts listening for special events coming from that page.
- The script page loads, constructs an appearance object and sends “update appearance” events at regular intervals.
- AnyColor catches the events, validates the arguments and applies the new appearance.
An example
The following simple example will change the appearance based on the time of the day, alternating between a light and a dark theme. The script is set to update every 10 minutes.
Note that it uses the “theme.js” file that’s built-in into AnyColor and contains some code that’s common to all appearance scripts. You can look at it’s source to see all properties and methods of the Appearance object.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="chrome://anycolor-pub/content/lib/theme.js"></script>
<script type="text/javascript">
// the appearance object
var app = null;
// update every 10 minutes
var updateTimeoutSeconds = 60 * 10;
function init()
{
app = new Appearance();
update();
}
function scheduleNextUpdate(updateTimeoutSeconds)
{
setTimeout(update, updateTimeoutSeconds * 1000);
}
function update()
{
// get hour part of the current date/time
var hours = (new Date()).getHours();
// determine if it's day or night
var isDay = hours > 6 && hours < 18;
if (isDay)
{
app.backgroundColor = "#d7d7d7";
app.foregroundColor = "#000000";
}
else
{
app.backgroundColor = "#4c4c4c";
app.foregroundColor = "#cccccc";
}
// apply the appearance
app.apply();
// set a timeout for the next update
scheduleNextUpdate(updateTimeoutSeconds);
}
</script>
</head>
<body onload="init();">
</body>
</html>
Notes
- AnyColor restricts how often a script can update the browser’s appearance. The default is once every 60 seconds. You can change it by modifying the value of the “extensions.anycolor.minimumAllowedScriptUpdateInterval” preference. It helps to set this to 1 (second) when developing a new script.
- Appearance scripts can make use of the canvas object to dynamically generate images, convert them to data urls and use them in the appearance. See the built-in sample.html in chrome://anycolor-pub/content/presets/sample/sample.html for example.
- As of version 0.2.0, scripted presets can render anything to a canvas (including web pages) and specify the canvas id as the background image. Normally Firefox will not allow a web page to use a canvas’s toDataURL() method if external images have been drawn on it (it’s a security/privacy measure). To circumvent this restriction without giving the scripts access to this method, a scripted preset can specify the id of the canvas as the url of an image in the form of “canvas://canvas-id”. The Oromea preset uses this technique to mix two images and create a background image relative to the time of the day.
AnyColor blog 