refactor(extension): remove embedded toggle functionality

Author: pivanov

packages/extension/src/assets/css/styles.css

@@ -2,42 +2,6 @@
   font-family: Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace;
 }
 
-.react-scan-extension-button {
-  position: fixed;
-  right: 24px;
-  bottom: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 39px;
-  min-width: 39px;
-  color: rgba(255, 255, 255, 0.5);
-  background: rgba(0, 0, 0, 0.95);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  pointer-events: auto;
-  cursor: pointer;
-  transition: all 300ms ease-in-out;
-  opacity: 0;
-  animation: fadeIn 300ms 300ms ease-in-out forwards;
-  z-index: 2147483650;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.react-scan-extension-button:hover {
-  color: #fff;
-}
-
 #react-scan-toolbar {
   flex-direction: row !important;
   opacity: 0;
@@ -47,14 +11,3 @@
 #react-scan-toolbar #react-scan-toolbar-content {
   transition: opacity 300ms ease-in-out;
 }
-
-#react-scan-toolbar .react-scan-extension-button {
-  position: unset;
-  margin-left: 4px;
-  opacity: 1;
-  animation: none;
-}
-
-#react-scan-toolbar .react-scan-extension-button:hover {
-  background: rgba(0, 0, 0, 0.95);
-}

packages/extension/src/content/index.ts

@@ -67,61 +67,15 @@ const init = (() => {
 
     loadCss(styles);
 
-    const EXTENSION_ON_SVG = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-power"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
-    `;
-
-    const el = document.createElement('button');
-    el.classList.add('react-scan-extension-button', 'react-scan-default-font');
-    el.innerHTML = EXTENSION_ON_SVG;
-
-    el.onclick = async () => {
-      const isCSPRulesEnabled = await getCSPRulesState();
-      const toolbarContent = document.getElementById('react-scan-toolbar-content');
-
-      if (isCSPRulesEnabled) {
-        // send message to the extension to disable the rules
-        await chrome.runtime.sendMessage({
-          type: 'react-scan:csp-rules-changed',
-          data: {
-            enabled: false,
-            domain: window.location.origin,
-          },
-        });
-      } else {
-        // send message to the extension to enable the rules
-        await chrome.runtime.sendMessage({
-          type: 'react-scan:csp-rules-changed',
-          data: {
-            enabled: true,
-            domain: window.location.origin,
-          },
-        });
-
-        window.location.reload();
-      }
-
-      await new Promise((resolve) => {
-        if (toolbarContent) {
-          toolbarContent.style.opacity = isCSPRulesEnabled ? '0' : '1';
-          toolbarContent.style.pointerEvents = isCSPRulesEnabled ? 'none' : 'auto';
-        }
-
-        setTimeout(resolve, 400);
-      });
-    };
-
     const isCSPRulesEnabled = await getCSPRulesState();
     if (isCSPRulesEnabled) {
       setTimeout(() => {
         const toolbar = document.getElementById('react-scan-toolbar');
         if (toolbar) {
-          toolbar.appendChild(el);
+          // toolbar.appendChild(el);
           toolbar.style.opacity = '1';
         }
       }, 400);
-    } else {
-      document.documentElement.appendChild(el);
     }
   };
 })();