diff --git a/src/common/types/scraper.ts b/src/common/types/scraper.ts index 7d7d0c9..77bd3ad 100644 --- a/src/common/types/scraper.ts +++ b/src/common/types/scraper.ts @@ -1,5 +1,5 @@ export enum ScraperCommand { - SCRAP + SCRAPE } export interface ScraperMessage { diff --git a/src/content/index.ts b/src/content/index.ts index 69779d6..53495f8 100644 --- a/src/content/index.ts +++ b/src/content/index.ts @@ -1,23 +1,25 @@ import {ChromeMessage, ChromeMessageType} from '../common/chrome-api-wrapper'; import {ScraperCommand, ScraperMessage} from '../common/types/scraper'; -async function handleScrapCommand() { +async function handleScrapeCommand() { const pageTitle = document.title; const message = new ChromeMessage(ChromeMessageType.SCRAPING_RESULTS, pageTitle); await chrome.runtime.sendMessage(chrome.runtime.id, message); } -console.log('Chrome plugin content script loaded'); chrome.runtime.onMessage.addListener((message: ChromeMessage) => { - if (message.type === undefined || message.type !== ChromeMessageType.SCRAPER_COMMAND) { + console.debug('Received message', message); + if (message.type !== ChromeMessageType.SCRAPER_COMMAND) { return false; } - if (message.payload.command === ScraperCommand.SCRAP) { - handleScrapCommand().catch((error) => console.error(error)); + if (message.payload.command === ScraperCommand.SCRAPE) { + handleScrapeCommand().catch((error) => console.error(error)); } return false; }); +console.debug('Chrome plugin content script loaded'); + export {}; diff --git a/src/popup/features/HomePage/HomePage.css b/src/popup/features/HomePage/HomePage.css index 0ccc188..a011c00 100644 --- a/src/popup/features/HomePage/HomePage.css +++ b/src/popup/features/HomePage/HomePage.css @@ -1,3 +1,3 @@ -.scrap-button { +.scrape-button { width: 300px; } diff --git a/src/popup/features/HomePage/HomePage.tsx b/src/popup/features/HomePage/HomePage.tsx index 36d2fa8..7bf5aa5 100644 --- a/src/popup/features/HomePage/HomePage.tsx +++ b/src/popup/features/HomePage/HomePage.tsx @@ -1,6 +1,6 @@ import './HomePage.css'; -import {Button, Stack} from '@mui/material'; +import {Alert, Button, Snackbar, Stack} from '@mui/material'; import Box from '@mui/material/Box'; import {ReactElement, useEffect, useState} from 'react'; @@ -17,16 +17,31 @@ const CACHE_KEY = 'scrapedPageTitle'; export default function HomePage(): ReactElement { const [scrapedPageTitle, setScrapedPageTitle] = useState(''); - const [disableScrapButton, setDisableScrapButton] = useState(false); + const [disableScrapeButton, setDisableScrapeButton] = useState(false); - async function scrap() { - setDisableScrapButton(true); + const [showErrorSnackbar, setShowErrorSnackbar] = useState(false); + const [errorSnackbarMessage, setErrorSnackbarMessage] = useState(''); + + function handleSnackbarClose() { + setShowErrorSnackbar(false); + } + + async function scrape() { + setDisableScrapeButton(true); const message: ChromeMessage = { type: ChromeMessageType.SCRAPER_COMMAND, - payload: {command: ScraperCommand.SCRAP} + payload: {command: ScraperCommand.SCRAPE} }; - await ChromeApiWrapper.sendTabMessage(message); + + try { + await ChromeApiWrapper.sendTabMessage(message); + } catch (e) { + console.error(e); + setErrorSnackbarMessage('Failed to scrape page title. Please check console logs.'); + setShowErrorSnackbar(true); + setDisableScrapeButton(false); + } } useEffect(() => { @@ -42,7 +57,7 @@ export default function HomePage(): ReactElement { chrome.storage.session.set({[CACHE_KEY]: message.payload}); setScrapedPageTitle(message.payload); - setDisableScrapButton(false); + setDisableScrapeButton(false); return false; }); }, []); @@ -56,18 +71,25 @@ export default function HomePage(): ReactElement {

My Chromium extension

-

Scraped title: {scrapedPageTitle}

+

+ Scraped title: {scrapedPageTitle} +

+ + + {errorSnackbarMessage} + + ); }