feat(bounty): add empty state when it's a internal chrome page

src/App.tsx

@@ -5,14 +5,32 @@ import NoResults from './components/no-results';
 import Header from './components/header';
 import Preview from './components/preview';
 import LoadingSkeleton from './components/loading-skeleton';
+import { ExceptionMessage } from "./types";
+
+function isResponseIsAnException(response: ExceptionMessage) {
+  return response.code >= 0 && typeof response.message === 'string';
+}
 
 const App: FunctionalComponent = () => {
-  const [loading, setLoading] = useState(true);
+  const [isLoading, setLoading] = useState(true);
+  const [exceptionOnScrapperResult, setException] = useState("");
   const [results, setResults] = useState([]);
 
+  const hasExceptions = Boolean(exceptionOnScrapperResult);
+  const showLoading = !hasExceptions && isLoading;
+  const showResults = !showLoading && results.length > 0;
+  const noResults = !showLoading && (!hasExceptions && results.length === 0);
+
   useEffect(() => {
     chrome.runtime.sendMessage({ action: 'rows-x:scrap' }, (response) => {
-      setResults(response);
+      if (isResponseIsAnException(response)) {
+        setResults([]);
+        setException(response.message);
+      } else {
+        setResults(response);
+        setException("");
+      }
+
       setLoading(false);
     });
   }, []);
@@ -21,11 +39,10 @@ const App: FunctionalComponent = () => {
     <>
       <Header />
       <div className="container">
-        {loading ? (
-          <LoadingSkeleton />
-        ) : (
-          <>{results.length > 0 ? <Preview results={results} /> : <NoResults />}</>
-        )}
+        {showLoading && (<LoadingSkeleton />)}
+        {showResults &&  <Preview results={results} />}
+        {noResults && <NoResults />}
+        {hasExceptions && <NoResults message={exceptionOnScrapperResult} />}
       </div>
     </>
   );

src/background.ts

@@ -1,10 +1,21 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import {ERROR_MESSAGES, ErrorCodes} from "./error-codes";
 import { getCurrentTab, runScrapper } from './utils/chrome';
 import { getScrapperOptionsByUrl } from './utils/scrapperUtils';
 
 async function scrap() {
   const tab = await getCurrentTab();
-  if (!tab || !tab.url || !tab.title) return;
+
+  if (!tab || !tab.url || !tab.title) {
+    return;
+  }
+
+  if (tab.url.includes('chrome://')) {
+    return {
+      code: ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES,
+      message: ERROR_MESSAGES.get(ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES)
+    };
+  }
 
   const options = getScrapperOptionsByUrl(tab.url, tab.title);
 

src/components/no-results.tsx

@@ -3,7 +3,11 @@ import './no-results.css';
 import Button from './button';
 import { getCurrentTab } from '../utils/chrome';
 
-const NoResults = (): JSX.Element => {
+interface Props {
+  message?: string;
+}
+
+const NoResults = ({ message }: Props): JSX.Element => {
   const redirectToFeedback = async () => {
     const tab = await getCurrentTab();
     if (!tab || !tab.url) return;
@@ -25,7 +29,7 @@ const NoResults = (): JSX.Element => {
       <div className="no-results">
         <img src="/empty.svg" />
         <strong>No results</strong>
-        <span>Would you like RowsX to support this website?</span>
+        <span>{message ?? 'Would you like RowsX to support this website?'}</span>
         <div className="btn-container">
           <Button type="primary" onClick={redirectToFeedback}>
             Talk to us

src/error-codes.ts

@@ -0,0 +1,10 @@
+export enum ErrorCodes {
+    GOOGLE_CHROME_INTERNAL_PAGES
+  }
+
+  export const ERROR_MESSAGES = new Map<ErrorCodes, string>(
+    [
+      [ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES, "Open a page with a table, then try again!"]
+    ]
+  );
+

src/types.ts

@@ -0,0 +1,6 @@
+import { ErrorCodes } from "./error-codes";
+
+export type ExceptionMessage = {
+  code: ErrorCodes;
+  message: string;
+}