మ్యానిఫెస్ట్ V3 మరియు జావాస్క్రిప్ట్ APIలను ఉపయోగించి బ్రౌజర్ ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్‌పై లోతైన పరిశీలన. ఆధునిక బ్రౌజర్‌ల కోసం శక్తివంతమైన మరియు సురక్షితమైన ఎక్స్‌టెన్షన్‌లను నిర్మించడం గురించి తెలుసుకోండి.
బ్రౌజర్ ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్: మ్యానిఫెస్ట్ V3 మరియు జావాస్క్రిప్ట్ APIలు
బ్రౌజర్ ఎక్స్‌టెన్షన్‌లు అనేవి బ్రౌజింగ్ అనుభవాన్ని అనుకూలీకరించే చిన్న సాఫ్ట్‌వేర్ ప్రోగ్రామ్‌లు. అవి కొత్త ఫీచర్‌లను జోడించగలవు, వెబ్‌సైట్ కంటెంట్‌ను సవరించగలవు, ప్రకటనలను నిరోధించగలవు మరియు మరెన్నో చేయగలవు. మ్యానిఫెస్ట్ V3 రాకతో, ఎక్స్‌టెన్షన్‌లు నిర్మించబడే మరియు పనిచేసే విధానంలో గణనీయమైన మార్పులు వచ్చాయి. ఈ సమగ్ర మార్గదర్శి మ్యానిఫెస్ట్ V3 మరియు జావాస్క్రిప్ట్ APIలను ఉపయోగించి బ్రౌజర్ ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్‌ను అన్వేషిస్తుంది, ఆధునిక బ్రౌజర్‌ల కోసం శక్తివంతమైన మరియు సురక్షితమైన ఎక్స్‌టెన్షన్‌లను సృష్టించడానికి మీకు అవసరమైన జ్ఞానాన్ని అందిస్తుంది.
బ్రౌజర్ ఎక్స్‌టెన్షన్‌లు అంటే ఏమిటి?
బ్రౌజర్ ఎక్స్‌టెన్షన్‌లు ప్రాథమికంగా వెబ్ బ్రౌజర్‌లో పనిచేసే చిన్న-అప్లికేషన్‌లు. అవి బ్రౌజర్ కార్యాచరణను విస్తరిస్తాయి మరియు వెబ్ పేజీలతో సజావుగా ఏకీకృతం అవుతాయి. ఎక్స్‌టెన్షన్‌లు HTML, CSS, మరియు జావాస్క్రిప్ట్ వంటి ప్రామాణిక వెబ్ టెక్నాలజీలను ఉపయోగించి వ్రాయబడతాయి, ఇవి వెబ్ డెవలపర్‌లకు సాపేక్షంగా అందుబాటులో ఉంటాయి.
ప్రసిద్ధ బ్రౌజర్ ఎక్స్‌టెన్షన్‌ల ఉదాహరణలు:
- యాడ్ బ్లాకర్‌లు: వెబ్ పేజీలలో ప్రకటనలను నిరోధిస్తాయి, బ్రౌజింగ్ వేగాన్ని మెరుగుపరుస్తాయి మరియు పరధ్యానాన్ని తగ్గిస్తాయి.
- పాస్‌వర్డ్ మేనేజర్‌లు: పాస్‌వర్డ్‌లను సురక్షితంగా నిల్వ చేసి, నిర్వహించి, వెబ్‌సైట్‌లలో వాటిని స్వయంచాలకంగా పూరిస్తాయి.
- నోట్-టేకింగ్ ఎక్స్‌టెన్షన్‌లు: వినియోగదారులను వెబ్ పేజీల నుండి నేరుగా నోట్స్ తీసుకోవడానికి మరియు సేవ్ చేయడానికి అనుమతిస్తాయి.
- ఉత్పాదకత సాధనాలు: టాస్క్ మేనేజ్‌మెంట్, టైమ్ ట్రాకింగ్, మరియు ఫోకస్ మోడ్‌లు వంటి ఫీచర్‌లను అందించడం ద్వారా ఉత్పాదకతను పెంచుతాయి.
- భాషా అనువాద సాధనాలు: ఒకే క్లిక్‌తో వెబ్ పేజీలను వేర్వేరు భాషల్లోకి అనువదిస్తాయి. ఉదాహరణ: గూగుల్ అనువాద ఎక్స్‌టెన్షన్.
- VPN ఎక్స్‌టెన్షన్‌లు: భౌగోళిక పరిమితులను అధిగమించడానికి మరియు గోప్యతను పెంచడానికి ఇంటర్నెట్ ట్రాఫిక్‌ను ప్రాక్సీ చేస్తాయి.
మ్యానిఫెస్ట్ V3 యొక్క ప్రాముఖ్యత
మ్యానిఫెస్ట్ V3 అనేది మ్యానిఫెస్ట్ ఫైల్ యొక్క తాజా వెర్షన్, ఇది ఎక్స్‌టెన్షన్‌ను బ్రౌజర్‌కు వివరించే ఒక JSON ఫైల్. ఇది ఎక్స్‌టెన్షన్ పేరు, వెర్షన్, అనుమతులు, బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లు మరియు ఇతర అవసరమైన మెటాడేటాను వివరిస్తుంది. మ్యానిఫెస్ట్ V3 దాని ముందున్న మ్యానిఫెస్ట్ V2 తో పోలిస్తే అనేక కీలక మార్పులను పరిచయం చేస్తుంది, ప్రధానంగా భద్రత మరియు పనితీరుపై దృష్టి సారిస్తుంది.
మ్యానిఫెస్ట్ V3లోని కీలక మార్పులు:
- సర్వీస్ వర్కర్లు: మ్యానిఫెస్ట్ V3 బ్యాక్‌గ్రౌండ్ పేజీల స్థానంలో సర్వీస్ వర్కర్లను ప్రవేశపెట్టింది. సర్వీస్ వర్కర్లు అనేవి ఈవెంట్-ఆధారిత స్క్రిప్ట్‌లు, ఇవి నిరంతర పేజీ అవసరం లేకుండా బ్యాక్‌గ్రౌండ్‌లో నడుస్తాయి. ఇవి బ్యాక్‌గ్రౌండ్ పేజీల కంటే సమర్థవంతమైనవి మరియు తక్కువ వనరులను వినియోగిస్తాయి.
- డిక్లరేటివ్ నెట్ రిక్వెస్ట్ API: ఈ API ఎక్స్‌టెన్షన్‌లను నెట్‌వర్క్ అభ్యర్థనలను నేరుగా అడ్డగించకుండా సవరించడానికి అనుమతిస్తుంది. ఇది ఫిల్టరింగ్ లాజిక్‌ను బ్రౌజర్‌కు బదిలీ చేయడం ద్వారా భద్రత మరియు పనితీరును పెంచుతుంది.
- కఠినమైన కంటెంట్ సెక్యూరిటీ పాలసీ (CSP): మ్యానిఫెస్ట్ V3 అవాంఛిత కోడ్ అమలును నివారించడానికి కఠినమైన CSP నియమాలను అమలు చేస్తుంది, భద్రతను మరింత పెంచుతుంది.
- ప్రామిస్-ఆధారిత APIలు: అనేక APIలు ఇప్పుడు ప్రామిస్-ఆధారితంగా ఉన్నాయి, ఇది అసమకాలిక కార్యకలాపాలను నిర్వహించడం సులభం చేస్తుంది.
మ్యానిఫెస్ట్ V3కి ఎందుకు మారాలి?
- మెరుగైన భద్రత: మ్యానిఫెస్ట్ V3 బ్రౌజర్ ఎక్స్‌టెన్షన్‌ల భద్రతను మెరుగుపరచడానికి మరియు హానికరమైన కోడ్ నుండి వినియోగదారులను రక్షించడానికి రూపొందించబడింది.
- మెరుగైన పనితీరు: సర్వీస్ వర్కర్లు మరియు డిక్లరేటివ్ నెట్ రిక్వెస్ట్ API మెరుగైన పనితీరుకు మరియు వనరుల వినియోగాన్ని తగ్గించడానికి దోహదం చేస్తాయి.
- అధిక గోప్యత: మ్యానిఫెస్ట్ V3 వినియోగదారులకు వారి డేటా మరియు గోప్యతపై మరింత నియంత్రణ ఇవ్వాలని లక్ష్యంగా పెట్టుకుంది.
మీ డెవలప్‌మెంట్ వాతావరణాన్ని ఏర్పాటు చేసుకోవడం
మీరు బ్రౌజర్ ఎక్స్‌టెన్షన్‌లను డెవలప్ చేయడం ప్రారంభించే ముందు, మీరు మీ డెవలప్‌మెంట్ వాతావరణాన్ని ఏర్పాటు చేసుకోవాలి. ఇందులో కోడ్ ఎడిటర్‌ను ఇన్‌స్టాల్ చేయడం, పరీక్ష కోసం బ్రౌజర్‌ను ఎంచుకోవడం మరియు ఎక్స్‌టెన్షన్ యొక్క ప్రాథమిక ఫైల్ నిర్మాణాన్ని అర్థం చేసుకోవడం వంటివి ఉంటాయి.
1. కోడ్ ఎడిటర్
మీకు సౌకర్యంగా ఉండే కోడ్ ఎడిటర్‌ను ఎంచుకోండి. ప్రసిద్ధ ఎంపికలు:
- విజువల్ స్టూడియో కోడ్ (VS కోడ్): జావాస్క్రిప్ట్ మరియు ఇతర వెబ్ టెక్నాలజీలకు అద్భుతమైన మద్దతుతో ఉచిత మరియు శక్తివంతమైన కోడ్ ఎడిటర్.
- సబ్లైమ్ టెక్స్ట్: విస్తృత శ్రేణి ప్లగిన్‌లతో వేగవంతమైన మరియు అనుకూలీకరించదగిన కోడ్ ఎడిటర్.
- ఆటమ్: గిట్‌హబ్ అభివృద్ధి చేసిన ఉచిత మరియు ఓపెన్-సోర్స్ కోడ్ ఎడిటర్.
2. పరీక్ష కోసం బ్రౌజర్
మీ ఎక్స్‌టెన్షన్‌లను పరీక్షించడానికి ఒక బ్రౌజర్‌ను ఎంచుకోండి. క్రోమ్ మరియు ఫైర్‌ఫాక్స్ అత్యంత ప్రజాదరణ పొందిన ఎంపికలు, ఎందుకంటే అవి పటిష్టమైన డెవలపర్ సాధనాలను మరియు ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్‌కు మద్దతును అందిస్తాయి.
3. ప్రాథమిక ఫైల్ నిర్మాణం
ఒక బ్రౌజర్ ఎక్స్‌టెన్షన్ సాధారణంగా ఈ క్రింది ఫైల్‌లను కలిగి ఉంటుంది:
- manifest.json: ఈ ఫైల్ ఎక్స్‌టెన్షన్ యొక్క మెటాడేటాను కలిగి ఉంటుంది, దాని పేరు, వెర్షన్, అనుమతులు మరియు బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లు వంటివి.
- background.js (లేదా సర్వీస్ వర్కర్ స్క్రిప్ట్): ఈ స్క్రిప్ట్ బ్యాక్‌గ్రౌండ్‌లో నడుస్తుంది మరియు బ్రౌజర్ చర్యలు మరియు కాంటెక్స్ట్ మెను క్లిక్‌ల వంటి ఈవెంట్‌లను నిర్వహిస్తుంది.
- content.js: ఈ స్క్రిప్ట్ వెబ్ పేజీల సందర్భంలో నడుస్తుంది మరియు వాటి కంటెంట్‌ను సవరించగలదు.
- popup.html: ఈ ఫైల్ ఎక్స్‌టెన్షన్ పాప్‌అప్ యొక్క యూజర్ ఇంటర్‌ఫేస్‌ను నిర్వచిస్తుంది.
- popup.js: ఈ స్క్రిప్ట్ ఎక్స్‌టెన్షన్ పాప్‌అప్ యొక్క లాజిక్‌ను నిర్వహిస్తుంది.
- options.html: ఈ ఫైల్ ఎక్స్‌టెన్షన్ ఆప్షన్స్ పేజీ యొక్క యూజర్ ఇంటర్‌ఫేస్‌ను నిర్వచిస్తుంది.
- options.js: ఈ స్క్రిప్ట్ ఎక్స్‌టెన్షన్ ఆప్షన్స్ పేజీ యొక్క లాజిక్‌ను నిర్వహిస్తుంది.
- icons: ఇవి బ్రౌజర్ టూల్‌బార్ మరియు ఎక్స్‌టెన్షన్ మేనేజ్‌మెంట్ పేజీలో ఎక్స్‌టెన్షన్‌ను సూచించడానికి ఉపయోగించే ఐకాన్‌లు.
మీ మొదటి ఎక్స్‌టెన్షన్‌ను సృష్టించడం: "Hello, World!"
బ్రౌజర్ ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్ యొక్క ప్రాథమిక సూత్రాలను ప్రదర్శించడానికి మనం ఒక సాధారణ "Hello, World!" ఎక్స్‌టెన్షన్‌ను సృష్టిద్దాం.
1. మ్యానిఫెస్ట్ ఫైల్ (manifest.json) సృష్టించండి
కొత్త డైరెక్టరీలో `manifest.json` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
{
"manifest_version": 3,
"name": "Hello, World!",
"version": "1.0",
"description": "A simple Hello, World! extension",
"permissions": [
"storage"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
వివరణ:
- `manifest_version`: మ్యానిఫెస్ట్ ఫైల్ యొక్క వెర్షన్‌ను నిర్దేశిస్తుంది (మ్యానిఫెస్ట్ V3 కోసం 3).
- `name`: ఎక్స్‌టెన్షన్ యొక్క పేరు.
- `version`: ఎక్స్‌టెన్షన్ యొక్క వెర్షన్ సంఖ్య.
- `description`: ఎక్స్‌టెన్షన్ యొక్క సంక్షిప్త వివరణ.
- `permissions`: ఎక్స్‌టెన్షన్‌కు అవసరమైన అనుమతుల శ్రేణి (ఉదా. "storage").
- `action`: డిఫాల్ట్ పాప్‌అప్ ఫైల్ మరియు ఐకాన్‌లతో సహా ఎక్స్‌టెన్షన్ పాప్‌అప్ యొక్క లక్షణాలను నిర్వచిస్తుంది.
- `icons`: ఎక్స్‌టెన్షన్ ఐకాన్‌ల పాత్‌లను నిర్దేశిస్తుంది.
2. పాప్‌అప్ ఫైల్ (popup.html) సృష్టించండి
అదే డైరెక్టరీలో `popup.html` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
Hello, World!
Hello, World!
This is a simple browser extension.
ఈ ఫైల్ ఎక్స్‌టెన్షన్ పాప్‌అప్ యొక్క యూజర్ ఇంటర్‌ఫేస్‌ను నిర్వచిస్తుంది, ఇది "Hello, World!" సందేశాన్ని ప్రదర్శిస్తుంది.
3. ఐకాన్ చిత్రాలను సృష్టించండి
16x16, 48x48, మరియు 128x128 పిక్సెల్‌ల పరిమాణాలతో మూడు ఐకాన్ చిత్రాలను సృష్టించండి. వాటిని మీ ఎక్స్‌టెన్షన్ డైరెక్టరీలోని `images` డైరెక్టరీలో `icon16.png`, `icon48.png`, మరియు `icon128.png` గా సేవ్ చేయండి.
4. మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్‌ను లోడ్ చేయండి
క్రోమ్:
- క్రోమ్ తెరిచి `chrome://extensions`కు వెళ్లండి.
- ఎగువ కుడి మూలలో "Developer mode"ను ప్రారంభించండి.
- "Load unpacked"పై క్లిక్ చేసి, మీ ఎక్స్‌టెన్షన్ ఫైల్‌లను కలిగి ఉన్న డైరెక్టరీని ఎంచుకోండి.
ఫైర్‌ఫాక్స్:
- ఫైర్‌ఫాక్స్ తెరిచి `about:debugging#/runtime/this-firefox`కు వెళ్లండి.
- "Load Temporary Add-on..."పై క్లిక్ చేసి, `manifest.json` ఫైల్‌ను ఎంచుకోండి.
మీ "Hello, World!" ఎక్స్‌టెన్షన్ ఇప్పుడు ఇన్‌స్టాల్ చేయబడి బ్రౌజర్ టూల్‌బార్‌లో కనిపించాలి. పాప్‌అప్‌ను తెరవడానికి మరియు "Hello, World!" సందేశాన్ని చూడటానికి ఎక్స్‌టెన్షన్ ఐకాన్‌పై క్లిక్ చేయండి.
జావాస్క్రిప్ట్ APIలతో పని చేయడం
బ్రౌజర్ ఎక్స్‌టెన్షన్‌లు జావాస్క్రిప్ట్ APIలను ఉపయోగించి బ్రౌజర్ మరియు వెబ్ పేజీలతో సంకర్షణ చెందగలవు. ఈ APIలు వివిధ కార్యాచరణలకు యాక్సెస్‌ను అందిస్తాయి, అవి:
- టాబ్స్ API: బ్రౌజర్ ట్యాబ్‌లను సృష్టించడం, నవీకరించడం మరియు క్వెరీ చేయడంతో సహా వాటిని నిర్వహించడానికి మిమ్మల్ని అనుమతిస్తుంది.
- స్టోరేజ్ API: ఎక్స్‌టెన్షన్‌లో డేటాను నిరంతరంగా నిల్వ చేయడానికి మరియు తిరిగి పొందడానికి ఒక మార్గాన్ని అందిస్తుంది.
- అలారమ్స్ API: నిర్దిష్ట సమయాల్లో అమలు చేయడానికి టాస్క్‌లను షెడ్యూల్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.
- నోటిఫికేషన్స్ API: వినియోగదారునికి నోటిఫికేషన్‌లను ప్రదర్శించడానికి మిమ్మల్ని అనుమతిస్తుంది.
- కాంటెక్స్ట్ మెనూస్ API: బ్రౌజర్ కాంటెక్స్ట్ మెనూ (రైట్-క్లిక్ మెనూ)కి అనుకూల ఐటమ్‌లను జోడించడానికి మిమ్మల్ని అనుమతిస్తుంది.
- వెబ్ రిక్వెస్ట్ API (మ్యానిఫెస్ట్ V3లో డిక్లరేటివ్ నెట్ రిక్వెస్ట్): నెట్‌వర్క్ అభ్యర్థనలను అడ్డగించడానికి మరియు సవరించడానికి మిమ్మల్ని అనుమతిస్తుంది.
- స్క్రిప్టింగ్ API: వెబ్ పేజీలలోకి స్క్రిప్ట్‌లను ఇంజెక్ట్ చేయడానికి అనుమతిస్తుంది.
ఉదాహరణ: స్టోరేజ్ APIని ఉపయోగించడం
స్టోరేజ్ APIని ఉపయోగించి వినియోగదారు పేరును నిల్వ చేసి, తిరిగి పొందే ఒక ఎక్స్‌టెన్షన్‌ను సృష్టిద్దాం.
1. మ్యానిఫెస్ట్ ఫైల్ (manifest.json)ను నవీకరించండి
మీ `manifest.json`లోని `permissions` శ్రేణిలో `"storage"` ఉందని నిర్ధారించుకోండి:
{
"manifest_version": 3,
"name": "Storage Example",
"version": "1.0",
"description": "An extension that uses the Storage API",
"permissions": [
"storage"
],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. పాప్‌అప్ ఫైల్ (popup.html)ను సృష్టించండి
మీ `popup.html`ను ఈ క్రింది కంటెంట్‌తో సృష్టించండి లేదా నవీకరించండి:
Storage Example
Storage Example
3. పాప్‌అప్ స్క్రిప్ట్ (popup.js)ను సృష్టించండి
`popup.js` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
document.addEventListener('DOMContentLoaded', () => {
const nameInput = document.getElementById('name');
const saveButton = document.getElementById('save');
const greeting = document.getElementById('greeting');
// Load the saved name from storage
chrome.storage.sync.get('name', (data) => {
if (data.name) {
nameInput.value = data.name;
greeting.textContent = `Hello, ${data.name}!`;
}
});
// Save the name to storage when the button is clicked
saveButton.addEventListener('click', () => {
const name = nameInput.value;
chrome.storage.sync.set({ name: name }, () => {
greeting.textContent = `Hello, ${name}!`;
});
});
});
వివరణ:
- కోడ్‌ను అమలు చేసే ముందు DOM పూర్తిగా లోడ్ అయిందని నిర్ధారించడానికి స్క్రిప్ట్ `DOMContentLoaded` ఈవెంట్ కోసం వింటుంది.
- ఇది ఇన్‌పుట్ ఫీల్డ్, సేవ్ బటన్ మరియు గ్రీటింగ్ పేరాగ్రాఫ్‌కు సూచనలను తిరిగి పొందుతుంది.
- ఇది `chrome.storage.sync.get()` ఉపయోగించి స్టోరేజ్ నుండి సేవ్ చేయబడిన పేరును లోడ్ చేస్తుంది.
- ఇది `chrome.storage.sync.set()` ఉపయోగించి సేవ్ బటన్ క్లిక్ చేసినప్పుడు పేరును స్టోరేజ్‌కు సేవ్ చేస్తుంది.
- ఇది సేవ్ చేయబడిన లేదా నమోదు చేయబడిన పేరుతో గ్రీటింగ్ పేరాగ్రాఫ్‌ను నవీకరిస్తుంది.
మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్‌ను రీలోడ్ చేయండి. ఇప్పుడు, మీరు పాప్‌అప్ తెరిచినప్పుడు, మీరు మీ పేరును నమోదు చేయవచ్చు, దాన్ని సేవ్ చేయవచ్చు మరియు గ్రీటింగ్ సందేశాన్ని చూడవచ్చు. పేరు ఎక్స్‌టెన్షన్ స్టోరేజ్‌లో సేవ్ చేయబడుతుంది మరియు మీరు తదుపరిసారి పాప్‌అప్‌ను తెరిచినప్పుడు లోడ్ చేయబడుతుంది.
ఉదాహరణ: టాబ్స్ APIని ఉపయోగించడం
ప్రస్తుత ట్యాబ్ యొక్క URLని పాప్‌అప్‌లో ప్రదర్శించే ఒక ఎక్స్‌టెన్షన్‌ను సృష్టిద్దాం.
1. మ్యానిఫెస్ట్ ఫైల్ (manifest.json)ను నవీకరించండి
మీ `manifest.json`లోని `permissions` శ్రేణికి `"tabs"` అనుమతిని జోడించండి:
{
"manifest_version": 3,
"name": "Tabs Example",
"version": "1.0",
"description": "An extension that uses the Tabs API",
"permissions": [
"tabs"
],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. పాప్‌అప్ ఫైల్ (popup.html)ను సృష్టించండి
మీ `popup.html`ను ఈ క్రింది కంటెంట్‌తో సృష్టించండి లేదా నవీకరించండి:
Tabs Example
Tabs Example
Current Tab URL:
3. పాప్‌అప్ స్క్రిప్ట్ (popup.js)ను సృష్టించండి
`popup.js` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
document.addEventListener('DOMContentLoaded', () => {
const urlDisplay = document.getElementById('url');
// Get the current tab's URL
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
urlDisplay.textContent = tab.url;
});
});
వివరణ:
- స్క్రిప్ట్ `DOMContentLoaded` ఈవెంట్ కోసం వింటుంది.
- ఇది ప్రస్తుత విండోలోని ప్రస్తుతం యాక్టివ్‌గా ఉన్న ట్యాబ్‌ను పొందడానికి `chrome.tabs.query()`ను ఉపయోగిస్తుంది.
- ఇది ట్యాబ్ యొక్క URLను తిరిగి పొంది `url` పేరాగ్రాఫ్‌లో ప్రదర్శిస్తుంది.
మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్‌ను రీలోడ్ చేయండి. ఇప్పుడు, మీరు పాప్‌అప్ తెరిచినప్పుడు, అది ప్రస్తుత ట్యాబ్ యొక్క URLను ప్రదర్శిస్తుంది.
బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లు మరియు సర్వీస్ వర్కర్లు
మ్యానిఫెస్ట్ V3లో, బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌ల స్థానంలో సర్వీస్ వర్కర్లు ఉంటాయి. సర్వీస్ వర్కర్లు ఈవెంట్-ఆధారిత స్క్రిప్ట్‌లు, ఇవి నిరంతర పేజీ అవసరం లేకుండా బ్యాక్‌గ్రౌండ్‌లో నడుస్తాయి. అవి బ్యాక్‌గ్రౌండ్ పేజీల కంటే సమర్థవంతమైనవి మరియు తక్కువ వనరులను వినియోగిస్తాయి.
సర్వీస్ వర్కర్ల యొక్క ముఖ్య లక్షణాలు:
- ఈవెంట్-ఆధారితం: సర్వీస్ వర్కర్లు బ్రౌజర్ చర్యలు, అలారమ్స్ మరియు కంటెంట్ స్క్రిప్ట్‌ల నుండి వచ్చే సందేశాల వంటి ఈవెంట్‌లకు ప్రతిస్పందిస్తాయి.
- అసమకాలికం: సర్వీస్ వర్కర్లు ప్రధాన థ్రెడ్‌ను బ్లాక్ చేయకుండా ఉండటానికి అసమకాలిక APIలను ఉపయోగిస్తాయి.
- నిష్క్రియంగా ఉన్నప్పుడు ముగించడం: సర్వీస్ వర్కర్లు చురుకుగా ఈవెంట్‌లను నిర్వహించనప్పుడు ముగించబడతాయి, వనరులను ఆదా చేస్తాయి.
ఉదాహరణ: ఒక సర్వీస్ వర్కర్‌ను ఉపయోగించడం
బ్రౌజర్ ప్రారంభమైనప్పుడు ఒక నోటిఫికేషన్‌ను ప్రదర్శించే ఒక ఎక్స్‌టెన్షన్‌ను సృష్టిద్దాం.
1. మ్యానిఫెస్ట్ ఫైల్ (manifest.json)ను నవీకరించండి
మీ `manifest.json`ను ఈ క్రింది కంటెంట్‌తో నవీకరించండి:
{
"manifest_version": 3,
"name": "Service Worker Example",
"version": "1.0",
"description": "An extension that uses a service worker",
"permissions": [
"notifications"
],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
వివరణ:
- `"background"` ప్రాపర్టీ సర్వీస్ వర్కర్ స్క్రిప్ట్ (`background.js`) పాత్‌ను నిర్దేశిస్తుంది.
- `"permissions"` శ్రేణిలో `"notifications"` ఉంటుంది, ఇది నోటిఫికేషన్‌లను ప్రదర్శించడానికి అవసరం.
2. ఒక సర్వీస్ వర్కర్ స్క్రిప్ట్ (background.js)ను సృష్టించండి
`background.js` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
chrome.runtime.onStartup.addListener(() => {
// Display a notification when the browser starts
chrome.notifications.create('startup-notification', {
type: 'basic',
iconUrl: 'images/icon48.png',
title: 'Browser Started',
message: 'The browser has started.',
});
});
వివరణ:
- బ్రౌజర్ ప్రారంభమైనప్పుడు ట్రిగ్గర్ అయ్యే `chrome.runtime.onStartup` ఈవెంట్ కోసం స్క్రిప్ట్ వింటుంది.
- ఇది నిర్దిష్ట లక్షణాలతో ఒక నోటిఫికేషన్‌ను ప్రదర్శించడానికి `chrome.notifications.create()`ను ఉపయోగిస్తుంది.
మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్‌ను రీలోడ్ చేయండి. ఇప్పుడు, మీరు మీ బ్రౌజర్‌ను పునఃప్రారంభించినప్పుడు, మీరు ఎక్స్‌టెన్షన్ నుండి ఒక నోటిఫికేషన్‌ను చూడాలి.
కంటెంట్ స్క్రిప్ట్‌లు
కంటెంట్ స్క్రిప్ట్‌లు వెబ్ పేజీల సందర్భంలో నడిచే జావాస్క్రిప్ట్ ఫైల్‌లు. అవి వెబ్ పేజీల DOMను యాక్సెస్ చేయగలవు మరియు సవరించగలవు, వెబ్‌సైట్‌ల ప్రవర్తన మరియు రూపాన్ని అనుకూలీకరించడానికి మిమ్మల్ని అనుమతిస్తాయి.
కంటెంట్ స్క్రిప్ట్‌ల యొక్క ముఖ్య లక్షణాలు:
- DOMకు యాక్సెస్: కంటెంట్ స్క్రిప్ట్‌లు వెబ్ పేజీల DOMను యాక్సెస్ చేయగలవు మరియు మార్చగలవు.
- వెబ్ పేజీ స్క్రిప్ట్‌ల నుండి వేరుచేయడం: కంటెంట్ స్క్రిప్ట్‌లు వేరుచేయబడిన వాతావరణంలో నడుస్తాయి, వెబ్ పేజీ స్క్రిప్ట్‌లతో వైరుధ్యాలను నివారిస్తాయి.
- బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లతో కమ్యూనికేషన్: కంటెంట్ స్క్రిప్ట్‌లు సందేశ పంపడం ద్వారా బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్‌లతో కమ్యూనికేట్ చేయగలవు.
ఉదాహరణ: ఒక కంటెంట్ స్క్రిప్ట్‌ను ఉపయోగించడం
వెబ్ పేజీల బ్యాక్‌గ్రౌండ్ రంగును లేత నీలం రంగులోకి మార్చే ఒక ఎక్స్‌టెన్షన్‌ను సృష్టిద్దాం.
1. మ్యానిఫెస్ట్ ఫైల్ (manifest.json)ను నవీకరించండి
మీ `manifest.json`ను ఈ క్రింది కంటెంట్‌తో నవీకరించండి:
{
"manifest_version": 3,
"name": "Content Script Example",
"version": "1.0",
"description": "An extension that uses a content script",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [""],
"js": ["content.js"]
}
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
వివరణ:
- `"content_scripts"` ప్రాపర్టీ వెబ్ పేజీలలో ఇంజెక్ట్ చేయవలసిన కంటెంట్ స్క్రిప్ట్‌ల శ్రేణిని నిర్దేశిస్తుంది.
- `"matches"` కంటెంట్ స్క్రిప్ట్ ఇంజెక్ట్ చేయవలసిన URLలను నిర్దేశిస్తుంది (`
` అన్ని URLలకు సరిపోలుతుంది). - `"js"` కంటెంట్ స్క్రిప్ట్ (`content.js`) పాత్‌ను నిర్దేశిస్తుంది.
- `"permissions"` శ్రేణిలో `"activeTab"` మరియు `"scripting"` ఉంటాయి, ఇవి స్క్రిప్ట్‌లను ఇంజెక్ట్ చేయడానికి అవసరం.
2. ఒక కంటెంట్ స్క్రిప్ట్ (content.js)ను సృష్టించండి
`content.js` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
document.body.style.backgroundColor = 'lightblue';
3. ఒక సర్వీస్ వర్కర్ (background.js)ను సృష్టించండి
`background.js` అనే ఫైల్‌ను సృష్టించి, ఈ క్రింది కోడ్‌ను జోడించండి:
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
document.body.style.backgroundColor = 'lightblue';
}
});
});
వివరణ:
- కంటెంట్ స్క్రిప్ట్ కేవలం `body` మూలకం యొక్క బ్యాక్‌గ్రౌండ్ రంగును లేత నీలం రంగుకు సెట్ చేస్తుంది.
- సర్వీస్ వర్కర్ క్లిక్ ఈవెంట్‌కు వింటుంది మరియు ప్రస్తుత ట్యాబ్‌లో ఒక ఫంక్షన్‌ను అమలు చేస్తుంది, అది బ్యాక్‌గ్రౌండ్ రంగును మారుస్తుంది.
మీ బ్రౌజర్‌లో ఎక్స్‌టెన్షన్‌ను రీలోడ్ చేయండి. ఇప్పుడు, మీరు ఏదైనా వెబ్ పేజీని తెరిచినప్పుడు, బ్యాక్‌గ్రౌండ్ రంగు లేత నీలం రంగులో ఉంటుంది.
బ్రౌజర్ ఎక్స్‌టెన్షన్‌లను డీబగ్గింగ్ చేయడం
బ్రౌజర్ ఎక్స్‌టెన్షన్‌లను డీబగ్గింగ్ చేయడం అనేది డెవలప్‌మెంట్ ప్రక్రియలో ఒక ముఖ్యమైన భాగం. క్రోమ్ మరియు ఫైర్‌ఫాక్స్ ఎక్స్‌టెన్షన్‌లను డీబగ్గింగ్ చేయడానికి అద్భుతమైన డెవలపర్ సాధనాలను అందిస్తాయి.
క్రోమ్‌లో డీబగ్గింగ్:
- క్రోమ్ తెరిచి `chrome://extensions`కు వెళ్లండి.
- ఎగువ కుడి మూలలో "Developer mode"ను ప్రారంభించండి.
- మీ ఎక్స్‌టెన్షన్ కోసం "Inspect views background page"పై క్లిక్ చేయండి. ఇది బ్యాక్‌గ్రౌండ్ స్క్రిప్ట్ కోసం క్రోమ్ డెవ్‌టూల్స్‌ను తెరుస్తుంది.
- కంటెంట్ స్క్రిప్ట్‌లను డీబగ్ చేయడానికి, కంటెంట్ స్క్రిప్ట్ ఇంజెక్ట్ చేయబడిన వెబ్ పేజీని తెరిచి, ఆ పేజీ కోసం క్రోమ్ డెవ్‌టూల్స్‌ను తెరవండి. మీరు మీ కంటెంట్ స్క్రిప్ట్‌ను "Sources" ప్యానెల్‌లో చూడాలి.
ఫైర్‌ఫాక్స్‌లో డీబగ్గింగ్:
- ఫైర్‌ఫాక్స్ తెరిచి `about:debugging#/runtime/this-firefox`కు వెళ్లండి.
- జాబితాలో మీ ఎక్స్‌టెన్షన్‌ను కనుగొని "Inspect"పై క్లిక్ చేయండి. ఇది ఎక్స్‌టెన్షన్ కోసం ఫైర్‌ఫాక్స్ డెవలపర్ టూల్స్‌ను తెరుస్తుంది.
- కంటెంట్ స్క్రిప్ట్‌లను డీబగ్ చేయడానికి, కంటెంట్ స్క్రిప్ట్ ఇంజెక్ట్ చేయబడిన వెబ్ పేజీని తెరిచి, ఆ పేజీ కోసం ఫైర్‌ఫాక్స్ డెవలపర్ టూల్స్‌ను తెరవండి. మీరు మీ కంటెంట్ స్క్రిప్ట్‌ను "Debugger" ప్యానెల్‌లో చూడాలి.
సాధారణ డీబగ్గింగ్ టెక్నిక్‌లు:
- కన్సోల్ లాగింగ్: కన్సోల్‌కు సందేశాలను ప్రింట్ చేయడానికి `console.log()`ను ఉపయోగించండి.
- బ్రేక్‌పాయింట్లు: అమలును పాజ్ చేయడానికి మరియు వేరియబుల్స్‌ను తనిఖీ చేయడానికి మీ కోడ్‌లో బ్రేక్‌పాయింట్‌లను సెట్ చేయండి.
- సోర్స్ మ్యాప్‌లు: మీ కోడ్ కుదించబడిన లేదా ట్రాన్స్‌పైల్ చేయబడినప్పటికీ, దాని అసలు రూపంలో డీబగ్ చేయడానికి సోర్స్ మ్యాప్‌లను ఉపయోగించండి.
- ఎర్రర్ హ్యాండ్లింగ్: లోపాలను పట్టుకోవడానికి మరియు లాగ్ చేయడానికి ఎర్రర్ హ్యాండ్లింగ్‌ను అమలు చేయండి.
మీ ఎక్స్‌టెన్షన్‌ను ప్రచురించడం
మీరు మీ ఎక్స్‌టెన్షన్‌ను అభివృద్ధి చేసి, పరీక్షించిన తర్వాత, మీరు దానిని క్రోమ్ వెబ్ స్టోర్ లేదా ఫైర్‌ఫాక్స్ యాడ్-ఆన్స్ మార్కెట్‌ప్లేస్‌లో ప్రచురించవచ్చు.
క్రోమ్ వెబ్ స్టోర్‌లో ప్రచురించడం:
- క్రోమ్ వెబ్ స్టోర్‌లో ఒక డెవలపర్ ఖాతాను సృష్టించండి.
- మీ ఎక్స్‌టెన్షన్‌ను ఒక `.zip` ఫైల్‌లోకి ప్యాకేజ్ చేయండి.
- `.zip` ఫైల్‌ను క్రోమ్ వెబ్ స్టోర్‌కు అప్‌లోడ్ చేయండి.
- ఎక్స్‌టెన్షన్ పేరు, వివరణ మరియు స్క్రీన్‌షాట్‌లు వంటి అవసరమైన మెటాడేటాను అందించండి.
- సమీక్ష కోసం మీ ఎక్స్‌టెన్షన్‌ను సమర్పించండి.
ఫైర్‌ఫాక్స్ యాడ్-ఆన్స్ మార్కెట్‌ప్లేస్‌లో ప్రచురించడం:
- ఫైర్‌ఫాక్స్ యాడ్-ఆన్స్ మార్కెట్‌ప్లేస్‌లో ఒక డెవలపర్ ఖాతాను సృష్టించండి.
- మీ ఎక్స్‌టెన్షన్‌ను ఒక `.zip` ఫైల్‌లోకి ప్యాకేజ్ చేయండి.
- `.zip` ఫైల్‌ను ఫైర్‌ఫాక్స్ యాడ్-ఆన్స్ మార్కెట్‌ప్లేస్‌కు అప్‌లోడ్ చేయండి.
- ఎక్స్‌టెన్షన్ పేరు, వివరణ మరియు స్క్రీన్‌షాట్‌లు వంటి అవసరమైన మెటాడేటాను అందించండి.
- సమీక్ష కోసం మీ ఎక్స్‌టెన్షన్‌ను సమర్పించండి.
ప్రచురణ కోసం ఉత్తమ పద్ధతులు:
- మీ ఎక్స్‌టెన్షన్ యొక్క స్పష్టమైన మరియు సంక్షిప్త వివరణను వ్రాయండి.
- మీ ఎక్స్‌టెన్షన్ ఫీచర్‌లను ప్రదర్శించడానికి అధిక-నాణ్యత స్క్రీన్‌షాట్‌లు మరియు వీడియోలను అందించండి.
- సమర్పించే ముందు మీ ఎక్స్‌టెన్షన్‌ను క్షుణ్ణంగా పరీక్షించండి.
- వినియోగదారు సమీక్షలు మరియు అభిప్రాయాలకు తక్షణమే స్పందించండి.
- తాజా బ్రౌజర్ వెర్షన్‌లు మరియు భద్రతా ప్యాచ్‌లతో మీ ఎక్స్‌టెన్షన్‌ను నవీకరించండి.
భద్రతా పరిగణనలు
బ్రౌజర్ ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్‌లో భద్రత అనేది ఒక కీలకమైన అంశం. ఎక్స్‌టెన్షన్‌లు సున్నితమైన వినియోగదారు డేటాను యాక్సెస్ చేయగలవు మరియు వెబ్ పేజీ కంటెంట్‌ను సవరించగలవు, కాబట్టి హానికరమైన కోడ్ నుండి వినియోగదారులను రక్షించడానికి భద్రతా ఉత్తమ పద్ధతులను అనుసరించడం చాలా అవసరం.
ముఖ్య భద్రతా పరిగణనలు:
- అనుమతులను తగ్గించండి: మీ ఎక్స్‌టెన్షన్‌కు నిజంగా అవసరమైన అనుమతులను మాత్రమే అభ్యర్థించండి.
- వినియోగదారు ఇన్‌పుట్‌ను ధృవీకరించండి: క్రాస్-సైట్ స్క్రిప్టింగ్ (XSS) దాడులను నివారించడానికి అన్ని వినియోగదారు ఇన్‌పుట్‌లను శుభ్రపరచండి మరియు ధృవీకరించండి.
- HTTPS ఉపయోగించండి: రిమోట్ సర్వర్‌లతో కమ్యూనికేట్ చేయడానికి ఎల్లప్పుడూ HTTPS ఉపయోగించండి.
- కంటెంట్ సెక్యూరిటీ పాలసీ (CSP): అవాంఛిత కోడ్ అమలును నివారించడానికి కఠినమైన CSPని అమలు చేయండి.
- మీ ఎక్స్‌టెన్షన్‌ను క్రమం తప్పకుండా నవీకరించండి: తాజా భద్రతా ప్యాచ్‌లతో మీ ఎక్స్‌టెన్షన్‌ను నవీకరించండి.
ఈ భద్రతా మార్గదర్శకాలను అనుసరించడం ద్వారా, మీ బ్రౌజర్ ఎక్స్‌టెన్షన్ వినియోగదారులకు సురక్షితంగా మరియు భద్రంగా ఉందని నిర్ధారించుకోవడంలో మీరు సహాయపడగలరు.
ముగింపు
మ్యానిఫెస్ట్ V3 మరియు జావాస్క్రిప్ట్ APIలను ఉపయోగించి బ్రౌజర్ ఎక్స్‌టెన్షన్ డెవలప్‌మెంట్ బ్రౌజింగ్ అనుభవాన్ని అనుకూలీకరించడానికి మరియు వెబ్ బ్రౌజర్‌లకు కొత్త ఫీచర్‌లను జోడించడానికి ఒక శక్తివంతమైన మార్గాన్ని అందిస్తుంది. ఈ మార్గదర్శిలో వివరించిన కీలక భావనలు, APIలు మరియు ఉత్తమ పద్ధతులను అర్థం చేసుకోవడం ద్వారా, మీరు ఉత్పాదకతను పెంచే, భద్రతను మెరుగుపరిచే మరియు ప్రపంచవ్యాప్తంగా వినియోగదారులకు మెరుగైన బ్రౌజింగ్ అనుభవాన్ని అందించే శక్తివంతమైన మరియు సురక్షితమైన ఎక్స్‌టెన్షన్‌లను సృష్టించవచ్చు. వెబ్ అభివృద్ధి చెందుతూనే ఉన్నందున, ఆన్‌లైన్ పరస్పర చర్యల భవిష్యత్తును తీర్చిదిద్దడంలో బ్రౌజర్ ఎక్స్‌టెన్షన్‌లు అంతకంతకూ ముఖ్యమైన పాత్ర పోషిస్తాయి. వినూత్నమైన మరియు విలువైన ఎక్స్‌టెన్షన్‌లను నిర్మించడానికి మ్యానిఫెస్ట్ V3 మరియు జావాస్క్రిప్ట్ APIల సంపద అందించే అవకాశాలను స్వీకరించండి.