Creating a Firefox plugin for annotations

[smddzcy]

About

• Related Issues: #181

We should create a Firefox plugin that lets our users annotate content and see the previous annotations in our application. The plugin should communicate with our annotations backend to get/store the annotations.

To-do

• [x] Create a separate team for the task
• [x] Implement the basic functionality (seeing and creating annotations) without thinking much about the design
• [x] Design

[smddzcy]

This one can wait until we implement the backend for annotations.

[oal55]

I was reading about Firefox plugins the other day, and created a plugin which can get the selected text and prompt the user for his/her annotation. It's probably not the prettiest looking plugin in the industry, but we can work on that.

[smddzcy]

We can cheat on these resources (thanks to Suzan Uskudarli for pointing these out):

• https://web.hypothes.is/
• https://chrome.google.com/webstore/detail/hypothesis-web-pdf-annota/bjfhmglciegochdpefhhlphglcehbmek?hl=en
• https://github.com/hypothesis/client
• https://github.com/hypothesis/h
• https://github.com/apache/incubator-annotator/wiki/Overview-(WIP)
• https://annotator.apache.org/

[Morgazipa]

@norubai Could you please share your work with us?

[ThoAppelsin]

I don't know much about it's backend part, but I have just found out this:
https://github.com/mdn/webextensions-examples/tree/master/annotate-page

Screenshot:

It utilizes the side-bar of the Firefox browser, displays a text-box there, in which you can write a text. There, the notes are per-page. All we have to do is to make it per-annotatable-object.

We can inject CSS to display border on all the hovered elements, make them selectable, etc.

Then again, annotations made will not be persistent and cannot be shared-across without the back-end for it.

[ThoAppelsin]

I have time now. I am taking this as my next assignment.

I have prepared a basic Firefox Add-on for my friend yesterday, and I feel somewhat interested in doing this now. If you think that I should better be working on something else, tell me and I will consider doing that instead, but do so sooner than later. If I get too deep into this, I won't want to get away from it until it ends.

[smddzcy]

@ThoAppelsin Cool 😎 Creating an MVP is enough I guess, it doesn't have to be sth sophisticated, so please don't get too deep.

[Morgazipa]

@ThoAppelsin There is an excellent open source JS library for annotations, with many useful plugins. I think that we could make great use of it, if would be made compatible with W3C annotation model.

[ThoAppelsin]

I considered the Annotator.js for a while. I grew unsure about whether it would do as we please without giving us headaches and regrets. Instead;

We currently have a Firefox add-on with a content script and sidebar action. It creates an overlay on top of our website, allowing users to select one of any available HTML elements on screen. The selected element is targeted (in Web Annotation Model's terms) via a CSS Selector.

Many more things are to be done. The plugin has close to nothing for displaying any previously stored annotations, for example.

[smddzcy]

@ThoAppelsin Can we test the add-on as well?

[ThoAppelsin]

Yeah, of course, please. Feel free to contribute, too.

You load the add-on temporarily by: 1) Navigating to “about:debugging” 2) Enable the debugging checkbox as you wish 3) Load add-on using the load button, selecting anything within the add-on folder loads it 4) Reload the add-on for changes to take effect using the reload button 5) Developer console is opened through the debug button, the checkbox at step 2 needs to be checked

The add-on is on the firefoxaddon folder. Of course, you need Firefox for the whole thing, preferably the latest stable version.

It is on the annotations/add-on branch.

Every name I have provided here were from my memory, so it is very likely for them to be not exactly correct, but should be close enough.

I will go on tomorrow.

[smddzcy]

Closing as we have a super-cool annotator now 👌