Chrome Extension
The Chrome extension is in its first stages. Currently you can do the following:
- Right click and 'Quick Save' the current page
- Search your marks using the omnibox
- Click the extension icon on any page to add a mark, edit the mark, archive, restore or delete the mark
The extension also pings the application to see if you are logged in. It has access to your cookies on the whatever hosts we specify in the extension. So it can easily detect logged in state or not.
Below is a description of each action within the extension and what to except, along with screenshots of the undesigned views to give you an idea of what data is shown.
You can right click on any page to quickly save the url to your marks. When you do this we don't ask for your label or comments. If users want to add detail they can using the icon provided. They can even click it directly after and it will load the correct data. When a URL is quick saved, it sets the label to 'Unlabeled' and sets the notes to #chrome. This way they can easily go to the main application to quickly sort thru their quick links.
When the menu item is clicked we will attempt to save the page url and title. There are three types of message screens that could appear after the item is clicked:
The overlays will show for about 2.5 seconds and then remove themselves from the DOM completely.
We also show a badge quickly over the main icon. It will say 'OK' or 'ERR' depending on the outcome. When the overlay messages are removed the badge is also removed. Sometimes when a page is opened for a long time, Chrome loses track of it and cannot send a push message to the content page. When this happens the messaging will fallback to a standard JavaScript alert modal with message intact.
To do this simply place your cursor in the url bar in Chrome. Type unmark then a space then your search words. After 3 characters are typed it will call home to search for your account. If it finds results they will be returned below the URL bar and you can select anyone of them to be taken directly to that page.
We can extend this at a later date to return newest, oldest, etc.
The extension is self-aware of your authentication state as well as if the current tab in the current window's url has already been saved to your account (and is still active). On each click of the icon it calls home quick to check if you are logged in then it sends the url home to see if you have it saved. Depending on the outcome of those callbacks, it will then show/hide the correct screens. I was thinking about adding urls to localStorage but my only concern is if the user edits them on Nilai then they would be out of date in the extension. I am thinking we can do some type of call home to see last update time or something later if this becomes an issue.
If the user is logged out of their account, the screen will show them a message with a link to login.
We will only allow users to save links that start with the protocols of http or https. If they are at some other screen or URL, they will be shown a different error message.
If the current URL is already saved, but it is archived. The user will see a screen telling them the mark was archived with a link to restore it. If they restore it, they are then taking to the edit screen.
If the current URL is already saved and active, the user is shown the edit screen. On this screen the user has the choice to Delete the mark. If clicked, the mark is set to inactive and the user is shown a different panel.
If the current URL is not found in the user's account they are show a screen to add the mark. They can assign a lable and any notes right away. If the addition was successful the add screen will turn into the edit screen.
If the current URL is already saved and active, the user is shown the edit screen. From here they can update the label, notes, archive or delete the mark.
When a user is adding or updating a mark, there is a small box that will slide down from the top to show them a success or error message. It will show for a 3.5 seconds and remove itself.
All of the screenshots above are different design states. They all need to be prettied up (except the contextual menu, we can't do anything with that). They should be just HTML & CSS and I wouldn't make them super complicated. Below you will find two links, one for the crx file for this extension and a zip file that holds the actual files used so you can see the markup. All the actual extension markup is in nilai.html, CSS for the main view is in css/extension.css. The on page overlays are hardcoded styles.
You can use the zip file by unpacking it and then going to chrome://extensions, check the box to enable developer mode and use the options for Load unpacked extension. This will allow you to make updates and refresh them in real time. To make sure things are working correctly, please have http://nilai.plain set up locally and have it set to the latest nilai:release-v0.5 branch. If you want to use a different host you can. You will need to update the manifest.json file and the js/unmark/base.js file to replace http://nilai.plain with the host of your choice. It occurs once in each file.
The extension needs various icon sizes. They are listed below:
- 16 x 16
- 19 x 19
- 38 x 38
- 48 x 48
- 128 x 128