Tworzenie niestandardowej strony głównej Chrome z aktualizacjami pogody, kanałami RSS i funkcją zarządzania zadaniami

Domyślna strona nowej karty w Chrome spełnia swoje zadanie, ale brakuje jej estetyki i spersonalizowanych funkcji. Użytkownicy, którzy chcą ulepszyć swoje doświadczenia online, mogą znacznie poprawić funkcjonalność, personalizując stronę główną.

W czasach, gdy wiele nowoczesnych przeglądarek rezygnuje z tradycyjnych stron nowej karty, zapoznałem się z możliwościami personalizacji Chrome’a. Stworzenie spersonalizowanej strony głównej, zawierającej takie elementy jak prognoza pogody, kanały RSS i lista zadań, okazało się prostym, ale satysfakcjonującym przedsięwzięciem.

Dlaczego warto stworzyć własną stronę główną?

Rozszerzenia są pomocne, ale panele osobiste błyszczą

Chociaż wbudowana w Chrome strona nowej karty oferuje minimalistyczny interfejs z dostępem do ostatnio używanych kart i zakładek, często nie spełnia ona oczekiwań użytkowników poszukujących kompleksowych informacji. Dla tych, którzy oczekują większej funkcjonalności, poleganie wyłącznie na ofercie Chrome może być frustrujące.

Niestandardowa, pełnoekranowa strona główna w przeglądarce Google Chrome. — Yadullah Abidi / MakeUseOf

Dla mnie strona nowej karty to niezwykle ważny, osobisty panel, który wyświetla najważniejsze informacje przy każdym uruchomieniu przeglądarki. Chociaż liczne rozszerzenia – takie jak Tab Widgets, start.me i Momentum – oferują funkcje panelu, często ograniczają one możliwości personalizacji. Tworząc unikalną stronę główną, zyskujesz pełną kontrolę nad jej zawartością i wyglądem, jednocześnie rozwijając swoje umiejętności w zakresie HTML, CSS i JavaScript.

Tworzenie strony niestandardowej

Do odnowienia przeglądarki Chrome wystarczą cztery pliki

Nie potrzebujesz skomplikowanych narzędzi programistycznych, aby stworzyć własną stronę główną. Składa się ona głównie z pliku HTML uzupełnionego o kod CSS do projektowania i kod JavaScript do interaktywności. Zacznij od utworzenia katalogu zawierającego następujące pliki:

index.html: Podstawa układu Twojej strony głównej.
style.css: Zarządza stylem, czcionkami i kolorami strony.
main.js: Wprowadza interaktywne funkcje i skrypty.
manifest.json: Plik konfiguracyjny informujący przeglądarkę Chrome o przeznaczeniu rozszerzenia.

Ten projekt to w zasadzie statyczna strona internetowa. Plik index.html przedstawia układ z pogodą na górze, widocznym zegarem cyfrowym pośrodku, a także sekcjami poświęconymi cytatom motywacyjnym, kanałom RSS i liście zadań na dole. Plik manifest.json jest kluczowy – przekształca tę stronę w rozszerzenie Chrome, umożliwiając jej zastąpienie domyślnej strony nowej karty jedną linijką kodu:

"chrome_url_overrides": { "newtab": "index.html"}

Aby wyświetlić aktualne warunki pogodowe w Nowym Delhi, wykorzystałem API OpenWeather. Skrypt pobiera najnowsze dane pogodowe, w tym temperaturę i zmiany ikon na podstawie aktualnych warunków, i odświeża je przy każdym przeładowaniu strony.

Dodatkowo, zintegrowałem duży zegar, aby zwiększyć użyteczność strony, ponieważ często zostawiam przeglądarkę otwartą na nowej karcie. Zegar aktualizuje się za pomocą setInterval(), wyświetlając aktualny czas w rozpoznawalnym formacie AM/PM, dodając dynamiczny element do układu.

W przypadku kanału RSS automatycznie dodałem kanał MakeUseOf, dając użytkownikom swobodę dodawania kolejnych. Stworzenie funkcji do analizy kanału RSS okazało się nie lada wyzwaniem, ale asystent programisty pomógł mi sprawnie napisać funkcję wyodrębniającą informacje o artykułach.

