Jak stworzyć rozszerzenie w przeglądarce ?

Tworzenie rozszerzenia do przeglądarki, takiej jak Google Chrome czy Microsoft Edge, jest procesem, który można podzielić na kilka kroków. Oto podstawowa procedura:

1. Konfiguracja folderu rozszerzenia i pliku manifestu

1. Utwórz nowy folder na komputerze, w którym będziesz przechowywać wszystkie pliki związane z rozszerzeniem. Możesz nazwać go np. „MyFirstExtension”.

2. Dodaj plik manifest.json do tego folderu. Plik manifestu zawiera metadane dotyczące rozszerzenia, takie jak nazwa, wersja, opis oraz wymagane uprawnienia. Przykładowy kod dla pliku manifest.json wygląda tak:

   {
     "manifest_version": 3,
     "name": "My First Chrome Extension",
     "version": "1.0",
     "description": "A simple Chrome extension tutorial",
     "icons": {
       "48": "icon.png"
     },
     "permissions": ["tabs", "activeTab", "scripting"],
     "action": {
       "default_icon": "icon.png",
       "default_popup": "popup.html"
     },
     "background": {
       "service_worker": "background.js"
     },
     "content_scripts": [
       {
         "matches": ["https://*/*"],
         "js": ["content.js"]
       }
     ]
   }

1. permissions - Jakie uprawnienia dla manifestu rozszerzenia przeglądarki ?
2. action -
3. background -
4. content_scripts -

2. Tworzenie ikony i wyskakującego okienka

1. Utwórz ikonę dla swojego rozszerzenia. Może to być plik PNG o rozmiarze 48x48 pikseli, nazwany icon.png.

2. Stwórz plik HTML o nazwie popup.html, który będzie zawierał zawartość wyskakującego okienka. Przykładowy kod dla popup.html:

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>My First Extension</title>
     <style>
       body { font-family: Arial, sans-serif; margin: 10px; }
     </style>
   </head>
   <body>
     <h1>Hello, world!</h1>
     <p>This is a simple Chrome extension tutorial.</p>
     <button id="changeColor">Change background color</button>
     <script src="popup.js"></script>
   </body>
   </html>
   

3. Pisanie skryptów background.js i content.js

1. Utwórz plik background.js, który będzie zawierał logikę działania w tle. Przykładowy kod:

   chrome.action.onClicked.addListener((tab) => {
     chrome.scripting.executeScript({
       target: { tabId: tab.id },
       files: ['content.js']
     });
   });
   

2. Utwórz plik  content.js , który będzie zawierał skrypty działające na stronach internetowych. Przykładowy kod:

   document.body.style.backgroundColor = 'yellow';

4. Tworzenie pliku wykonawczego   popup.js

document.addEventListener('DOMContentLoaded', function() 

{ 

    let changeColorButton = document.getElementById('changeColor');

    changeColorButton.addEventListener('click', function() 

    { 

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) 

        { 

            chrome.scripting.executeScript( 

            { 

                target: 

                {

                    tabId: tabs[0].id

                }, 

                function: changeBackgroundColor 

            }); 

        }); 

        }); 

    function changeBackgroundColor() 

    { 

        if(document.body.style.backgroundColor === 'yellow') 

        { 

            document.body.style.backgroundColor = 'black'; 

        } 

       else 

        { 

            document.body.style.backgroundColor = 'yellow';

        } 

    } 

});

5. Testowanie rozszerzenia

1. Otwórz Chrome i przejdź do chrome://extensions.
2. Włącz tryb dewelopera w prawym górnym rogu.
3. Kliknij „Załaduj rozpakowane” i wybierz folder z rozszerzeniem.
4. Sprawdź działanie rozszerzenia klikając jego ikonę w przeglądarce¹².