• create manifest.json
• detect gmail bodyMessage

• add sections Why, What and How

Previous solution :
emailCharmer (content_script) is responsible for:

• detect bodyMessage once the page is fully loaded
• on Change collect the data from bodyMessage
• data should be an array of words
• on click on word send word to background
• create a API request and get synonym
• send synonym back

These above steps don't work for me.
I had trouble to detect the bodyMessage, it wasn't reliable.

The code window.addEventListener('DOMConetentLoaded', ...) - seems to not be triggered at all
I use setTimeout to detect the bodyMessage, which worked but the rest steps seemed to be overcomplicated for the job.

New solution:

• once extension icon is clicked , trigger script.js
• script.js detect bodyMessage with no problems
• words on click are send to background
• background sends back dummy text for now

I think my chose for external API is https://www.wordsapi.com/

• http://stackoverflow.com/questions/20019958/chrome-extension-how-to-send-data-from-content-script-to-popup-html

• selenium?

Currently to see synonyms suggestions user needs to click on the word.

Problems with that approach:

• any click in the email area causes the opening alert box or throws an error depending on the position of the word.

Bug when clicking on FIRST and LAST word: throws an errror:

Uncaught DOMException: Failed to execute 'setEnd' on 'Range': The offset 28 is larger than or equal to the node's length (27)

Currently I am sending back not quite a very good match to selected word. Check out the response object to get more relevant suggestion.

• explore other suggestions from response object

Also API can't match words which are surrounded by special characters like: . , ? !

• strip off the word from any special characters, lowerCase it as well before request to API

Also another issue is with selecting words by clicking on FIRST and LAST throws an errror:

script.js:13 Uncaught DOMException: Failed to execute 'setEnd' on 'Range': The offset 28 is larger than or equal to the node's length (27).

• investigate and fix it

The new suggested word convert into HTML element and append it to bodyMessage.

• check out if the above solution works
• custom alert (for now as it is simple and quick solution)
• ideally tooltip would be great!