├── INSTRUCTIONS.md
├── README.md
├── icon.png
├── js
└── popup.js
├── manifest.json
├── popup.html
└── screenshot.png
/INSTRUCTIONS.md:
--------------------------------------------------------------------------------
1 | # Chrome Notes Extension
2 | A Terrapin Hackers hacktorial from Johann Miller and Omkar Konaraddi.
3 |
4 | ### Summary
5 | We'll build a basic Chrome extension that lets you write notes for individual webpages.
6 |
7 | ### Requirements
8 | * [Google Chrome](https://www.google.com/chrome/browser/desktop/)
9 | * A text editor (we recommend [Atom](https://atom.io/))
10 | * Basic HTML and JavaScript background
11 |
12 | # Instructions
13 |
14 | ### 1. Create a new directory
15 | Create a folder named `chrome-ext-notes`. This is where we will keep all the files for the extension.
16 |
17 | ### 2. Set up the manifest
18 | Inside `chrome-ext-notes`, create a file named `manifest.json` with the following contents:
19 | ```json
20 | {
21 | "manifest_version": 2,
22 | "name": "Web Notes",
23 | "description": "Save notes for a webpage.",
24 | "version": "1.0",
25 | "browser_action": {
26 | "default_popup": "popup.html"
27 | }
28 | }
29 | ```
30 | ##### Why?
31 | Each chrome extension needs a `manifest.json` file to provide important information for chrome to compile the chrome extension package properly.
32 |
33 | ### 3. Set up the HTML
34 | Create a file named `popup.html` with the following contents.
35 | ```html
36 |
37 |
38 |
39 | Notes App
40 |
41 |
42 |
Notes
43 |
44 |
45 |
46 | ```
47 | ##### Why?
48 | A chrome extension should have a `popup.html` file for the popup to appear when the chrome extension's icon is clicked.
49 |
50 | ### 4. Load the extension in Chrome
51 | Go to [chrome://extensions](chrome://extensions) in a new tab. Click the "Load unpacked extension..." button. In the file selector, select the `chrome-ext-notes` folder.
52 | A new button should appear in Chrome to the right of the url bar. If you click it, your `popup.html` should appear.
53 |
54 | ##### Tip:
55 | Any edits to your Html or JavaScript will automatically update in your extension.
56 |
57 | ### 5. Set up a JavaScript file
58 | Create a file named `popup.js` with the following content:
59 | ```javascript
60 | console.log('javascript loaded');
61 | ```
62 | Now, add the script to the head of `popup.html`.
63 | ```html
64 |
65 | Notes App
66 |
67 |
68 | ```
69 | Right click on our chrome extension's icon and click "Inspect popup" to open up the Developer Tools for Chrome. You should see our message "javascript loaded" under the "Console" tab. This means your JavaScript is working properly.
70 |
71 | ##### Why?
72 | JavaScript will let us add more functionality to the extension. Google does not allow inline JavaScript inside the html popup, so we need to create a new file.
73 |
74 | ### 6. Add save and clear buttons
75 | We want to be able to save or delete any notes we take with the extension. We will add these 2 buttons to the body of `popup.html`.
76 | ```html
77 |
78 |
Notes
79 |
80 |
81 |
82 |
83 | ```
84 |
85 | We will use JavaScript to respond to button clicks. Remove the `console.log` statement from `popup.js` and add the following:
86 | ```javascript
87 | document.addEventListener('DOMContentLoaded', function() { //wait for all of the html to load
88 |
89 | document.getElementById('saveButton') //get the save button
90 | .addEventListener('click', function(){ //run this function on a click
91 | console.log("todo: save");
92 | });
93 | document.getElementById('clearButton') //get the clear button
94 | .addEventListener('click', function(){ //run this function on a click
95 | console.log("todo: clear");
96 | });
97 |
98 | });
99 | ```
100 | Test out the buttons in Chrome. You should see the "todo: save" and "todo: clear" messages appear under the Console tab in the Developer Tools when you click either button. To get to the Developer Tools, right click on the icon and click "Inspect popup".
101 |
102 | ### 7. Save the notes with chrome.storage
103 | We will save the notes locally using Chrome's storage API in JavaScript.
104 |
105 | First we need to get the text that the user typed. Add an id to the textarea in `popup.html`:
106 | ```html
107 |
108 | ```
109 | Now we can access the textarea in `popup.js`. Inside the 'DOMContentLoaded' function, above the button code, add:
110 | ```javascript
111 | var noteText = document.getElementById('noteText');
112 | ```
113 | We can now use `noteText.value` to get and set the text in the textarea.
114 |
115 | To save the text, we add this function to `popup.js`:
116 | ```javascript
117 | function saveNotes(text){ //write note to local storage
118 | chrome.storage.local.set({ notes: text });//using Chrome's storage API
119 | }
120 | ```
121 | Chrome storage acts as a map with key-value pairs. In this case, we set 'notes' as the key and text as the value.
122 |
123 | To retrieve the text we stored, add this function:
124 | ```javascript
125 | function displayNotes(){ //retrieve from local storage
126 | chrome.storage.local.get(function(data){//using Chrome's storage API
127 | if(data.notes){ //if the value exists
128 | noteText.value=data.notes;
129 | }
130 | });
131 | }
132 | ```
133 | Now we use these functions in the 'DOMContentLoaded' function. Under the `var noteText` line, add:
134 | ```javascript
135 | displayNotes();
136 | ```
137 |
138 | And inside the click function for the save button, change `console.log('todo: save')` to:
139 | ```javascript
140 | saveNotes( noteText.value );
141 | ```
142 |
143 | Your `popup.js` should now look like this:
144 |
145 | ```javascript
146 | document.addEventListener('DOMContentLoaded', function() { //wait for all of the html to load
147 | var noteText = document.getElementById('noteText');
148 | displayNotes(); //<--works
149 | document.getElementById('saveButton') //get the save button
150 | .addEventListener('click', function(){ //run this function on a click
151 | saveNotes(noteText.value);
152 | });
153 | document.getElementById('clearButton') //get the clear button
154 | .addEventListener('click', function(){ //run this function on a click
155 | console.log("todo: clear");
156 | });
157 |
158 | });
159 |
160 | function saveNotes(text){ //write note to local storage
161 | chrome.storage.local.set({ notes: text });
162 | }
163 |
164 | function displayNotes(){ //retrieve from local storage
165 | chrome.storage.local.get(function(data){//using Chrome's storage API
166 | if(data.notes){ //if the value exists
167 | noteText.value=data.notes;
168 | }
169 | });
170 | }
171 | ```
172 | Now we need to edit `manifest.json` to get permission to access Chrome's storage. Add the `permissions` block to the manifest. Be sure to add a comma after the `browser_action` block.
173 | ```json
174 | {
175 | "manifest_version": 2,
176 | "name": "Web Notes",
177 | "description": "Save notes for a webpage.",
178 | "version": "1.0",
179 | "browser_action": {
180 | "default_popup": "popup.html"
181 | },
182 | "permissions": [
183 | "storage"
184 | ]
185 | }
186 | ```
187 | Since we've made an edit to the `manifest.json`, reload the chrome extension before testing it out. Now if you click save, any notes you write should stay in the extension each time you open it.
188 |
189 | ### 8. Clear the notes with chrome.storage
190 |
191 | We will use Chrome's storage API to make the "Clear" button clear our notes. To do that, we're going to add the following function to the bottom of `popup.js`.
192 |
193 | ```JavaScript
194 | function clearNotes(){
195 | chrome.storage.local.clear();//uses Chrome's Storage API
196 | noteText.value = "";
197 | }
198 | ```
199 |
200 | Now we need the function to start when the user clicks "Clear". Replace the `console.log` in our `clearButton`'s EventListener with `clearNotes();`, as done below.
201 | ```JavaScript
202 | document.addEventListener('DOMContentLoaded', function() { //wait for all of the html to load
203 | var noteText = document.getElementById('noteText');
204 | displayNotes(); //<--works
205 | document.getElementById('saveButton') //get the save button
206 | .addEventListener('click', function(){ //run this function on a click
207 | saveNotes(noteText.value);
208 | });
209 | document.getElementById('clearButton') //get the clear button
210 | .addEventListener('click', function(){ //run this function on a click
211 | clearNotes();//replaces console.log
212 | });
213 | });
214 | ```
215 | Now if you click "Clear", your notes will be cleared.
216 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Chrome Notes Extension
2 | A demo Chrome extension for a Terrapin Hackers Hacktorial
3 |
4 | 
5 |
6 | ### Summary
7 | Write notes on a webpage. If you come back to the page later, your notes will still be there.
8 | * Clear all: remove notes from all pages
9 | * Show all: show the urls for every page with notes
10 |
11 | ### Tutorial
12 | Follow [our tutorial](INSTRUCTIONS.md#chrome-notes-extension) to create the demo project yourself.
13 |
14 | ### Contributors
15 | Johann Miller and Omkar Konaraddi
16 |
--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johannkm/chrome-ext-notes/dc74ebd02b21e59c1f4c6e2710765c77165454f6/icon.png
--------------------------------------------------------------------------------
/js/popup.js:
--------------------------------------------------------------------------------
1 | var storage = chrome.storage.local;
2 |
3 | document.addEventListener('DOMContentLoaded', function() {
4 |
5 | var text = document.getElementById('text');
6 | var urlListDiv = document.getElementById('urlList');
7 | var urlsHidden = true;
8 |
9 | // Get selected tab and use tab.url
10 | chrome.tabs.getSelected(null, function(tab) {
11 | var url = sliceUrl(tab.url);
12 | getNotes(url, text);
13 |
14 | // Create listener to save notes on input
15 | text.addEventListener('input', function(){
16 | saveNotes(url, text);
17 | });
18 | });
19 |
20 | document.getElementById('clear').addEventListener('click', function(){
21 | storage.clear();
22 | text.value = "";
23 | urlsHidden = true;
24 | showUrls(urlsHidden, urlList);
25 | });
26 |
27 | document.getElementById('show').addEventListener('click', function(){
28 | urlsHidden = !urlsHidden;
29 | showUrls(urlsHidden, urlList);
30 | });
31 |
32 | });
33 |
34 | function getNotes(url, text){
35 | storage.get(url, function(data){
36 | if(data[url]){
37 | text.value = data[url];
38 | }
39 | });
40 |
41 | }
42 |
43 | function saveNotes(url, text){
44 | storage.set({ [url]: text.value });
45 | }
46 |
47 | function sliceUrl(url){
48 | endIndex = url.indexOf("?");
49 | return (endIndex==-1? url : url.slice(0,endIndex));
50 | }
51 |
52 | function showUrls(hide, urlListDiv){
53 | if(hide){
54 | urlListDiv.innerHTML = "";
55 | } else{
56 | storage.get(function(data){
57 | var list = ''
58 | Object.keys(data).forEach(function(key){
59 | list += "" + key + " "
60 | });
61 | urlListDiv.innerHTML = list;
62 | })
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 |
4 | "name": "Web Notes",
5 | "description": "Save notes for a webpage.",
6 | "version": "1.0",
7 |
8 | "browser_action": {
9 | "default_icon": "icon.png",
10 | "default_popup": "popup.html"
11 | },
12 | "permissions": [
13 | "activeTab",
14 | "storage"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Notes App
6 |
7 |
8 |
9 |
10 |
11 |
12 |