Apr 152012
 

As I’ve blogged about before, I’ve been working on sample code for the source-editor.jsm that was added to Firefox as part of the ongoing work on the developer tools. This sample code evolved over time into a full-fledged extension, and one I’m rather proud of. I just posted it to AMO today.

Edit Source adds options to the Web Developer menu and the context menu on text-based documents (including HTML, CSS, XML, and JavaScript), which lets you open a source editor window. You can then edit the document’s text, save it to your local disk, and most interestingly, re-render the original document (for HTML, anyway) to reflect the changes you’ve made.

This makes it a handy tool for experimenting with HTML, and a nice learning tool. In addition, if you open up an about:blank tab and edit its source, you can write HTML from scratch and see what it looks like rendered on screen. That’s also a pretty neat trick.

There are things that would be fun and useful to add to it, but I probably need to move on and get to writing again! So I’ve posted the code to Github. Feel free to take a look and tweak it! There’s an IDEAS.txt file in the repository you can look at for some thoughts for things that might be handy to add.

 Posted by at 4:46 PM

  9 Responses to “Edit Source: My extension unleashed”

  1. Congratulations! Finally, this exteremely useful functionality that was in Opera for many, many years, is available for Firefox!

  2. I would have been disappointed had the first comment not been about how Opera did it first. :)

  3. How is this different from Firebug’s Edit functionality under the HTML tab? The only difference seems to be that code can be saved to disk, or am I missing something?

  4. Well, for one thing, this doesn’t require installing Firebug, which can impact overall performance. It’s a good lightweight solution for a specific set of tasks.

  5. Doesn’t handle character encoding properly :(

  6. You’re right. I assume UTF-8 and shouldn’t. I’ll look at changing that (or happily accept fixes!).

  7. @sheppy: But it does require installing an add-on, just like the majority of other web dev helper utilities whereas Firebug does so much in one add-on and arguably the only reason it impacts performance is that Mozilla hasn’t got the balls to fix it and instead is treating it like yesterday’s news by providing just one developer to maintain it. Disgraceful.

  8. Just downloaded it. Thanks!

  9. >How is this different from Firebug’s Edit functionality under the HTML tab? The only difference seems to be that code can be saved to disk, or am I missing something?
    Yes. Firebug allows you to edit the DOM while this extension allows to edit the source before it was mutated by scripts. Thus, they complement each other.