Jak utworzyć rozszerzenie SEO Chrome za pomocą ChatGPT

Rozszerzenia Chrome zapewniają szybki i łatwy sposób wykonywania nudnych i powtarzalnych zadań. Rozszerzenia mogą być ogromną oszczędnością czasu w SEO. Ale wielu wciąż nie koncentruje się na ich budowaniu.

Jednym z powodów jest to, że niektórzy marketerzy nie są w stanie zaprogramować złożonych narzędzi, więc używają dowolnego dostępnego narzędzia. To powiedziawszy, nie zawsze musisz inwestować swój czas w naukę trudnych umiejętności lub wydawać pieniądze na drogiego programistę, aby zbudować nowe złożone narzędzie.

Teraz możesz używać ChatGPT do tworzenia własnych niestandardowych rozszerzeń SEO, przesyłać je do Google i używać codziennie za darmo. Oto jak.

Krok 1: Zdefiniuj wymagania

Pierwszym krokiem w tym procesie jest jasne zrozumienie, do czego ma służyć rozszerzenie Chrome. Radziłbym marketerom treści, aby zastanowili się nad tym, zanim zaczną podpowiadać ChatGPT i spisać konkretne i jasne wymagania.

Wymagania są zazwyczaj dwojakiego rodzaju:

• Zadanie : Do czego potrzebujesz rozszerzenia?
• Funkcja : w jaki sposób chcesz, aby Twoje rozszerzenie przedstawiało Ci informacje?

Zastrzeżenie : ten proces ma na celu stworzenie rozszerzenia działającego tylko na Twoim komputerze, co oznacza, że ​​nie będziesz mógł go sprzedać ani udostępnić w Chrome Web Store. Aby tak się stało, musisz przestrzegać wytycznych Google, które można znaleźć tutaj.

W tym przewodniku użyjemy przykładu prostego rozszerzenia SEO Chrome, które sam zbudowałem. Więc oto moje wymagania.

Wymagania informacyjne

Chcę, aby moje rozszerzenie SEO do Chrome zawierało informacje o wszystkich elementach strony w celu szybkiego przeglądu strony bez konieczności wchodzenia do kodu zaplecza strony w celu ich sprawdzenia:

• Tytuł strony
• Metaopis
• Kopiuj nagłówki
• Linki wewnętrzne, w tym lista adresów URL
• Obrazy, w tym adresy URL
• Kanoniczny adres URL

Wymagania dotyczące funkcji i zachowania

Chcę, aby moje rozszerzenie wyświetlało wyskakujące okienko po kliknięciu ikony rozszerzenia w przeglądarce Chrome.

Poniżej możesz zobaczyć, co zbudujemy i jak będzie się wyświetlać w Chrome.

Uwaga: jest to podstawowa wersja rozszerzenia, która dla uproszczenia nie zawiera stylów CSS. W tym przewodniku skupiamy się na rzeczywistej funkcjonalności, a nie na stylu.

Jak widać na powyższym obrazku, musisz upewnić się, że wyniki rozszerzeń będą widoczne na karcie Chrome jako wyskakujące okienko.

Większość rozszerzeń SEO działa w ten sposób, dostarczając potrzebnych informacji w wyskakującym okienku po kliknięciu ikony rozszerzenia.

Krok 2: Napisz szczegółowy opis ChatGPT

Teraz, gdy jesteś gotowy na monitowanie o potencjalne rozszerzenie SEO, możesz udać się do ChatGPT, aby napisać szczegółowe instrukcje. Ponownie, Twój monit musi być tak konkretny i szczegółowy, jak to tylko możliwe.

Większość monitów, z których korzystają marketerzy, nie jest długa, są one bardzo krótkie. A z krótkich monitów uzyskasz słabe wyniki.

Oto jak możesz to zrobić:

Najpierw musisz wyznaczyć ChatGPT pewne cele. Aby to zrobić, oprócz wiersza poleceń możesz użyć tego samego wymagania, które widzieliśmy w kroku 1:

• „Napisz mi kod rozszerzenia Chrome, które pomoże mi zidentyfikować elementy SEO na dowolnej stronie internetowej. Elementy do identyfikacji: H1, H2, H3, tytuł strony, metaopis, kanoniczny adres URL, numer H1 i H2 oraz liczba linków wewnętrznych (w tym adresów URL).”

Teraz, gdy wyznaczyłeś ChatGPT cele, które chcesz osiągnąć, nadszedł czas, aby dokładnie określić, jak ma zachowywać się Twoje rozszerzenie. W tym celu użyjemy funkcji wyskakującego okienka z przyciskami. Oto jak możesz wykonać tę część:

• „Funkcja rozszerzenia Chrome: po kliknięciu rozszerzenia pojawi się okno. Okno zawiera menu, które można kliknąć. W menu pokazujesz mi trzy przyciski. Pierwszy przycisk pokazuje mi instrukcje dotyczące korzystania z rozszerzenia. W drugim przycisku widzę H1, H2, H3, tytuł strony, metaopis i kanoniczny adres URL. W trzecim przycisku widzę liczbę H1 i H2, liczbę linków wewnętrznych (w tym adresów URL).”

