Jak działa activeTab w rozszerzeniu przeglądarki?

Uprawnienie permissions:["activeTab"] pozwala rozszerzeniu na tymczasowy dostęp do aktywnej karty w przeglądarce, gdy użytkownik wywoła rozszerzenie, na przykład klikając jego ikonę w przeglądarce.

Jak działa activeTab ?

1. Tymczasowy dostęp: Gdy użytkownik kliknie ikonę rozszerzenia, rozszerzenie otrzymuje tymczasowy dostęp do aktywnej karty. Ten dostęp trwa tylko tak długo, jak użytkownik pozostaje na tej stronie. Gdy użytkownik przejdzie na inną stronę lub zamknie kartę, dostęp zostaje cofnięty.

2. Możliwości: Dzięki uprawnieniu activeTab, rozszerzenie może:

   • Wykonywać skrypty na aktywnej karcie.
   • Uzyskiwać dostęp do właściwości karty, takich jak URL, tytuł strony, itp.
   • Modyfikować zawartość strony, np. dodawać lub usuwać elementy HTML.

3. Bezpieczeństwo: activeTab nie wymaga deklarowania pełnych uprawnień hosta w pliku manifestu rozszerzenia, co oznacza, że nie wywołuje ostrzeżeń o uprawnieniach podczas instalacji rozszerzenia. Dostęp jest przyznawany tylko w odpowiedzi na bezpośrednie działanie użytkownika.

Kiedy aktywujesz uprawnienia permissions:["activeTab"], masz kilka opcji do rozważenia w pliku manifestu dla rozszerzenia przeglądarki. 

Oprócz dodania, możesz skonfigurować inne elementy w zależności od funkcjonalności, którą chcesz osiągnąć. 

Oto kilka dodatkowych opcji:

1. Background Service Worker:

   "background": {
       "service_worker": "background.js"
   }
   

   Opis: Ten element uruchamia skrypt background.js w tle, który może wykonywać różne zadania, takie jak obsługa zdarzeń przeglądarki, komunikacja z innymi częściami rozszerzenia, czy zarządzanie danymi.

2. Browser Actions: Dodaje przycisk do paska narzędzi przeglądarki.

   "browser_action": {
       "default_popup": "popup.html",
       "default_icon": {
           "16": "icons/icon16.png",
           "48": "icons/icon48.png",
           "128": "icons/icon128.png"
       }
   }
   

   Opis: Dodaje przycisk do paska narzędzi przeglądarki. Po kliknięciu przycisku otwiera się okno popup.html, które może zawierać interfejs użytkownika dla Twojego rozszerzenia.

3. Content Scripts: Możesz dodać skrypty, które będą działać na stronach internetowych.

   "content_scripts": [
       {
           "matches": ["<all_urls>"],
           "js": ["content.js"]
       }
   ]
   

   Opis: Wstrzykuje skrypt content.js na strony internetowe, które pasują do wzorca matches. Skrypt ten może manipulować zawartością strony lub reagować na interakcje użytkownika.

4. Options Page: Strona z opcjami konfiguracji dla użytkownika.

   "options_page": "options.html"
   

   Opis: Dodaje stronę z opcjami konfiguracji dla użytkownika, dostępną z poziomu ustawień rozszerzenia. Strona options.html może zawierać formularze i inne elementy interfejsu do zarządzania ustawieniami.

5. Web Accessible Resources: Pliki, które mogą być dostępne z poziomu stron internetowych.

   "web_accessible_resources": [
       "images/*.png",
       "scripts/*.js"
   ]
   

   Opis: Określa zasoby, takie jak obrazy i skrypty, które mogą być dostępne z poziomu stron internetowych. Umożliwia to używanie tych zasobów w treści stron lub innych skryptach.

Przykład użycia

Załóżmy, że masz rozszerzenie, które zmienia tło aktywnej strony na czerwone po kliknięciu ikony rozszerzenia. W pliku manifestu deklarujesz uprawnienie activeTab :

{
  "name": "Change Background",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [
   {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
   }],
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },    
    "options_page": "options.html",
    "web_accessible_resources": [
        "images/*.png",
        "scripts/*.js"
    ]}

Możesz teraz utworzyć pliki  background.js i content.js w których możesz dodać kody, 

w pliku background.js możesz na przykład dodać kod, który zmienia tło strony:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'red';
    }
  });
});

a w pliku content.js  możesz dodać funkcję zmieniająca kolor tła strony :)

function changeBackgroundColor() {

    document.body.style.backgroundColor = "blue";

}

// Wywołanie funkcji po załadowaniu strony

window.addEventListener('load', changeBackgroundColor);

Mam nadzieję, że to wyjaśnienie jest pomocne! 

Czy masz jeszcze jakieś pytania dotyczące activeTab lub innych uprawnień w rozszerzeniach ?

Pomocne linki:

• Jakie uprawnienia manifestu rozszerzenia przeglądarki ? - blogspot
• Jak stworzyć rozszerzenie w przeglądarce ? - blogspot
• The activeTab permission - Google Chrome  
• Inject scripts into the active tab - Chrome Developers  
• The  activeTab  permission | Chrome Extensions | Chrome for Developers 
• chrome.tabs | API | Chrome for Developers

źródło