Teacher's Pet is a Mozilla Firefox extension that shares a web browser tab with one or more remote tabs. This permits, as an example, an instructor to share a tab with a classroom of student computers. Whenever the instructor's page location changes on a shared tab, the remote tabs on the students' computers automatically change to match the instructor's shared tab. When the instructor moves the mouse around on the shared tab, the students see an image-based pointer on their tabs.
The content below is a copy of the write-up that was turned in with the project. More information and a public release will follow in the near future.
This project had a significant learning curve as one team member had not written a Mozilla Firefox extension previously, and the other team member had not delved into Firefox extensions for a while. Time constraints also shaped the scope and implementation of this extension. As per our requirements, we needed to implement at least three medium-sized features, consisting of about 200 lines of code each, that are useful and innovative. Faced with these constraints, we decided to maximize our learning and our extension's usefulness by creating our own special-purpose extension with at least three significant features. That led us to creating our own extension from scratch: Teacher's Pet. This extension relies heavily on networking to pass messages between servers and clients. It took us a bit longer to implement than we had expected, though much of that was attributed to the learning curve and tracking down a crash bug in Firefox.
The experiments that we created to learn more about the Firefox extension domain gradually morphed into the implementation. While this is not the greatest software engineering practice, it fit in with our short-term lightweight project process, which was primarily an iterative design-code-test-repeat cycle. Architecture
Our implementation is structured into three modules: main, client, and server.
Within the TeachersPetTab, one server and one client are lazily created upon request. These are closed when the TeachersPetTab is closed.
The server module, located in server.js, uses asynchronous Java TCP sockets to communicate with clients without blocking Firefox. This permits our extension to communicate with large numbers of clients without slowing down the server too much, maximizing the browsing experience for both the server user and the client users. Functions are provided to start and stop a server as well as to send a message to all clients and send a message to a specific client. Clients are represented both internally and externally by the ConnectionRecord class in network.js, which is shared with the client module. Several events exist in the server. These include line receipts from clients, client connections, and client disconnections as well as notification of when a sent line of text is either partially sent to the clients or completely sent to all clients, which can help with progress notification. Progress notification is presently not visualized in this extension, though the underlying framework exists.
The client module, located in client.js, uses asynchronous Java TCP sockets to communicate with a server without blocking Firefox. This lets a client receive lines of text from its connected server as well as send text lines to its server. Several events exist in the client. These include line receipts from the server, connections, disconnections, and connection failures as well as a notification when a sent line has been completely sent to the server.
Teacher's Pet allows any group of people to navigate collectively through a series of web pages. Students can comfortably watch a presentation on their own computer as well as interact with the web sites and see where an instructor is pointing to on the screen. Such functionality can be useful in a classroom setting, especially for training that involves web sites or web-based applications. This also enables remote classroom scenarios.
At this time, navigations within frames are not propagated to clients. Non-frame navigation is supported, including navigation to a frame set page. On a frame-based page and on some web sites, the mouse cursor might not work. Although the extension attempts to disable all links, this action is not always successful on all links. If a connection to a server fails, the exception thrown is an InvocationTargetException instead of the correct IOException. In very rare cases, Firefox might crash when using our extension. Besides these issues, the core functionality and our set of features work very well and can be used today for non-frame web site classroom training.
The networking code itself took some time to develop–much more time then we were expecting. This barebones system, however, has numerous applications on its own. It enables Firefox to become a lightweight server, which can be molded based on the user's needs. With this framework and our existing useful functionality, extensions on our extension are possible. Some examples include web-based personal file sharing, instant messaging, and remote administration.
To run Teacher's Pet, install the included teacherspet.xpi file inside of Mozilla Firefox. Ensure that you have the latest Java JRE 1.5 environment installed, which this extension uses.
After installing it, you can share a tab by clicking on the apple icon on the bottom-right part of the window or through the "Share Tab" menu item in the Teacher's Pet submenu within the Tools menu. As an alternative, you can also add a Teacher's Pet icon to your browser's tool bar by customizing it and using drag-and-drop to place that tool bar icon. Pressing the tool bar button without pressing the drop-down arrow will activate the "Connect to Shared Tab" menu item automatically. We had decided to apply principles of Fitts' Law to our user interface design by keeping the "Connect to Shared Tab" closer to the mouse than "Share Tab" because most users will use the "Connect to Shared Tab" command. When sharing a tab, ensure that your firewall is letting either its dynamically-assigned port through or any Firefox shared TCP ports through. On another computer or even in a different window or tab on the same computer, connect to a shared tab using one of the "Connect to Shared Tab" options. A prompt will ask you to enter in the host and port as host:port. If it's not formatted properly, the extension will notice and ask the user to modify their input to conform to the requirements. Once connected, the current tab will display the location that the server's shared tab is showing. When the server's user moves the mouse around, a red arrow will move around the client's tab and point, pointing at the same document coordinates.
To disconnect, a client can select the "Disconnect from Shared Tab" command. A server can use the "Stop Sharing Tab" command to stop sharing. Note that if the server stops sharing, then the currently connected clients will get a notification that the server disconnected them. The status bar on the bottom right of the window informs the server user of how many clients are connected.
It's possible for a tab to be both a client and a server. In this configuration, events from the root server propagate down the tree of servers and clients with each client+server combination propagating events to their clients.
We put a lot of work into this assignment, and we plan to possibly make it open-source so that it can be extended by others and put to use by those who can benefit from its current features.