add separate css file

websupport-sk · Aug 14, 2023 · 65e8070 · 65e8070
1 parent f425701
commit 65e8070
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/src/assets/styles_of_beyond.css b/src/assets/styles_of_beyond.css
@@ -0,0 +1,7 @@
+h1 {
+  color: #b63733; !important;
+}
+
+.bd-title {
+  color: #6fa79e; !important;
+}
diff --git a/src/background.ts b/src/background.ts
@@ -16,6 +16,8 @@ import updateInterval from './consts/updateInterval';
     fetchAndStoreDomains();
   });
 
+  let theTabId;
+
   chrome.tabs.onUpdated.addListener( async (
     tabId: number,
     changeInfo: chrome.tabs.TabChangeInfo,
@@ -25,6 +27,8 @@ import updateInterval from './consts/updateInterval';
       return;
     }
 
+    theTabId = tabId;
+
     const url: URL = new URL(tab.url);
     const hostname: string = url.hostname;
 
@@ -34,6 +38,9 @@ import updateInterval from './consts/updateInterval';
       }
 
       const domainDetail = await getDomainDetail(hostname);
+
+      await insertCss(tabId);
+
       await chrome.scripting.executeScript({
         target: { tabId },
         func: showWarning,
@@ -62,6 +69,9 @@ import updateInterval from './consts/updateInterval';
       case 'updateDatabaseRequest':
         updateDatabase(sendResponse);
         break;
+      case 'closeWarningNotice':
+        removeCss(theTabId);
+        break;
       }
 
       return true;
@@ -91,3 +101,16 @@ const sendFormattedDatabaseUpdateDateTimes = async (sendResponse: (response: For
   } as FormattedDatabaseUpdateDateTimesResponse);
 };
 
+const insertCss = async (tabId: number) => {
+  await chrome.scripting.insertCSS({
+    files: ['src/assets/styles_of_beyond.css'],
+    target: { tabId }
+  });
+};
+
+const removeCss = async (tabId: number) => {
+  await chrome.scripting.removeCSS({
+    files: ['src/assets/styles_of_beyond.css'],
+    target: { tabId }
+  });
+};
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
@@ -12,7 +12,12 @@ export interface DomainDetail {
 }
 
 export interface Message {
-  messageType: 'hideRequest' | 'deleteHideSettingsRequest' | 'getLastDatabaseUpdateRequest' | 'updateDatabaseRequest';
+  messageType:
+    'hideRequest' |
+    'deleteHideSettingsRequest' |
+    'getLastDatabaseUpdateRequest' |
+    'updateDatabaseRequest' |
+    'closeWarningNotice';
 }
 
 export interface HideRequest extends Message {

diff --git a/src/utils/show_warning.ts b/src/utils/show_warning.ts
@@ -19,7 +19,7 @@ export const showWarning = (domainDetail: DomainDetail, hostname = '') => {
         >
       </div>
       <div style='float: left; padding-left: 60px;'>
-        <div style='color: #ffffff; text-align: left; text-transform: uppercase; padding-top: 65px; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500;line-height: 31px; letter-spacing: 1px;'>
+        <div style='color: #ffffff; text-align: left; text-transform: uppercase; padding-top: 65px; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500;line-height: 31px; letter-spacing: 1px;' class="bd-title">
           Zvýšte opatrnosť!<br/>
           Táto stránka je zaradená v zozname<br>
           nedôveryhodných webov so skóre <span style="color: #DA5653">${domainDetail.score}</span>.<br/>
@@ -54,8 +54,12 @@ export const showWarning = (domainDetail: DomainDetail, hostname = '') => {
 
   document.body.innerHTML = content + document.body.innerHTML;
 
-  function closeWarning() {
+  async function closeWarning() {
     document.getElementById(bullshit_detector).remove();
+
+    await chrome.runtime.sendMessage({
+      messageType: 'closeWarningNotice'
+    });
   }
 
   // close notification
@@ -85,7 +89,7 @@ export const showWarning = (domainDetail: DomainDetail, hostname = '') => {
       hiddenResource,
     } as HideRequest);
 
-    closeWarning();
+    await closeWarning();
   });
 };