Musimy bardzo dokładnie określić, co chcemy osiągnąć. Aby to zrobić, musisz dodać ostatni akapit monitu, określając, jak należy przesłać monit.

• „Daj mi każdy plik osobno i z ich nazwami”.

W ten sposób prosisz ChatGPT o podzielenie plików na części. Jest to ważne ze względu na krok 4. Więc trzymaj się.

Krok 3: Poproś ChatGPT o napisanie kodu

Wreszcie nadszedł czas, aby wziąć wszystkie zdania, które napisaliśmy, skopiować je i wkleić do ChatGPT:

Jedną z najlepszych funkcjonalności ChatGPT jest możliwość pisania kodu bez żadnych problemów.

Dlatego, zgodnie z naszymi instrukcjami, ChatGPT dostarczy Ci cztery oddzielne kody.

Uwaga : kiedy tworzysz nowe rozszerzenie do Chrome, zwykle musisz podać kilka typów plików, w zależności od stopnia złożoności. W tym przykładzie potrzebujemy tylko czterech typów plików do przesłania na konto Chrome:

• Manifest.json
• Popup.html
• Popup.js
• Zawartość.js

Korzystanie z ChatGPT oznacza, że ​​marketerzy nie muszą uczyć się, jak tworzyć te pliki techniczne, i to jest cały sens tego przewodnika, ale nadal ważne jest, aby wiedzieć, do czego służą.

Ponadto polecam ekspertom ds. marketingu cyfrowego dowiedzieć się jak najwięcej o tych plikach, ponieważ jest to konieczne, aby rozwiązać ewentualne problemy techniczne i dowiedzieć się, jak poprawić działanie ich rozszerzeń. Jeśli chcesz dowiedzieć się więcej, Google ma specjalny przewodnik na temat działań w przeglądarce Chrome.

Manifest.json

Plik manifest.json to plik konfiguracyjny wymagany dla każdego rozszerzenia Chrome.

Zawiera metadane dotyczące rozszerzenia, takie jak jego nazwa, wersja, opis, ikony i uprawnienia. Określa również domyślny plik wyskakujący, który ma być wyświetlany po kliknięciu rozszerzenia.

Popup.html

Plik popup.html reprezentuje interfejs użytkownika (UI) rozszerzenia Chrome. Określa układ i zawartość, która zostanie wyświetlona po kliknięciu ikony rozszerzenia.

W tym przypadku zawiera przyciski do instrukcji, elementy SEO i statystyki, a także sekcję wyników do wyświetlenia zebranych informacji.

Wyskakujące okienko JS

Plik popup.js zawiera kod JavaScript, który współdziała z interfejsem użytkownika rozszerzenia Chrome.

Obsługuje kliknięcia przycisków i wysyła komunikaty do skryptu treści (nie zawartego w dostarczonym kodzie) w celu pobrania elementów SEO z aktualnie aktywnej strony internetowej.

Aktualizuje również interfejs użytkownika, aby wyświetlać pobrane informacje w sekcji wyników po kliknięciu odpowiednich przycisków.

Zawartość.js

Plik content.js jest odpowiedzialny za interakcję z zawartością strony internetowej i wydobywanie niezbędnych danych.

W tym przypadku nasłuchuje wiadomości z wyskakującego okienka i wykonuje zadania.

Otrzymuj codzienny biuletyn wyszukiwania, na którym polegają marketerzy.

Przetwarzanie ... Proszę czekać.

SUBSKRYBUJ

Zobacz warunki.

Krok 4: Wyeksportuj kody ChatGPT do plików

Teraz, gdy mamy już kody i trzy typy plików, następnym krokiem jest pobranie informacji o tych plikach do przystępnego formatu dla rozszerzenia Chrome.

Oto jak możesz to zrobić:

Pobierz aplikację Sublime Text

Sublime Text to udostępniany edytor, który natywnie obsługuje wszystkie języki programowania i języki znaczników. Użytkownicy mogą pobierać pliki i przesyłać je gdzie indziej.

Skopiuj i wklej kody

Teraz, gdy mamy kody i Sublime Text, musimy skopiować kody z ChatGPT i wkleić je na wymaganych kartach Sublime Text, zanim będziemy mogli pobrać je na nasze komputery.

W każdej osobnej zakładce wkleimy kody:

Po naciśnięciu "Wklej" czasami pojawi się zakładka bez tytułu, która wygląda tak;

Warto wspomnieć, że w przykładach kodu, których używam w tym przewodniku, aplikacja Sublime Text nie pobiera tytułów automatycznie, więc będziesz musiał je dodać ręcznie.

Podczas zapisywania plików na pulpicie będziesz mieć możliwość zmiany ich nazw. Nie wpłynie to jednak na Twoje rozszerzenie.

Możesz zapisać wszystkie pliki w określonym folderze, który możesz nazwać „Moje rozszerzenie SEO” lub coś w tym stylu.

Krok 5: Prześlij pliki na konto rozszerzenia Chrome

Teraz, gdy zakończyliśmy najtrudniejszą część tego przewodnika, napisanie kodu, nadszedł czas, aby przesłać pliki na swoje konto.

