google-chrome-extension Samouczek
Pierwsze kroki z rozszerzeniem google-chrome

Uwagi

Bezwzględny minimalny przykład

Każde rozszerzenie Chrome zaczyna się jako rozpakowane rozszerzenie : folder zawierający pliki rozszerzenia.

Jeden plik, który musi zawierać, to manifest.json , który opisuje podstawowe właściwości rozszerzenia. Wiele właściwości w tym pliku jest opcjonalnych, ale oto absolutny minimalny plik manifest.json :

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Utwórz gdzieś folder (na przykład myExtension ), dodaj do niego manifest.json jak myExtension powyżej.

Następnie musisz załadować rozszerzenie w Chrome.

1. Otwórz stronę chrome://extensions/ page, dostępną w Menu> Więcej narzędzi> Rozszerzenia .
2. Włącz tryb programisty z polem wyboru w prawym górnym rogu, jeśli nie jest jeszcze włączony.
3. Kliknij przycisk Załaduj rozpakowane rozszerzenie ... i wybierz utworzony folder myExtension .

Otóż to! Twoje pierwsze rozszerzenie jest ładowane przez Chrome:

Oczywiście jeszcze nic nie robi, więc jest to dobry moment, aby przeczytać przegląd architektury rozszerzeń, aby rozpocząć dodawanie potrzebnych części.

Ważne: po wprowadzeniu jakichkolwiek zmian w rozszerzeniu nie zapomnij wrócić do chrome://extensions/ i naciśnij link Załaduj ponownie swoje rozszerzenie po dokonaniu zmian. W przypadku skryptów treści przeładuj także stronę docelową.

Strona w tle

Strony w tle to niejawne strony zawierające skrypty w tle. Skrypt w tle to pojedynczy długo działający skrypt do zarządzania jakimś zadaniem lub stanem. Istnieje przez cały okres istnienia twojego rozszerzenia i tylko jedna jego instancja na raz jest aktywna.

Możesz to zadeklarować w następujący sposób w pliku manifest.json :

"background": {
    "scripts": ["background.js"]
}

Strona w tle zostanie wygenerowana przez system rozszerzeń, który zawiera każdy z plików wymienionych we właściwości scripts.

Masz dostęp do wszystkich dozwolonych interfejsów API chrome.* .

Istnieją dwa rodzaje stron w tle: trwałe strony w tle, które są zawsze otwarte, oraz strony zdarzeń, które są otwierane i zamykane w razie potrzeby.

Jeśli chcesz, aby strona działająca w tle była nietrwała, po prostu ustaw persistent -flag na false:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

Ten skrypt w tle jest aktywny tylko wtedy, gdy zostanie uruchomione zdarzenie, w którym zarejestrowany jest detektor. Zasadniczo do rejestracji używasz addListener .

Przykład: aplikacja lub rozszerzenie jest najpierw instalowane.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

Skrypty treści

Skrypt treści to kod rozszerzenia, który działa obok zwykłej strony.

Mają pełny dostęp do DOM strony internetowej (i w rzeczywistości są jedyną częścią rozszerzenia, która może uzyskać dostęp do DOM strony ), ale kod JavaScript jest izolowany, koncepcja zwana Odosobnionym Światem . Każde rozszerzenie ma własny kontekst skryptu treści JavaScript niewidoczny dla innych i strony, co zapobiega konfliktom kodów.

Przykładowa definicja w manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

Atrybuty mają następujące znaczenie:

Skrypty zawartości można również wstrzykiwać na żądanie za pomocą chrome.tabs.executeScript , który nazywa się Programmatic Injection .

Zobacz też

• Oficjalna dokumentacja: skrypty treści
• Dokumentacja przepełnienia stosu: skrypty zawartości

Strona opcji

Strony opcji są używane, aby dać użytkownikowi możliwość utrzymania ustawień dla twojego rozszerzenia.

Wersja 2

Od Chrome 40 istnieje możliwość ustawienia strony opcji jako predefiniowanego dialogu w rozszerzeniach chrome: // .

Sposób zdefiniowania strony opcji w pliku manifest.json jest następujący:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

Ta strona opcji będzie się zachowywać jak dialog, otworzy się jako wyskakujące okienko, w którym będą wyświetlane opcje.html . chrome_style zastosuje arkusz stylów Chrome ze względu na spójność stylu na stronie opcji.

Opcje zostaną automatycznie ujawnione za pomocą menu kontekstowego przycisku rozszerzenia lub strony chrome: // extensions .

Możesz także otworzyć stronę opcji programowo , na przykład z wyskakującego interfejsu użytkownika:

chrome.runtime.openOptionsPage();

Wersja 1 ( przestarzała )

Przykładowa definicja w manifest.json :

"options_page": "options.html"

Zaleca się używanie wersji 2, ponieważ zachowanie options_ui zostanie wkrótce zastosowane na stronach opcji w wersji 1.

Przechowywanie

Zwykle ustawienia muszą zostać zachowane, dlatego zaleca się korzystanie z chrome.storage API. Uprawnienia można zadeklarować w następujący sposób w manifest.json :

"permissions": [
   "storage"
]

Oficjalna dokumentacja

• Strona opcji - wersja 1
• Strona opcji - wersja 2
• Storage API

Utwórz nową kartę

W kodzie rozszerzenia możesz użyć dowolnego chrome.* API, jeśli zdekodowałeś wymagane uprawnienia. Ponadto niektóre API działają tylko ze stron w tle, a niektóre API tylko ze skryptów treści.

Możesz użyć większości metod chrome.tabs deklarujących wszelkie uprawnienia. Teraz skupiamy się na chrome.tabs.create

_{Uwaga: Nowa karta zostanie otwarta bez ostrzeżenia popup .}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

Możesz dowiedzieć się więcej o obiekcie tab, w oficjalnym deweloperze chrome