Do you like to make notes while browsing or reading something on the internet but hate switching applications all the time? Then, this tips is for you. We are going to show you how you can make notes on your favorite browsers like Chrome, Firefox and Safari. Remember this will not work on Microsoft Edge as well as Internet Explorer.
How To Take Notes In Chrome, Firefox and Safari?
With the help simple command method you can convert your favorite browsers into a text editor. You don’t need any type of extra application or extension for doing this. You can write as much and taking notes directly on the browser window. Let us explain this with Chrome but you can do this on any other popular browsers like Firefox and Safari.
Open a new Chrome tab, type data:text/html, <html contenteditable> in the address bar and hit enter.
You’ll see a blank white screen. When you click on it, a cursor will appear and you can start type anything like a text editor.
On Firefox, you can also drag and drop image on the editor and start creating full length documents.
Saving Your Notes
Now, this method has a limitation that you can’t save the notes as a text file. When you close the tab, all your data will be gone. After taking all your notes, press “Control + S” on Windows and “Command + S” in MacBook for saving the content. Ensure to select the ‘Webpage, Complete’ option in Chrome and Firefox before saving the content. On Mac Safari, you should select ‘Web Archive’ option for saving the content.
This will save your notes in HTML page format with .htm or .html extension on your PC. Next time you can open this and all your work would be there. Again you can start editing and save it as a webpage. Otherwise, you can simply copy the content and paste on the text editor like Microsoft Word or Notepad in Windows platform or TextEdit in macOS platform. The biggest advantage of this method is that you can use any of the browser to take notes and then open it any other supported browser for editing.
How It Works?
Basically ‘contenteditable’ is a HTML5 global attribute that allows the application to edit the content. When used with the data element in the browser’s address bar, it uses the Data URI scheme to convert the browser window into a HTML page with editable mode. You can add more CSS stuffs to make the content area looks different. For example, you can create a border with padding and use different font size for your notes.
data:text/html, <div contenteditable="true" style="border:1px solid red;padding:20px;font-size:20px"> Here is your editable text.....</div>You will see the following result, when entering this on address bar.
Browser Support
This HTML5 attribute is supported on modern browsers like Google Chrome, Mozilla Firefox and Apple Safari. Unfortunately Microsoft browsers like Internet Explorer and Edge does not support contenteditable attribute. In fact, one of the earlier supported browser was Internet Explorer, but the support was removed in later versions.
Method 2: Using Extension
Using extension will help to overcome looking for the previous saved notes every time from your PC or Mac. It is easy to add notes on the extended stick boxes which will automatically get saved inside the browser. Let us explain here with a Chrome extension, you can try out similar extensions in Firefox or Safari. The extension will keep all your notes saved inside Chrome. You can click on extension anytime you want and check your notes from there.
For installing this extension, go to Chrome web store. Now, in extensions, search for “Sticky Notes – Just popped up!” and hit enter.
When you find the extension, click on “add to chrome” button. Chrome will ask you to add the extension. Click on “Add Extension” button and your extension will be added to Chrome.
This extension will add a sticky notes icon in the Chrome address bar. Now, click on the extension icon and start typing in directly. It will be saved in the sticky notes and you can view the saved content whenever you visit this for the next time.