const DEFAULT_FEEDS = ['https://www.makeuseof.com/feed/'];fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(DEFAULT_FEEDS[0])}`).then(res => res.json()).then(data => parseRSS(data.contents));

Ta konfiguracja wyświetla klikalne nagłówki z towarzyszącymi im miniaturami, nazwiskami autorów, fragmentami i datami publikacji. W przypadku problemów z ładowaniem kanału z powodu treści lub przeszkód w CORS (Cross-Origin Resource Sharing), zapasowy serwer proxy zapewnia spójną wydajność.

Ostatnim elementem jest lista zadań, wykorzystująca funkcję synchronizacji pamięci Chrome. Oznacza to, że Twoje zadania pozostają dostępne na wszystkich urządzeniach powiązanych z Twoim kontem Google. Prostota tej funkcji gwarantuje, że zadania są stale zapisywane między sesjami przeglądania.

const storageSet = async (key, value) => { if (window.chrome?.storage?.sync) { return new Promise(res => chrome.storage.sync.set({ [key]: value }, res)); } localStorage.setItem(key, JSON.stringify(value));};

Możesz łatwo dodawać zadania, które są wyświetlane w formie listy i zapisywane automatycznie. Dostępne są również opcje czyszczenia ukończonych zadań oraz przełączania między zadaniami aktywnymi i ukończonymi. Aby skorzystać z mojej struktury, zajrzyj do oficjalnego repozytorium GitHub, gdzie znajdziesz pełny kod i wskazówki.

Zwiększanie atrakcyjności wizualnej

Estetyka ma znaczenie dla kokpitów

Choć funkcjonalność jest najważniejsza, prezentacja ma kluczowe znaczenie dla zapewnienia użytkownikowi przyjemnych wrażeń. Atrakcyjna strona główna powinna nie tylko zawierać przyjemne kolory, ale także charakteryzować się zrównoważonym designem. Wybrałem Bootstrapa ze względu na jego responsywność i ikony, które pozwalają stworzyć przejrzysty i atrakcyjny wizualnie interfejs.

Niestandardowa strona główna dla Google Chrome — Zrzut ekranu autorstwa Yadullah Abidi | Nie jest wymagane podanie źródła.

Wybrałem ciemną i subtelną paletę barw, aby zapewnić komfortowe wrażenia wizualne, zwłaszcza w warunkach słabego oświetlenia. Wprowadzenie delikatnego pionowego gradientu i rozmytej winiety za pomocą CSS dodaje stronie głębi i kontrastu.

body { background-image: linear-gradient(180deg, #040607 0%, #071017 100%); color: #eef6f8; overflow: hidden;}.card { border-radius: 1rem; background: rgba(255, 255, 255, 0.1);}

Efektem końcowym jest elegancki, nierozpraszający uwagi interfejs, który harmonijnie integruje się z oryginalnym designem przeglądarki Chrome. Kluczowe jest minimalizowanie nadmiernego zużycia zasobów przy jednoczesnym zachowaniu znajomej stylistyki.

Dodawanie własnej strony głównej do przeglądarki Chrome

Wdrażanie niestandardowych rozszerzeń

Po zakończeniu kodowania załaduj swoją niestandardową stronę główną do przeglądarki Chrome jako rozszerzenie, wykonując następujące kroki:

Przejdź do chrome://extensions i aktywuj przełącznik trybu programisty w prawym górnym rogu.
Kliknij przycisk Załaduj rozpakowane.
Znajdź folder zawierający pliki Twojej strony głównej i kliknij Wybierz folder.

To wszystko! Twoja niestandardowa strona główna będzie teraz dostępna jako rozszerzenie w Chrome. Wszelkie modyfikacje wprowadzone w plikach w folderze rozszerzenia zostaną automatycznie uwzględnione w Chrome po odświeżeniu strony.

W zależności od uprawnień wymaganych przez kod, rozszerzenie może poprosić o nie przy pierwszym uruchomieniu lub później, za pośrednictwem strony chrome://extensions. To rozszerzenie jest również kompatybilne z innymi przeglądarkami opartymi na Chromium, takimi jak Edge, Brave, Opera, Vivaldi i innymi, bez konieczności wprowadzania żadnych zmian.

Odśwież wygląd swojej przeglądarki

Strona główna dostosowana do Twoich preferencji

Teraz za każdym razem, gdy otwieram nową kartę, wita mnie krótki przegląd daty, warunków pogodowych, nagłówków wiadomości i bieżących zadań — wszystko przedstawione w zaprojektowanym przeze mnie układzie, wolnym od rozpraszających elementów.

Stworzenie własnej, spersonalizowanej strony głównej Chrome jest łatwiejsze, niż mogłoby się wydawać. Jeśli znasz podstawy HTML, CSS i JavaScript, ten projekt to doskonały sposób na doskonalenie umiejętności i stworzenie praktycznego narzędzia. Nawet dla początkujących stanowi solidny punkt wyjścia.

Kilka linijek kodu HTML, CSS i JavaScript, w połączeniu z odrobiną wysiłku, może z łatwością zastąpić wiele uciążliwych rozszerzeń, ostatecznie dostarczając rozwiązanie idealnie dopasowane do Twoich codziennych czynności. Biorąc pod uwagę czas spędzany codziennie w przeglądarce, poświęcenie kilku dodatkowych godzin na jej unikalne dostosowanie zdecydowanie się opłaca.

Źródło i obrazy