Closes #1, Closes #2, Closes #3; Update README

README.md

@@ -4,12 +4,18 @@ A Google Chrome browser extension to create pretty images of code snippets power
 
 ![](./images/demo.gif)
 
-## Extension usage
-1. Select the text on the page.
+## Usage
+1. Select the text (code snippet) on the page that you want to include in the image.
 2. Right click and select Code2Image and in the submenu, select the language.
 
-![](./images/context-menu-screenshot.png)
+![](./images/context-menu1-screenshot.png)
+3. In the language submenu, select a color theme.
 
-3. A file save dialog will appear where you can rename the file if required and save the image.
+![](./images/context-menu2-screenshot.png)
+4. A file save dialog will appear where you can rename the file 
+if required and save the image.
+![](./images/download-dialog-screenshot.png)
 
-![](./images/download-dialog-screenshot.png)
+## Sample Image generated using Code2Image
+
+![](./images/sample-image.png)

app.js

@@ -48,50 +48,96 @@ function getTimestamp() {
     return [...now.toDateString().split(" ").splice(1), now.toTimeString().substring(0, 8).split(':').join('')].join('_');
 }
 
+/**
+ * @param {string} newText 
+ */
+function updateOverlayText(newText) {
+    chrome.tabs.executeScript({
+        code: `(() => {
+            let overlayText = document.getElementById('Code2Image-Loading-Overlay-Text');
+            if (overlayText) { 
+                overlayText.textContent = "${newText}"; 
+            }
+        })();`,
+    });
+}
+
+function clearOverlay() {
+    chrome.tabs.executeScript({
+        code: `(() => {
+            let overlayView = document.getElementById('Code2Image-Loading-Overlay');
+            if (overlayView) { 
+                document.body.removeChild(overlayView);
+            }
+        })();`,
+    });
+}
+
 chrome.contextMenus.create({
     title: 'Code2Image',
     contexts: ['selection'],
     id: PARENT_ID
 }, () => {
     languages.forEach(language => {
+        const languageMenuItemId = `${PARENT_ID}_${language}`; 
         chrome.contextMenus.create({
             title: language,
             parentId: PARENT_ID,
-            id: `${PARENT_ID}_${language}`,
+            id: languageMenuItemId,
             contexts: ['selection'],
-            onclick: (event, tab) => {
-                handleClick(event, tab, language);
-            },
+        }, () => {
+            themes.forEach(theme => {
+                let themeMenuItemId = `${languageMenuItemId}_${theme}`;
+                chrome.contextMenus.create({
+                    title: theme,
+                    parentId: languageMenuItemId,
+                    id: themeMenuItemId,
+                    contexts: ['selection'],
+                    onclick: (event, tab) => {
+                        handleClick(event, tab, language, theme);
+                    }
+                });
+            });
         });
     });
 });
 
 /**
 * 
-* @param {chrome.contextMenus.OnClickData} event 
-* @param {chrome.tabs.Tab} tab 
-* @param {string} selectedLanguage 
+* @param {chrome.contextMenus.OnClickData} event
+* @param {chrome.tabs.Tab} tab
+* @param {string} selectedLanguage
+* @param {string} selectedTheme
 */
-function handleClick(event, tab, selectedLanguage) {
+function handleClick(event, tab, selectedLanguage, selectedTheme) {
     // event.selectionText does not preserve line breaks :(
-    chrome.tabs.executeScript( {
+    chrome.tabs.executeScript({
         code: "window.getSelection().toString();"
-    }, (selection) => {
+    }, (selection) => {    
         const selectedText = selection[0];
-        console.info('🔥', event.selectionText);
         console.info('🔥', `Selected Language: ${selectedLanguage}`);
 
         let queryParams = new URLSearchParams();
         queryParams.set('language', selectedLanguage);
-        queryParams.set('theme', 'atom-dark');
-        queryParams.set('scale', '2');
-        queryParams.set('line-numbers', 'false');
-        queryParams.set('_now_no_cache', '1');
+        queryParams.set('theme', selectedTheme);
+        queryParams.set('background-color', 'radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%)');
+
+        // create overlay
+        chrome.tabs.executeScript({
+            file: 'create-overlay.js',
+        });
 
         let requestUrl = `${API_ENDPOINT}/api/to-image?${queryParams.toString()}`;
         let request = new XMLHttpRequest();
         request.responseType = 'blob';
+        request.addEventListener("progress", (progressEvent) => {
+            if (progressEvent.lengthComputable) {
+                let percentLoaded = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0);
+                updateOverlayText(`Generating Image (${percentLoaded}%), please wait`);
+            }
+        });
         request.addEventListener("load", function () {
+            let durationMs = 1500;
             if (this.status === 200) {
                 console.info('✅', 'code2img request successful');
                 console.info('🛠', `Response Type: ${this.responseType}`);
@@ -112,9 +158,14 @@ function handleClick(event, tab, selectedLanguage) {
                     console.info('🤷‍♂️', 'Unknown response, ignored');
                 }
                 console.info('✅', 'Operation Complete');
+                durationMs = 0;
             } else {
-                console.warn('❌', `code2img: Error in request ${requestUrl}`, this.responseText);
+                updateOverlayText("Sorry, something went wrong 🤷‍♂️");
+                console.warn('❌', `code2img: Request failed`);
             }
+            setTimeout(() => {
+                clearOverlay();
+            }, durationMs);
         });
         request.open("POST", requestUrl);
         request.send(selectedText);

create-overlay.js

@@ -0,0 +1,44 @@
+(() => {
+    /*
+    position: fixed;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999999;
+    */
+
+    let overlayView = document.createElement('div');
+    overlayView.style.position = 'fixed';
+    overlayView.style.left = '0px';
+    overlayView.style.right = '0px';
+    overlayView.style.top = '0px';
+    overlayView.style.bottom = '0px';
+    overlayView.style.backgroundColor = 'rgba(0, 0, 0 ,0.5)';
+    overlayView.style.zIndex = 2147483647;
+    overlayView.setAttribute('id', 'Code2Image-Loading-Overlay');
+
+    /*
+    font-size: 5rem;
+    color: rgb(255, 255, 255);
+    z-index: 9999999;
+    position: fixed;
+    width: 100%;
+    margin-top: 50%;
+    height: 100vh;
+    text-align: center;
+    */
+    let overlayText = document.createElement('div');
+    overlayText.style.fontSize = '4rem';
+    overlayText.style.color = '#fff';
+    overlayText.style.zIndex = 2147483647;
+    overlayText.style.width = '100%';
+    overlayText.style.marginTop = '30%';
+    overlayText.style.textAlign = 'center';
+    overlayText.textContent = "Generating Image (0%), please wait...";
+    overlayText.setAttribute('id', 'Code2Image-Loading-Overlay-Text');
+
+    overlayView.appendChild(overlayText);
+    document.body.appendChild(overlayView);
+})();

manifest.json

@@ -6,7 +6,7 @@
     "permissions": [
         "contextMenus",
         "downloads",
-        "tabs",
+        "activeTab",
         "http://*/*",
         "https://*/*" 
     ],
@@ -19,5 +19,8 @@
         "scripts": [
             "app.js"
         ]
+    },
+    "browser_action": {
+        "default_popup": "popup.html"
     }
 }