Aby to zrobić, musisz otworzyć panel rozszerzeń Chrome tutaj: chrome://extensions/

Po wejściu do środka wykonaj następujące kroki, aby poprawnie przesłać pliki:

• Włącz „Tryb programisty” w prawym górnym rogu przeglądarki. Umożliwi to otwarcie funkcji przesyłania.

• Kliknij „Załaduj rozpakowane”, aby znaleźć i wybrać 4 pliki do przesłania.

Po naciśnięciu „Załaduj rozpakowane” to okno otworzy się, jeśli korzystasz z komputera Mac.

Prześlij wszystkie cztery pliki do pulpitu rozszerzeń Chrome. Jeśli zrobiłeś wszystko poprawnie, zobaczysz swoje rozszerzenie na liście w następujący sposób:

W tym momencie Twoje rozszerzenie jest prawie gotowe do przetestowania.

Zbudowaliśmy rozszerzenie za pomocą trzech przycisków:

• Przycisk instrukcji, aby dowiedzieć się, jak go używać.
• Przycisk elementów SEO na stronie.
• Przycisk Łącza.

Każdy kliknięty przycisk daje możliwość przeczytania informacji na stronie i dokonania szybkiej oceny, czy strona jest poprawnie zoptymalizowana pod kątem wyszukiwania.

Krok 6: Rozwiązywanie problemów i czyszczenie kodu

Nie martw się, jeśli zauważysz błędy w swoim rozszerzeniu Chrome, są one nieuniknione, ale łatwe do naprawienia.

W obecnej wersji ChatGPT kod odnosi się do wytycznych Google sprzed grudnia 2021 r. i od tego czasu wiele się zmieniło.

Wycofana wersja manifestu

Oznacza to, że kod może być stary i nie zaktualizowany do najnowszej wersji wymagań rozszerzenia Chrome dla Twojego pliku manifestu.

Jeden z tych błędów pokazuje, że plik Manifest.json jest przestarzały, co oznacza, że ​​Google chce, abyś aktualizował go od stycznia 2023 r.

Jest bardzo prawdopodobne, że napotkasz błąd tego typu:

Aby rozwiązać ten problem, wystarczy wybrać „manifest_version”: 2 w pliku Sublime Text i zastąpić „2” numerem „3”, który jest najnowszą wersją.

Po zakończeniu ponownie prześlij rozszerzenie.

Nie udało się załadować rozszerzenia

Bardzo ważne jest usunięcie wszelkich odniesień do ikon i obrazów.

W przeciwnym razie pojawi się komunikat o błędzie „nie udało się załadować rozszerzenia”. Dzieje się tak, ponieważ nie określiliśmy adresu URL ikon i obrazów rozszerzeń.

Ale w tym przykładzie nie musimy dodawać żadnych obrazów ani ikon, więc sensowne jest usunięcie tej części kodu, która tego wymaga.

Oto jak możesz to zrobić:

• Otwórz plik Manifest.json.
• Znajdź wiersze kodu odnoszące się do ikon. W moim przykładzie linie to od 6 do 10 i od 16 do 20

• Usuń te linie z kodu i zapisz plik.
• Następnie prześlij go ponownie do pulpitu nawigacyjnego.

Tym razem bez błędów ChatGPT powinniśmy mieć czyste i poprawne rozszerzenie gotowe do ponownego przetestowania.

Jeśli zrobiłeś wszystko dobrze, powinieneś zobaczyć to – lub coś bardzo podobnego:

Zacznij tworzyć własne rozszerzenia SEO Chrome

Jeśli raz za razem ponosisz porażkę, sytuacja może stać się dość frustrująca, zwłaszcza jeśli nie wiesz, jak kodować. Wiem, bo tam byłem.

Pamiętaj też, że w przypadku sztucznej inteligencji nie ma konkretnych zasad pisania odpowiednich opisów tego, czego potrzebujesz. Może być konieczne kilkukrotne zaktualizowanie monitu, aby działał tak, jak tego potrzebujesz.

Oto, co możesz zrobić, aby złagodzić błędy i spróbować je naprawić:

• Skopiuj błąd i wklej go bezpośrednio do ChatGPT, prosząc o naprawę. Zwykle narzędzie jest naprawdę dobre w wyjaśnianiu, co jest nie tak z kodem w prosty sposób. Następnie wprowadź zalecane ulepszenia.
• Spróbuj usunąć niektóre wymagania dotyczące rozszerzeń, jeśli uważasz, że Twój kod jest po prostu zbyt długi i skomplikowany. Zacznij od małego. Może stwórz tylko rozszerzenie do wyszukiwania tytułu strony. Po pomyślnym przetestowaniu dodaj nowe wymagania i przetestuj ponownie.
• Jeśli ChatGPT nie zapewnia dobrego rozwiązania, skorzystaj ze starego, dobrego Google. Jest szansa, że ​​wiele osób już to rozwiązało.

Mamy nadzieję, że dzięki temu szczegółowemu przewodnikowi możesz zacząć wykorzystywać moc ChatGPT i dowiedzieć się, jak zbudować kolejne rozszerzenie SEO.