a firefox extension using XUL,DOM and Javascript

It is a firefox extension. This extension is an editor(not sure if it can really be called an editor or not) with which the websites designer can use to 1.(1)highlight the text, pictures they want to be marked up; (2)to assign the essentiality level from 1 to 10 to the text or pictures by right-click choosing items level1 to level 10; (3)when the second step is done, it can mark up the source code of the web page with our own tags ... automatically; The editor will enable websites designers to mark-up their work without feeling that it is an extra workload. For the readers, when they right click and choose the essentiality level, they are able to see the page displayed according to their own level choice, leaving the source code not changed.(it can be realized after our tags are added to the source code of the text or pictures we hightlight.) I read materails on DOM and JAVASCRIPT, finding DOM can edit the texts while they are in the box or the form but not when they are displayed on a webpage. I mean the source code seems cannot to be marked up unless it is loaded to the textarea. Then after being added with the tags by highlighting and clicking a button ,then being posted, the code can be edited. Maybe there is a function I just have not found yet. I found that the function "view selection source" has some similarities to do with my extension. But do not know how it is made. However, when this item is selected, the "save page as" can not be implemented. So even this fuction seems not able to change the source code.