Introducing WebNote Chrome Extension

I like to read and research and as such I always bookmark interesting articles both locally and online eg Google Bookmarks or some other service. Since we do not always have the time to read an article of our interest the time we come across it, we use online bookmarking services to save and read them later and that’s good.

However, I was looking for a solution which could allow me to save those articles locally on my computer and read them any time later, this is something useful in cases when you are not connected to internet and yet want to be able to have the access to articles you like. I came across Evernote which is pretty cool services you can use to save webpages, videos, voice and a lot more. My primary focus though was to save webpages/articles related to web development. Any page you save to Evernote (via their Web Clipper browser plugin), can be downloaded to your computer via Sync option of that software which is exactly what I was looking for. After using it for a while, it turned out that with FREE account only 60MB is allocated which I consumed within 15 days 😦

As a developer, I thought of creating my own solution that could be used to save articles/pages locally rather than buying Evernote. So I went on to creating the Chrome extension named WebNote.

WebNote can be used to save webpages with all their content, images, css, etc locally. WebNote will prove useful for anyone who does research on a particular topic or reads a lot.

How It Works

Once extension is installed and you press its icon on the browser toolbar, it pops up with a window (screenshot below) which pre-fills the URL and Title of the page, allows you to select Folder you want to save the page in along with any optional Comments. The extension pre-fills folders field by reading them from the local database which means for the WebNote to work, you need to have WAMP setup locally. Once you press the Save button, the page’s information is saved in the very database. The page itself is saved on hard disk (folder where WebNote CMS will be installed) in MHT format and if you don’t know about MHT format, it is basically a format which saves all resources of a page including images, css in one single page. Internet Explorer supports this format which means saved pages will open in IE.

I won’t go into details of how I created Chrome extension (there are a lot of resources out there) or how pages are saved in MHT format with all their resources in single page or even the small CMS used to manage the pages saved via WebNote because everything can be downloaded (see Installation guide below) and source code can be viewed.

WebNote Screenshot

All the pages saved are accessed via little CMS that I wrote, here are some screenshots.

CMS Screenshots

Notice that from programming perspective, CMS’s code is ugly in that it does not separate PHP and HTML and CMS password is saved with no encryption (since it will run locally). There are some reasons behind that though:

• I wanted to write application real quick – too lazy to separate php, html logic
• It was only meant to be for personal use but today I decided to share it
• It wasn’t meant to be a professional project in which I take all sorts of care

Anyways, it serves the purpose but you can still go ahead and modify the code however you like.

Installation

Installing Chrome Extension:

• Download WebNote Chrome extension and extract contents somewhere
• In Chrome, type “chrome://extensions/” (without quotes) in address bar, Extensions window will open
• On the right side of Chrome Extension page, there will be a link “Developer mode“, click on that
• Now click on the button “Load unpacked extension” and specify path where you extracted the WebNote extension
• You will notice that a Notepad-like icon will be added to Chrome toolbar that is extension is installed

Installing CMS:

• Download WebNote CMS and extract it in www/root folder of your WAMP installation folder
• Open PHPMyAdmin or any other MySQL client of your choice and create a database named “webnote” (without quotes)
• Import the sql file “webnote.sql” present in WebNote CMS folder in that newly created database
• In the Webnote CMS folder, go to admin/includes/db.php and edit your database settings accordingly
• Browse the CMS where you installed it in the browser like “http://localhost/foldername/admin“. You should see Admin login panel
• Enter “admin” as username and “123123” as password without quotes.

Using WebNote

• Once logged in, create some folders. You should see Add Folder link to the right of Navigation on the My Folders page.
• To save a page, click the WebNote icon in the browser toolbar and hit the Save Now button
• You will see ajax loading image, wait until page is saved. A notification will appear telling you that page is saved.
• Go back to Admin panel, click on “My Folders” link and then click on the folder you saved the page in.
• Click on the link title and it will open in Internet Explorer (because MHT is supported by it).

Notes & Tips

• When you create a folder, it does not create a folder physically on your hard disk. Consider it kind of tag for each page.
• All files are saved in “mht” folder inside CMS.
• All other page information including title, folder, url, html is saved in database
• To save pages, you obviously need to have internet connection to be able to save them locally and read them later
• You can pre-populate “Comments” field by selecting some text on page and then hitting the WebNote icon in toolbar.

Have fun with your readings and research 🙂