Inside Technique : Extending the Browser : Annotate Extension

The annotate extension is designed to let you add comments to a web-page. By combining this with the Generate Page extension in the InsideDHTML Tools pack, you can annotate and send an instance of a web-page to a friend.

This extension follows the same principal of the URL sample. When the user right clicks and selects annotate, we prompt the user for a comment, and then highlight the selected text and insert the comment into the document. A marker is inserted that represents the comment. When the user clicks the marker, the annotation is alternatively displayed and hidden.

The script below represents the framework for the annotate extension:

<SCRIPT>
// Get the source document
var doc = external.menuArguments.document

// Create a textrange for the user's selection
var sel = doc.selection.createRange()

// Ask the user for a comment
var comment = prompt("Enter your annotation:","")

// Highlight selected text
sel.execCommand("BackColor",false,"Yellow")

// Insert annotation after highlighted text
sel.collapse(false)
sel.pasteHTML(buildAnnotation(comment, getID(doc.all)))
</SCRIPT>

The above script represents all of the annotate extension minus the functions that build the annotation. The buildAnnotation function takes the user's comment and a unique ID (supplied by getID) and returns an HTML string with the user's comment and a small script for hiding and showing the text:

<SCRIPT>
function getID(els) {
  // Need to find a unique ID
  var prefix ="idhtmlan_"
  var cnt=1
  while (els[prefix+cnt]!=null)
    cnt++
  return (prefix+cnt)
}

function getClick(id) {
  // Build the click handler
  var str="var sEl = document.all['" + id + "'].style; sEl.display = (sEl.display == 'none') ? '' : 'none'"
  return str
}

function buildAnnotation(comment,id) {
  var cl = getClick(id)
  var str=""
  str += "<SUP STYLE=\"cursor: default; color: navy; text-decoration: underline\" ONCLICK=\"" + cl + "\">*</SUP>"  
  str += "<TABLE ID=\""+id+"\" STYLE=\"position: absolute; display: none; background: white; border: 1pt black solid; \"><TR><TD>"
  str+= comment
  str+= "</TD></TR></TABLE>"
  return str
}
</SCRIPT>

To run this extension, you can copy and paste the script into an HTML file, save it, and register it using the same steps listed for the sample extension, or you can register the extension and run it from our site.

You have now seen the basics for creating and scripting your extension. Next, we cover the more advanced features that allow you to control when the menu option is displayed and how to add a more complete user interface to your extension.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.