Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox

2017-07-07 02:10:07

< Day Day Up >

Hack 9. Develop a User Script "Live"

Edit a user script and see your changes immediately.

While you're writing a user script, you will undoubtedly need to make changes incrementally and test the results. As shown in "Install a User Script" [Hack #1], Greasemonkey stores your installed user scripts deep within your Firefox profile directory. Changes to these installed files take effect immediately, as soon as you refresh the page. This makes the testing cycle quick, because you can edit your partially written script, save changes, and refresh your test page to see the changes immediately.

1.10.1. Setting Up File Associations

Before you can take advantage of live editing, you need to set up file associations on your system, so that double-clicking a .user.js script opens the file in your text editor instead of trying to execute it or viewing it in a web browser.

1.10.1.1. On Mac OS X.

Control-click a .user.js file in Finder, and then select Get Info. In the Open With section, select your text editor from the drop-down menu, or select Other…to find the editor program manually. Click Change All to permanently associate your editor with .js files.

1.10.1.2. On Windows.

Right-click a .user.js file in Explorer, and then select Open With Choose Program. Select your favorite text editor from the list, or click Browse to find the editor application manually. Check the box titled "Always use the selected program to open this kind of file and click OK.

1.10.2. The "Live Editing" Development Cycle

Switch back to Firefox and select Tools Manage User Scripts. Select a script from the pane on the left and click Edit. If your file associations are set up correctly, this should open the user script in your text editor.

The first time you do this on Windows, you will get a warning message, explaining that you need to set up your file associations, as shown in Figure 1-9. You're one step ahead of the game, since you've already done this.

The reason for the warning is that, by default, Windows is configured to execute .js files in the built-in Windows Scripting Host environment. This is generally useless, and certainly confusing if you don't know what's going on.

Figure 1-9. File association warning on Windows

Once the user script opens in your text editor, you can make any changes you like to the code. You're editing the copy of the user script within your Firefox profile directory the copy that Greasemonkey uses. As soon as you make a change and save it, you can switch back to Firefox and refresh your test page to see the effect of your change. Switch to your editor, make another change, switch back to Firefox, and refresh. It's that simple.

During live editing, you can change only the code of a user script, not the configuration parameters in the metadata section. If you want to change where the script runs, use the Manage User Scripts dialog.

When you're satisfied with your user script, switch back to your editor one last time and save a copy to another directory.

Remember, you've been editing the copy deep within your Firefox profile directory. I've lost significant chunks of code after live-editing a user script and then uninstalling it without saving a copy first. Don't make this mistake! Save a backup somewhere else for safekeeping.