Name: alpha-notes
Owner: Clever
Description: A chrome extension that lets you save notes for a website
Created: 2016-03-04 02:14:59.0
Updated: 2016-03-08 17:53:32.0
Pushed: 2016-03-09 22:52:47.0
Homepage:
Size: 93
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Email | Most Recent Commit | # Commits |
|---|
README
Alpha Notes
This is a chrome extension that has two functions:
- Allows you to “mark” certain words on any webpage, using a context menu (right-click)
- Allows you to annotate any webpage in the sidebar, with text that is saved the next time you load that webpage.
Overview
- You will progress in a series of challenges. The challenges are marked in the code with comments, like
// CHALLENGE 1:
It is recommended, though not required, that you progress with the challenges in order.
- Challenge 1 is in
find_and_replace.js. Currently, we have functionality which adds a menu option to the context menu on any page - see context_menu.js. When you select that menu item, all instances of the word “chrome” are displayed in blue text with a red box surrounding them.
- Brainstorm with your team - what are other things you could do to manipulate the body of a webpage like this?
- Choose one of your ideas and implement it!
- Challenge 2 and 3 are in
sidebar.js. Some of the functionality to display annotations on the webpage has been removed. Make sure you understand how getNotes() and saveNotes() work. Then, implement the missing functions, saveNote() and removeNote() to get annotation working.
- If you get past the first 3 challenges, brainstorm with your team - what are other ways you could improve the annotation? One missing feature is that when you save text, it's not cleared out of the
annotate-text-entry field (this is Challenge 4). Make that improvement, or any others that come to mind. Some other directions of exploration:
- Fiddle with the CSS to improve the design of the sidebar, or change colors, etc
- Display all annotations made across all pages, in a single place (e.g. on the Chrome New Tab Page)
- For
find_and_replace.js, add functionality to replace all images on the page with a .gif of Steph Curry
- Or, add any other functionality that sounds fun to the chrome extension!
How to run
- Clone the repo.
- (In Chrome) Go to Extensions. Check developer mode in the top right.
- Click “Load unpacked extension.”
- Select this folder.
- If you make changes to the extension files, remember to Reload it on the Extensions page.
How to run on Chromebook
- download the zip file from Github
- in file browser, double click the zip file, which now shows up as a mounted drive
- within the mounted drive, there's a top-level folder. Drag that top-level folder to the Downloads folder
- you can now load the unpacked extension from that folder you just created within the Downloads folder.
