anjaysahoo / extension Goto Github PK

Service works run in background and are not visible to the user. It is same for web page as well

Below is the configuration we need to have for service worker in manifest.json

• Here action key is for chrome.action we used
• Since we want to run service worker in background we mention its path in background key
• For running script, we need scripting permission
• host_persmission help us define where can allow running our script. Here we're enabled to run everywhere

• Here inside action we declare our popup page
• Here in index.js document.getElementById('myButton') refer to index.html DOM

• Here in same index.js highlighted document.body refer to the page where it is currently running

Here it will be body of this example.com page

File used for simple extension

Start with normal Vite app creation through

npm create vite@latest

Place manifest.json file in public folder so that after build it is placed at the root of dist folder

npm run build

After this load the generated dist folder to the browser

That's it, now we can access our extension.

npm i -D @types/chrome

❌ This will not work as the highlighted function is running in context where the tab is currently on. Whereas colour variable is running in context of pop-up.

✅ This will work, as we are passing it through args: [colour]