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.
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.
- 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.