penge / my-notes

Simple and fast note-taking in Chrome with Google Drive support.

My Notes

My Notes – Chrome extension for simple and fast note-taking

Features

→   Automatically saved and updated in every open tab (How to open)

→   Context menu to save selected text to note or My Notes in second computer (Context menu)

→   Back up notes to Google Drive (Google Drive Sync)

→   Sync notes between My Notes and Google Drive, edit them from other devices or My Notes (Google Drive Sync)

→   Auto Sync notes to Google Drive (Google Drive Sync)

→   Drag and Drop image with automatic image upload to Google Drive (Google Drive Sync)

→   Toolbar (Bold, Italic, Underline, etc.)

→   Themes (Light, Dark, Custom)

→   Keyboard shortcuts

→   Command palette (Command palette)

→   Works offline

How to open

My Notes:

1. Click on My Notes icon in Chrome Toolbar (pin the icon for quick access)
2. Use keyboard shortcut (see chrome://extensions/shortcuts)

Options:

1. Click on gear icon in bottom left corner
2. Right-click on the pinned icon in Chrome Toolbar and select Options
3. Click on three-dots icon next to My Notes in Chrome Toolbar and select Options
4. Use keyboard shortcut (see Options)

Context menu

Context menu can be displayed on right-click on any website and based on the context used to quickly save:

1. selected text
2. current page URL (right-click on an empty space)
3. image

Destination can be any local note, or My Notes on other computers.

Options are based on the context but in general are:

• Save to [note name] – Option for every note. My Notes doesn't have to be open. Google Drive Sync is not required.
• Save to remotely open My Notes – My Notes on other computers needs to be open. The same Google Account needs to be used. Google Drive Sync is not required. The destination note will be named @received.

There is a few general purpose notes that can be used as destination. Their name starts with @ and they are created automatically when needed:

• @received
• @clipboard
• @images

Custom theme

Custom theme allows you to customize My Notes styles in many ways.

To use a Custom theme, open Options, select "Custom" theme, and click on the "Customize" button to start creating your own theme.

To start, either copy and paste into the editor the content of light.css or dark.css, or use CSS @import to import the theme you would like your Custom theme to be based on.

Then, modify CSS variables as you like to change background colors, text colors, etc. You can add any valid CSS as well to make further changes.

Click on the "Save" button to save the Custom theme.

Command palette

Command palette is a window which you can open with Cmd + P (or Ctrl + P) and use your keyboard to quickly find commands, and execute one.

To navigate between the commands, use Up and Down arrow keys.

To execute a selected command, press Enter.

The last executed command can be repeated with Cmd + Shift + P (or Ctrl + Shift + P).

Google Drive Sync

Google Drive Sync (see Options) saves your notes to your personal Google Drive and synchronizes the changes between your local My Notes and your Google Drive every time you click on the "Sync now" button (bottom left corner).

Why sync:

• Having a backup of your notes (notes can be restored)
• Can edit notes from other sources (Google Drive, My Notes, vice versa)
• Can sync notes and edit them from other computers (by installing My Notes and using the same Google Account)

Location

Notes are uploaded to your Google Drive under the folder "My Notes". This folder is created automatically. If the folder exists from a previous installation, notes are downloaded and uploaded and the synchronization continues.

Synchronization

Synchronization works both ways — to Google Drive, from Google Drive.

Notes are synchronized every time you click on the "Sync now" button. While the synchronization is in progress, "Sync now" button will spin. "Sync now" button has a tooltip that shows the time of the most recent synchronization.

Auto Sync

Auto Sync (see Options) can automatically sync your notes to and from Google Drive every time you open My Notes, and every 6 seconds if your local notes were updated since the last sync.

Image upload

When Google Drive Sync is enabled and having an internet connection, you can Drag and Drop one image at a time into a note. Each image is immediately uploaded to your Google Drive under "My Notes" / "assets" folder, which is created automatically.

Access

My Notes can only access the folder "My Notes" it created, and files it created inside this folder. It cannot see, access nor modify, any other files in your Google Drive.

Tips and tricks

1. Set a keyboard shortcut to quickly open My Notes (e.g. Cmd + Shift + M), which you can set on page chrome://extensions/shortcuts. If you make the keyboard shortcut Global, it will open My Notes even when Google Chrome is closed.
2. Check keyboard shortcuts (open Options) on how to quickly do some actions.
3. Use Cmd + Shift + V (or Ctrl + Shift + V) to paste text in a plain format (without formatting).
4. Hide Toolbar and Sidebar if you prefer a simple interface. You can use keyboard shortcuts to do so, or use Command palette.
5. See Google Fonts for a font you like, write its name into My Notes Options to use it.
6. Note name is present in the URL, therefore you can save it to bookmarks for quick access. If you append saved URL with &focus, it will always open that note in Focus mode (Sidebar hidden, Toolbar hidden).
7. Use Context menu to transfer selected text to My Notes on other computers.
8. Use Custom theme to customize the look of My Notes in any way needed.
9. Drag and Drop selected text onto a note's name in the Sidebar to insert the text into the note.
10. Drag and Drop a TXT or HTML file anywhere in the bottom icon area of the Sidebar to import the file as a new note.
11. Drag the Sidebar line to resize the Sidebar. Double-click on the Sidebar line to restore the original Sidebar width.
12. Hold down Cmd (or Ctrl) and move mouse wheel (or touchpad) up and down over the image to resize it. Double-click on the image to restore its original size.
13. Hold down Cmd (or Ctrl) and right-click anywhere in the table for a context menu, where you can align the table (Left, Center, Right).

How to contribute

1. Share your feedback (what to improve, what to change) under Issues or join the discussion in Discussions.
2. Join the development.
3. Help to test the upcoming version (to get feedback, to improve or tweak).
4. Help to improve the documentation.
5. Buy Me a Coffee.

How to develop

Develop:

$ npm install
$ export MY_NOTES_CLIENT_ID=<CLIENT_ID>    # needed when developing Google Drive Sync
$ npm run develop-watch                    # see "dist" folder

MY_NOTES_CLIENT_ID can be created at Google Cloud / APIs & Services / Credentials / OAuth 2.0 Client IDs.

Code check:

$ npm run lint

Tests:

$ npm test

Build:

$ npm run build   # see "dist" folder

Folder structure

env/              # Environment helpers

dist/             # Bundled My Notes (excluded from Git)

src/
  background/
    google-drive/   # Everything related to Google Drive Sync
                      # - File operations (List, Create, Get, Update, Delete)
                      # - Synchronization (to Google Drive, from Google Drive)
                      # - Queries (find My Notes folder, list files in My Notes folder)
                      # - Multipart bodies (create My Notes folder, create file, update file)
                      # - Tests

    init/           # Run when My Notes is installed/updated
                      # - Sets a Unique ID for My Notes installation (used by Context menu), if not already set
                      # - Migrates notes and options
                      # - Creates Context menu and attaches the events
                      # - Creates a Notification when My Notes is installed/updated
                      # - Registers the ways to open My Notes (icon click, keyboard shortcut)
                      # - Registers events to trigger Google Drive Sync from My Notes

  i18n/             # Internationalization (English)

  integration/      # Integration tests for Google Drive Sync

  notes/            # Everything related to Notes
                      # - Note editing, Note saving
                      # - Sidebar
                      # - Toolbar

  options/          # Everything related to Options
                      # - Font
                      # - Theme (Light, Dark, Custom)
                      # - Shortcuts
                      # - Google Drive Sync
                      # - Export & Import

  shared/           # Everything common (used at more places)
                      # - Date formatting (Last sync)
                      # - Managing the permissions (Requesting, Removing, Checking)
                      # - Helpers for Chrome Storage
                      # - Default values (Notes, Options)

  svg/              # SVG images for Toolbar

  themes/           # Light, Dark, Custom

  background.ts     # Main script for service worker
  notes.ts          # Main script for notes
  options.ts        # Main script for options
  template.html     # Template for notes.html and options.html

public/             # All public files (images, icons, HTML, CSS) copied to dist/


.editorconfig     # To enforce same editor configuration
.eslintrc         # To enforce code quality and same coding style with ESLint
.eslintignore     # Files excluded from ESLint checking
.gitignore        # Files excluded from Git

jest.config.ts    # Jest configuration
jest.setup.ts     # Jest setup
tsconfig.json     # TypeScript configuration

package-lock.json
package.json

LICENSE           # MIT
manifest.json     # Main extension file

register.js       # Uses ts-node/esm to resolve build.ts
build.ts          # Produces dist/ folder

README.md

Browser support

My Notes has full support for Google Chrome only. Although it may be possible to install it in other browsers, the support is not complete.

Support for other Chromium-based browsers will be added if possible.

Security and Privacy

My Notes doesn't collect any personal information or data. All your notes are stored locally in your browser. If you use Google Drive Sync, My Notes can back up the notes to your personal Google Drive.

To provide Google Drive functionality, My Notes has an application in Google Cloud. The sole purpose of this application is to authenticate you securely towards Google Drive and to allow the synchronization of notes.

Permissions

My Notes has the permissions listed in manifest.json.

Required:

• "storage" — used to save your notes and options to Chrome Storage (locally in your Chrome)
• "unlimitedStorage" — used to increase the default storage limit (which is 5MB)
• "contextMenus" — used to create My Notes Context menu
• "notifications" — used to show a Chrome notification (when Context menu was used)

Required permissions are shown to the user before installing the extension, and are needed at all times to provide the basic functionality.

Optional:

• "identity" — needed for "Enable Google Drive Sync" (see Options)

Optional permissions are needed only to provide additional functionality that can be enabled via a checkbox in Options.

User has the choice to either approve or deny the permissions.

QA

1. Where is My Notes published? What is the process behind publishing My Notes?

My Notes is published on Web Store, a store for Google Chrome extensions. When publishing a new version, I first make a new release here on GitHub. Then I create a build of the new release and send it to Web Store for a review. The review usually takes between 24 hours and a few days. After a successful review, the new version is available on Web Store.

2. Can I install My Notes manually by downloading it from GitHub?

Yes, My Notes can be installed manually by downloading it from GitHub, but keep in mind, that Google Drive Sync works only if My Notes is installed from Web Store. To install My Notes manually, download the zip file of the latest version which you can find here. Then, unpack the downloaded file and install NPM packages followed by npm run build. Finally, open chrome://extensions address in Google Chrome and click the "Load unpacked" button to load the unpacked extension from your drive by selecting the dist folder.

3. Why isn't Google Drive Sync working?

Google Drive Sync works only if My Notes is installed from Web Store on Google Chrome. There are two reasons for this. First, Google Chrome provides an "identity" API that My Notes relies on. Secondly, for security reasons, Google Drive Sync works only if My Notes has an ID equal to "lkeeogfaiembcblonahillacpaabmiop", which is the ID it has on Web Store (also in the URL). When My Notes is installed manually, it gets an ID that is different to the one on Web Store.

4. What browsers and operating systems are supported?

Currently, only Google Chrome is supported. Other Chromium-based browsers are next to come, if possible. Common OS's (Windows, Linux, macOS) are supported. Chromebooks are supported as well.

5. How can I open or edit notes from my phone?

If Google Drive Sync is enabled, My Notes will sync your notes to/from your personal Google Drive into a folder called "My Notes".

To get access to your Google Drive from a phone, install the Google Drive app. To open the note, click on it from the list in the folder. To edit the note, click on the overflow menu (the three-circle icon) next to the note, and select "Open with" from the context menu. You can then choose a preferred editor from the list.

6. What is the size limit for my notes?

Notes are NOT limited in size with the addition of "unlimitedStorage" permission.

7. (Google Drive) Where are images uploaded?

Images are uploaded to your personal Google Drive under the folder My Notes / assets. The folder "assets" is created automatically when needed.

8. (Google Drive) Are images stored privately?

Yes, only you can see the images. If you'd like to share the image(s) publicly or with someone specific, use the Share button in Google Drive.

9. (Google Drive) Are images deleted from my Google Drive after I remove them from a note?

No, images continue to be stored in your Google Drive for future use. This way images don't have to be uploaded again. If you'd like to delete an image permanently, delete the image in Google Drive.

10. (Google Drive) How can I reuse a previously uploaded image after I have removed it from a note?

Go to your Google Drive, find the image you'd like to insert, right-click on the image and click on "Get link". Copy the link and paste it into My Notes using the "Insert Image" button.

11. Is My Notes free?

My Notes is open source, free to download, install, and use. The recommended way to install My Notes is from Web Store.

---

Created with ❤ in 2019.

my-notes's Issues

Show notification when new version has been installed

Update to a new version can bring interesting features, and these can be overseen if UI remains unchanged.

The idea is to have notification that is displayed everytime when a new version has been installed.

Preview of the notification:

New version 2.3 has been installed.

See what's new    Close

See what's new would open https://github.com/penge/my-notes/releases in a New Tab

Close would close the notification

Save button to save notes for later

It would be great if there was a save button. This would allow users to save notes to a file or within the browser for later use.

Add Toggle => Light Mode / Dark Mode

Add a beautiful toggle to switch between Light Mode and Dark Mode.

This feature will have higher priority than OS settings.

Reasons:

• Someone has Dark mode on Mac, but wants to use Light mode My Notes
• Someone has Light mode on Mac, but wants to use Dark mode My Notes

Therefore, the preference of Light Mode / Dark Mode is not defined by OS, but by the user, based on his preference.

Tab Key doesn't tab or space text

When I click tab, it doesn't tab or space the text. Instead, it puts focus on the search bar.

It might be possible to add this functionality, but I'm not entirely sure how.

Maybe it can keep focus on the textbox and add a tab or spacing character to the textbox.

Trim whitespace on note rename/create

I have found note renaming (and creation) can be improved by removing the trailing space.

Use strict mode

Let's be bold. Let's be strict.

"use strict";

It would be a good idea to preserve stored notes over the next update

I don't know whether it was possible to port the existing notes into the new version of the extension. Seeing how they're essentially the same item in the extensions menu, using the same Chromium API, I think that might have been possible.

Now that I've lost my notes, I think it's a good idea to remind you – as well as any developer reading – that retaining saved data over version bumps is really fucking important. Pardon the swearing: it's important to me that the weight of the matter gets across accurately.

At the very least, consider letting the users know that their data may be lost in transition, so that at least there's a chance to copy it to an intermediary text file.

(I'm naturally assuming you had tested the data retention behavior before releasing the the new version extensively.)

Improve quick navigation between notes using History API

History API allows to store the information of currently open note, and notes, that have been visited before.

Then, BACK and FORWARD in the browser, can be used to quickly navigate between last open notes. This can be also done using keyboard shortcuts (based on the OS you use). In Chrome OS for example, this would be very easy and fast with the arrow keys next to esc:

This navigation would not only be fast and better than currently defined shortcuts (jump to page 1,2,3) but also remembered on page refresh.

Insert images to the note

Editor in My Notes 3 can insert any arbitrary HTML. Meaning, if you find an image on the internet you'd like to insert, like a picture of a cake:

Simply right-click on the image and select "Copy Image" from the dropdown.

Then, in My Notes right-click and select "Paste".

Result

This issue is created to primarily let you know this is possible.
And possibly to have a discussion how this could be improved, like providing a picture's URL and having it inserted.

Fix font size on Kiwi browser

Use viewport to achieve a good font size on Android / Kiwi browser.

Allow user to focus the notes area by default as an option

Related to #57: consider adding an option to focus the notes <textarea>. This should make taking notes slightly easier if it's something you do often in the browser. The HTMLElement.focus() method should assist with that.

Also, add Esc keybind to escape <textarea> focus and re-focus the address bar. You can use the .blur() method on document.activeElement to achieve that.

Add Options to change the font size

The font size wil be changable in a range (from, to) using cute buttons in the bottom right corner.

Open-tabs sync is behind the latest changes

After typing the note, I would open a new tab again, to see if my changes have been properly saved. Most of the time, the aren't. Often enough, latest-added words phrases are missing, and I can't be sure they will be saved properly once I close the tab I was editing in.

It would be excellent if I could jot the notes down and close the tab, knowing full well that everything I'd left on the "page" is safe with the extension.

It would be nice if can use any font from Google Fonts library

Google Fonts is a library of a thousand beautiful fonts that can be retrieved in a simple way, and fast.

Here's a generic example how to retrieve a font:

<link href="https://fonts.googleapis.com/css?family=FONT+NAME&display=swap" rel="stylesheet">

font-family: "FONT+NAME", monospace;

This is how it would work behind the scenes. As for My Notes user, it would be more simple. Simple as typing a font name.

Create a dedicated place (Clipboard) to receive notes

In My Notes 2.x, the selection saved using the context menu is stored to the top of 1/3.

Clipboard

My Notes 3.x will allow to rename the notes. Something like 1/3 is no longer fixed.
To solve this, there will be a special note added called Clipboard:

• serves to receive the selection
• can be edited just like any other note
• cannot be renamed or deleted

Allow cross editing, save pages individually

My Notes is a replacement for New Tab and therefore can be open multiple times.

The goal is to detect if there is (are) other My Notes tabs already open, and to keep edits only in one place (one tab). In other words, the goal is to prevent cross editing in multiple My Notes tabs. Cross editing can cause problems like which version should be saved last.

If there is already open My Notes in the browser, display a message or even better, display a Link, that will jump (highlight) to the tab with already open My Notes.

The goal is changed. Allow cross editing by saving pages individually (save only pages that are edited in the current tab).

Optimize text saving (do not save on keys that do not change the text)

No need to save on Ctrl, Alt, Shift, arrow keys, or other.

Keys that don't change the text, will no longer trigger the save (because text remained unchanged).

Exception

A special exception is Tab and Ctrl+Tab as those will change the text, indent the text forward or backward.

Move page selection outside of the text field

Having view-changing toggle hover over a portion of the text sounds like a UX accident waiting to happen.

My suggestion is to take it out of the scope of the text field, like this:

(I'm sure you can do better than this, especially considering how eye-catching the current-page black is.)

This eliminates the risk of mis-clicking while navigating the text and opens the doors for future page-related improvements.

Ideally, this means you can have as many pages as you want, since the container is flexible by default. (You could before, of course, but this form factor makes it much easier to navigate.) You can even resolve having more pages than is comfortable navigating on the device by adding a ... pseudo-tab that lists all the pages à la Chrome's bookmarks.

If you want user control over their pages, add a + button after all the pages, and a ╳ button (or a 🞡-rotated button) for each page when there's more than one. Naturally, prompt the user before closing if the page contains any data.

How about a Todo list?

There has been a requirement in having a Todo list.

I am now evaluating how that could be done and if it's necessary.

How I manage a Todo list and might be efficient, is like this:

This gives me an option to write down a Todo list with additional notes (which I found to be a good combination) or write down nested Todos (a combined task).

What do you think. Is a Todo list really necessary? Or is it already there?

Open My Notes with 1 click on the icon

There are many great extensions that replace New Tab, but only one extension can do this at a time (which puts other extensions to the side).

I'll chose a different approach:

1 click on My Notes icon will open My Notes in a New Tab

This will have several benefits:

• New Tab remains unchanged, makes extension less intrusive (it doesn't override the settings)
• User continues to see bookmarks in New Tab (setting that bookmarks are automatically visible only in a New Tab)
• User is more in control (when to open My Notes, and how many times to open it)
• Newly open Tab can have favicon (My Notes icon)
• The extension does not override New Tab and can live alongside other extensions

Downsides:

• New Tab open this way will have an URL that might not be "nice" as it will be a path to the extension

Add PWA support

Besides the chrome extension, My Notes could be used as a standalone app.

Add manifest, service worker registration, service worker.
Switch from chrome storage (not available in PWA) to IndexedDB (use IDB-Keyval wrapper).

Benefits:

• beautiful UI (no tabs, no address bar, more space)
• works as separate application (great for Chrome OS)
• across devices

Downsides:

• no Chrome Storage and no Chrome Sync (this is not a deal breaker if using just 1 computer, it that case it would work the same)
• fragmentation (1 app becomes 2)

Add icon to My Notes (this will appear in Chrome Extensions page)

My Notes will have a beautiful icon in the Chrome Extensions page.

Improve notes editor (bold, italic, underline, headings)

My Notes 1 and 2 are using <textarea> to write down the notes in plain text. This doesn't allow to use styles to organize the content visually better. Here's how it can be improved.

Required features

• Headings (h1, h2, h3)
• bold
• italic
• underline
• and possibly more

Options

This can be done either by creating something, or using existing solution. Creating something seems better as feature list is not huge and creating something is quite simple.

Here are some options for the reference and also inspiration.

Known WYSIWYG editors are:

• Slate
• Draft.js
• ProseMirror
• Quill
• CKEditor
• TinyMCE
• Editor.js
• More at https://github.com/JefMari/awesome-wysiwyg

Quill looks nice, but seems not maintained:

• https://medium.com/@jhchen/the-state-of-quill-and-2-0-fb38db7a59b9 (Sep 2017)
• slab/quill#2435 (Roadmap)
• https://github.com/quilljs/quill/graphs/commit-activity
• https://github.com/quilljs/quill/releases

Known Code editors are:

• Ace (powers Cloud9)
• Monaco (powers VS Code)
• CodeMirror
• More at https://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Add fuzzy finding!

My Notes 3 isn't even out yet, and there are already great features to add!

I start typing todo (or Todo, or TODO), if there is a note => it is open.

Add dark mode to options

Like in title. White page is bad for people using dark modes.

Support for Markdown

Its an awesome extension, helping me a lot in day to day life. More wonderful features are also coming.

Was just wondering if there is any plan to add support for using Markdown, it will help me to have checklists, headings, sections, tables in a single place to manage my notes better. For e.g. I keep the sprint plan always handy in my notes tab (along with many other day to day notes or other important items for the project) and if I have the option to use markdown I will be able to manage them better.

Export all notes

Add option to export notes.

Export – Open, Closed, or All Notes
Format – .txt or .md

If exporting more than 1 note, put them in .zip

Does not open with new tab anymore - v 2.3.2

After updating to version 2.3.2 I can't get MyNotes to appear when I open a new tab.

Was there a setting before?

Implement debounce to avoid MAX_WRITE_OPERATIONS_PER_MINUTE quota (also, use beforeunload)

This. Is. Real. Stuff.

debounce

Save text only 1 time per 1 second to avoid MAX_WRITE_OPERATIONS_PER_MINUTE quota which is to be 120 write operations per minute. Use debounce to do so, and set immediate to true.

beforeunload

User might open the window and quickly type something (not paste, but type) and quickly close the window. Leverage beforeunload event to save the text immediately in such a scenario.
Reason: This might happen very quickly, the window might be closed before debounce gets a chance to triggered again.

Do something about "It can: Read your Browsing history"

Web Store interprets the permission called "tabs" in the worst case scenario, by showing a following message:

Add "My Notes"?


It can:

Read your Browsing history

The only message worse than that would be:

It can:

Read your Browsing history and send to a remote server.

This doesn't do good justice as it's claiming something that's not true. And just because something is possible with a certain permission, it's unholy to claim as a real thing.

This message is shown before installing version 2.3. This version requires "tabs" permission so it can replace New Tab as an optional setting, to show My Notes in New Tab. Prior versions did so declaratively via manifest.json and it was no optional. Declarative New Tab replacement is limited and restricted compared to programmatic, and so it doesn't require "tabs" permission, but also doesn't bring further customization like the mentioned optional setting.

The proposed solution to this is:

• Open My Notes with 1 click on the icon.
• Remove the optional setting and tabs permission.

Rename notes, Create new notes, Delete notes

not to be used

Tiles

Originally posted by @penge in #53 (comment)

Add Focus mode

Focus mode will allow users to hide the controls in the corner (font size, light/dark mode toggle) and hence maximize the focus on the text area.

Entering or Leaving Focus mode will be done by a keyboard shortcut.

Use IIFE to protect the code

Use IIFE to enclose the javascript from the outside world.

"Focus" option is unclear

I assumed, on seeing release notes, that what the "Focus by default" option does is focus the <textarea> element of the notes, making it easier to take notes when opening a new tab.

Instead what it does is engage focus mode.

It's an excellent option with an unclear title. Consider renaming it to "Focus mode on by default" so as to not confuse the user.

To new users, it may also be useful to explain what focus mode is. Consider adding a brief explanation of the different between default and focus mode under the category title or the checkbox itself in the options.

Tables

A new editor in My Notes 3.0 (see #72) can be improved to support Tables.

Required functionality:

• Insert a new table

• Modify the table size in the following ways:

  • Insert row above
  • Insert row below
  • Insert column left
  • Insert column right
  • Delete row
  • Delete column

• Set Heading row(s) and/or Heading column(s)

404 in chrome store

The site that you have provided is not found in chrome store.

Allow custom font choice

I like this extension, but would really prefer to be able to set the font family of the notes, because I need the font to be monospaced for this to be useful to me.

I wouldn't mind opening a PR but I don't have a ton of free time at the moment. If you are open to it but don't want to implement, I'll see what I can do! :)

Buttons block scroll bar

When the scroll bar appears, the buttons (for dark mode & font size) appear over top of it.

Ideally, the buttons should be to the left of the scroll bar.

Save Notes to Chrome sync, everything else to Chrome local

Notes will be stored to Chrome sync (as are right now).

Everything else (font type, font size, current page, mode - light/dark) will go to Chrome local.

Reason:
Notes can be shared across computers.
Everything else is computer specific.

Testing My Notes 3 (you are invited!)

My Notes 3 is almost here!

I am now testing the new features — it would be great if you could join!

Here's how you could help out with the testing:

• to confirm the functionality
• to experience the UI/UX and provide feedback

See Testing Checklist for details.

My Notes 3

• can Create / Rename / Delete the notes (#64, #66)
• improved Editor that supports HTML and an easy way to insert bold, italic, underline, strikethrough, Heading 2, Heading 3, paragraph, horizontal rule, unordered list, ordered list (#59, #72)
• Google Drive backup with automatic two-way sync (on every open, close, refresh of My Notes), which uploads new and edited notes to Google Drive, and downloads new and edited notes from Google Drive (#53)
• better integration with the browser, which comes down to:
  • name of the open note is displayed in the browser's Tab (#65)
  • Back/Forward buttons (or associated shortcuts) can navigate between last open notes (#69)

Testing Checklist

Here's a list of things to test, which is also a detailed list of the new features. Any additional playing around is very welcome.

Create / Rename / Delete

1. Can create a new note (see New note button)

   • new note is added to the NOTE_LIST in an alphabetical order; also in every other open My Notes tab NOTE_LIST
   • new note name needs to be unique – creating a note with the name taken by an existing note should not be allowed

2. Can rename the note (see three dots button)

   • can rename the note from the NOTE_LIST

     • while renaming the note, it should be highlighted in blue
     • after the note is renamed, the name should be updated, tiles should be updated in an alphabetical order; renaming should be applied in every open My Notes tab NOTE_LIST and NOTE_DETAIL for the same note
     • note should NOT be renamed if the new name is taken by an existing note

   • can rename the note from the NOTE_DETAIL

     • while renaming the note, it should be highlighted in blue
     • after the note is renamed, the name should be updated; renaming should be applied in every open My Notes tab NOTE_LIST and NOTE_DETAIL for the same note
     • note should NOT be renamed if the new name is taken by an existing note

3. Can delete the note (see three dots button)

   • can delete the note from the NOTE_LIST

     • while deleting the note, it should be highlighted in red and proceed only if you type "delete"
     • after deleted, it should be removed from the NOTE_LIST; also from every other open My Notes tab NOTE_LIST and if in NOTE_DETAIL, it should jump to an updated NOTE_LIST

   • can delete the note from the NOTE_DETAIL

     • while deleting the note, it should be highlighted in red and proceed only if you type "delete"
     • after deleted, it should jump to an updated NOTE_LIST; also update every other open My Notes tab NOTE_LIST and if in NOTE_DETAIL, it should jump to an updated NOTE_LIST

   • creating a new note with the name as deleted one should be possible

Editing

4. The new Editor can style the content, or insert the elements

   • buttons for bold, italic, underline, etc., should apply the style, or insert the element
   • keyboard shortcuts should work too after selecting a text, like CTRL+B for bold
   • styles can be combined, such as bold + italic

5. Editing the note content is synchronized across the other My Notes tab(s)

   • changing the note content should be updated after 1 second in every other open My Notes tab NOTE_LIST and NOTE_DETAIL for the same note

Browser integration

6. The title in the browser's Tab should change accordingly:

   • when in NOTE_LIST to "My Notes"
   • when in NOTE_DETAIL to note's name

7. Can use Back/Forward buttons (or associated shortcuts) to navigate between the recently open notes

   • if the note in the history was meanwhile renamed or deleted, navigating to it should open NOTE_LIST

Google Drive

8. Google Drive in Options does the following:

   • after enabled:

     • My Notes folder is created in your Google Drive – if it doesn't exist; and if it exists – existing folder should be used
     • it should display a link next to "Backup location:"; when clicked, it should open in the new tab newly created or existing My Notes folder in your Google Drive
     • your notes should be immediately uploaded to Google Drive / My Notes
     • Time of sync should be displayed next to "Last sync:"
     • NOTE_LIST should have "Sync Now" button displayed, with "Last sync:" and "Open in Google Drive"
     • if enabled from a second computer, existing notes should be downloaded

   • after disabled:

     • it should remove the link next to "Backup location:", remove the time next to "Last sync:"
     • NOTE_LIST should have hidden "Sync Now" button, "Last sync:", "Open in Google Drive"
     • uploaded notes should stay if Google Drive

9. When My Notes is Open/Closed/Refreshed, or "Sync Now" is clicked, following should happen:

   • towards Google Drive

     • notes that are new, are uploaded creating a new file
     • notes that are updated, are uploaded updating the existing file

   • towards My Notes:

     • files that are new, are downloaded as new notes
     • files that are updated (manually in Google Drive, or from other computer's My Notes), are downloaded and update the content of the note

   • if Google Drive / My Notes folder is deleted by you, the synchronization should stop (and hide/reset the elements related to the synchronization)

   • if Google Drive in Options is disabled, the synchronization should stop (and hide/reset the elements related to the synchronization)

Testing Members

# MEMBERS

A=penge (me)


# RESULTS

    A
1   +
2   +
3   +
4   +
5   +
6   +
7   +
8   +
9   +

-   => not tested
!   => not working
+   => working 

I have tested all, but will do again.

How to join

If you'd like to join, simply let me know here. I will soon prepare the branch with a commit we will be testing.

1. Let me know
2. Checkout the code
3. Install My Notes
4. Send me your My Notes installation ID, example: ofdfapdmkkhenkgihklcdcmjbfkdojci
5. I'll create for you a Client ID in Google Cloud Platform, and send it back to you
6. Put the Client ID in manifest.json and reload My Notes
7. Proceed with Testing Checklist
8. Send me back your results / feedback

Before the testing starts, the source code will be freezed and the branch / commit ID will be provided.

Show a note name in the browser's tab

My Notes 3 will allow to set a name to the note, this could be displayed in the browser's tab as well.

Title:

• set to note name when open

• set to "My Notes" when no note open

Elaborate on permissions required to use the extension

It seems that the new version of My Notes was disabled because it required another permission: to read my browsing history – something I wouldn't think necessary for a new-tab note-taking extension.

Could you elaborate on the permissions required by the extension? Something like "Replace new tab" would make sense on its own – it is, after all, decidedly a new-tab replacement extension – while browsing history access raises a bit of a concern.

Optimize font size saving

Right now, font size is saved on every change (not really necessary).

To keep write quota within limits, save font size just once, during beforeunload.

beforeunload will be called when the tab is about to be closed.

Its hiding the the bookmarks

Add basic Tab Forward / Backward support

Now

Tab will switch between textarea and Chrome's search box.

Expected

• Tab will indent the text forward (--> 2 spaces)
• Shift+Tab will indent the text backward (<-- 2 spaces)

Stage 1

That means, this will work only when no text is selected.
Forwarding selected text, or forwarding text selection, is much more complicated topic that can be solved in future. Same applies for Backwarding.
Edit: Especially when reaching the end of the line. Variable font and variable window width make it complicated to identify the end of line and when to stop.

Add content tabs

What do you think about adding tabs?
For example I want to keep different pages with notes and quickly switch between them.

Something like this:

If that sounds like a good idea I can help to implement

Fix MAX_WRITE_OPERATIONS_PER_MINUTE

DAMN Chrome Storage. It has been updated, and it's faster. But not lighting fast as it should be.

There is a MAX_WRITE_OPERATIONS_PER_MINUTE. (which is 120)

Source:
https://developer.chrome.com/apps/storage

This solution will be quick. Instead of listening to "input" event, I will save data only on "keyup" event. Fast typers might need wait for further optimizations, but that will come next.

Publish to Firefox addon store

I tested with Firefox and the extension appears to work without any problems. The only change you'll need is to add a gecko id in the manifest.json file.

Feature to save the notes online?

I lost my notes yesterday and not sure what happened. Maybe because of the new update yesterday Jan 30? What I did was to reinstall the plugin again. Do you think in cases like this, we should be able to save it online instead of local storage?

Move page selection outside of the text field (Part 2)

Originally created by @FirebrandCoding here #46

---

Builds

• https://penge.imfast.io/my-notes/3/notes.html
• https://penge.imfast.io/my-notes/2/notes.html
• https://penge.imfast.io/my-notes/1/notes.html

Branch

https://github.com/penge/my-notes/tree/next

---

This message will be updated on new builds.