Web Page Annotater is a browser extension for firefox that allows the users to take notes on any HTML web page by highlighting text and making annotations. Any notes are displayed in the sidebar on the page they were made in.
- Highlight text.
- Annotate text.
- Edit existing annotations.
- Display notes in the sidebar.
- Display notes on subsequent visits to the same page.
- Scroll to annotated text in page from sidebar.
- Remove notes.
- Clone repository
- Download web-ext here
- Run
web-ext buildin the cloned Web Page Annotater repository - Go to about:addons in your browser
- Click the setting icon, and then "Install add-on from file"
- Select the zip file generated in the web-ext-artifacts folder
The user should select the desired text and then can highlight text with the shortcut Ctrl + Alt + h or annotate text with the shortcut Ctrl + Alt + n. Alternatively, when text is selected, the user can right-click and there will be a sub-menu corresponding to the extension that will have buttons for each note type. If the user chooses to annotate text, a pop-up will appear to input the note.
The note made on annotated text can be viewed by hovering over the text, causing a pop-up to appear. Annotated text will have a text-shadow to indicate that it was annotated.
Notes are stored in the "Local Storage" for the web page it was made on. See Here for details.
The sidebar automatically displays all notes on the current page, it can be opened using the regular firefox sidebar button located to the left of the address bar.
The sidebar has two color selectors at the top, which will change the color of highlighted text, and the color of annotated text. Icons indicate which selector controls the color of each note type.
Each note has a button to delete the note. Deleting the note will not immediately remove it from the web page, but it will not display after a refresh. Another button exists to scroll to the note on the web page. Annotations have a button to edit the note, a pop-up will appear when this button is clicked to create a new annotation.
- Javascript
- HTML
- CSS
- web-ext
Feel free to notify me of any feature requests or problems via the Issues tab in this repository.
GPLv3 License
- Used icons from https://icons.getbootstrap.com/ for buttons as well as icon and logo designs.
Free and Open-source. No data about the user is collected.