add code block

Author: arjad

dist/content.js

@@ -1,15 +1,15 @@
 {
   "manifest_version": 3,
   "name": "I Notes",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "description": "i Notes is a lightweight, easy-to-use extension for taking quick notes, saving developer commands",
   "permissions": [
     "storage", 
     "notifications",
     "alarms",
     "identity"
-
   ],
+  "host_permissions": ["<all_urls>"],
   "action": {
     "default_popup": "popup.html"
   },

dist/manifest.json

@@ -1,3 +1,4 @@
+// alarm
 chrome.alarms.onAlarm.addListener((alarm) => {
   console.log("Alarm triggered:", alarm.name);
 
@@ -18,10 +19,12 @@ chrome.alarms.onAlarm.addListener((alarm) => {
 
 });
 
+// welcome note
 chrome.runtime.onInstalled.addListener(() => {
   console.log("I Notes extension installed");
 });
 
+// google auth
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action === "startGoogleLogin") {
     const clientId = process.env.GOOGLE_AUTH_CLIENT_ID;

dist/popup.js

@@ -1,15 +1,15 @@
 {
   "manifest_version": 3,
   "name": "I Notes",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "description": "i Notes is a lightweight, easy-to-use extension for taking quick notes, saving developer commands",
   "permissions": [
     "storage", 
     "notifications",
     "alarms",
     "identity"
-
   ],
+  "host_permissions": ["<all_urls>"],
   "action": {
     "default_popup": "popup.html"
   },

dist/settings.js

@@ -19,6 +19,9 @@ const RichText = ({ editorRef, handleFormat }) => {
         <button onClick={() => handleFormat("insertOrderedList")} className="border-0 bg-transparent">
           <i className="fa-solid fa-list-ol"></i>
         </button>
+        <button onClick={() => handleFormat("code")} className="border-0 bg-transparent">
+          <i className="fas fa-code"></i>
+        </button>
       </nav>
       <div
         ref={editorRef}

public/background.js

@@ -195,3 +195,22 @@ i.fa-thumbtack.pinned {
 #note-input{
   min-height: 5rem;
 }
+
+.highlight-code {
+  background-color: #bdbdbd;
+  color: #f8f8f2;
+  font-family: monospace;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background-color: #f8f8f8;
+  padding: 3px;
+  margin: 8px 0;
+  white-space: pre-wrap;
+  font-family: 'Courier New', Courier, monospace;
+  border-radius: 3px;
+  color: black;
+}
+.dark-mode .highlight-code {
+  background-color: #474747;
+  color: white;
+}

public/manifest.json

@@ -66,7 +66,7 @@ chrome.storage.local.get(["settings"], (result) => {
       cursor: 'pointer',
       boxShadow: '0 0 2px rgba(0,0,0,0.3)',
       fontWeight: 'bold',
-      display: 'none' // Initially hidden
+      display: 'none'
     }, {
       innerText: '×',
       title: 'Hide'
@@ -79,7 +79,6 @@ chrome.storage.local.get(["settings"], (result) => {
       e.stopPropagation();
       openBtn.style.display = 'none';
 
-      // Update chrome.storage.local settings
       chrome.storage.local.get(["settings"], (result) => {
         const settings = result.settings || {};
         settings.hideSortNotes = true;
@@ -187,7 +186,7 @@ chrome.storage.local.get(["settings"], (result) => {
         const html = `
           <div class="note-item" style="padding: 10px 0px; border-bottom: 1px solid #6c757d;">
             <div>
-              <div class="note-text">${note.text}</div>
+              <div class="note-text">${note.text.replace(/`([^`]+)`/g, `<code style="background-color:#c2c2c2;color:black;font-family:'Courier New',Courier,monospace;padding:3px;margin:8px 0;white-space:pre-wrap;border-radius:3px;">$1</code>`) }</div>
               <span class="options" style="display: flex; justify-content: space-between; align-items: center;" data-id="${note.id}">
                 <small class="date" style="font-size: 0.5rem; color: #6c757d; border: 1px solid #6c757d; border-radius: 12px; padding: 1px 8px;">${formatDate(note.date)}</small>
                 <div class="icons">