پلازمو کا استعمال کرتے ہوئے کروم ایکسٹینشن کیسے تیار کریں۔ [Full Handbook]

کروم ایکسٹینشن ہلکے وزن والے ٹولز ہیں جو آپ کے براؤزنگ کے تجربے کو بہتر اور ذاتی بناتے ہیں، بشمول پاس ورڈز کا نظم کرنا، صفحات کا ترجمہ کرنا، اور ان ویب سائٹس میں بالکل نئی خصوصیات شامل کرنا جنہیں آپ ہر روز استعمال کرتے ہیں۔

لاکھوں ڈویلپرز نے Chrome ویب اسٹور پر ایکسٹینشنز شائع کی ہیں، اور بلڈنگ ایکسٹینشن آپ کے خیال سے کہیں زیادہ قابل رسائی ہے۔

اس ہینڈ بک میں، ہم آپ کو جدید فریم ورک TypeScript، React اور Plasmo کا استعمال کرتے ہوئے شروع سے ایک شائع شدہ Chrome ایکسٹینشن کے بارے میں بتائیں گے جو بار بار سیٹ اپ اور کنفیگریشن کو ہینڈل کرتے ہیں، تاکہ آپ بوائلر پلیٹ کے بجائے تحریری فعالیت پر توجہ مرکوز کر سکیں۔

راستے میں، آپ کو اصل کروم ایکسٹینشن API کا سامنا کرنا پڑے گا جو پروڈکشن ایکسٹینشن کی فعالیت کو سپورٹ کرتا ہے، بشمول ٹیب کے سوالات، ٹیب گروپس بنانا، اور ایکسٹینشن کے مختلف حصوں کے درمیان پیغامات بھیجنا۔

آخر میں، آپ کے پاس ورکنگ کوڈ، آپ کی ایکسٹینشن کی ساخت کا ایک ذہنی ماڈل، اور ہر وہ چیز ہوگی جو آپ کو اپنے آئیڈیا کو Chrome ویب اسٹور پر شائع کرنے کے لیے درکار ہے۔

انڈیکس

پلازما کیا ہے؟

پلازمو براؤزر ایکسٹینشن بنانے کے لیے ایک اوپن سورس فریم ورک ہے۔ اس کے بارے میں سوچیں جیسے Create React App یا Next.js، لیکن کروم ایکسٹینشن کے لیے۔

پلازمو کے بغیر کروم ایکسٹینشن بنانے کے لیے، دستی طور پر manifest.json فائلیں لکھیں، بلڈ ٹولز کو جوڑیں، اور TypeScript کو ترتیب دیں اور براہ راست رد عمل کریں۔ پلازمو اس سب کا خیال رکھتا ہے۔

TypeScript کے ساتھ ایک ورکنگ پروجیکٹ کو سکیفولڈ کریں اور ایک ہی کمانڈ کے ساتھ پہلے سے تشکیل شدہ رد عمل۔ یہ تمہارا ہے package.json اور تخلیق کریں manifest.json کروم کو اس کی ضرورت ہے، لہذا خود اس میں ترمیم نہ کریں۔

مزید برآں، اگر آپ اپنی سورس فائلز کو تبدیل کرتے ہیں، تو آپ کی ایکسٹینشن ڈیولپمنٹ کے دوران خود بخود کروم میں دوبارہ تعمیر اور دوبارہ لوڈ ہو جائے گی، اور مکمل قسم کی حفاظت بشمول Chrome کی اپنی API اقسام، باکس سے باہر دستیاب ہے۔

پلازمو اپنے کروم ایکسٹینشن کے تصور کو نہیں چھپاتا ہے۔ کیا آپ اب بھی اسے استعمال کر رہے ہیں؟ chrome.tabs، chrome.runtimeآپ باقی Chrome API کو براہ راست استعمال کر سکتے ہیں۔ ایک بار جب آپ بورنگ سہاروں سے چھٹکارا پا لیں تو آپ فوری طور پر تعمیر شروع کر سکتے ہیں۔

کیا تعمیر کرنا ہے

اس ٹیوٹوریل میں گروپر کو تھپتھپائیں۔ شروع سے کروم ایکسٹینشن۔

یہ ایکسٹینشن آپ کے براؤزر ٹیبز کو ویب سائٹ ڈومین کی بنیاد پر گروپ کرکے خود بخود منظم کرتی ہے۔

مثال استعمال کیس

تصور کریں کہ آپ کے پاس 20 ٹیبز کھلے ہیں: 5 GitHub سے، 4 YouTube سے، 3 Stack Overflow سے، اور 8 دوسری ویب سائٹس سے۔

ایک کلک کے ساتھ، ٹیب گروپر ایکسٹینشن خود بخود ہر ویب سائٹ کے لیے رنگین گروپ بناتی ہے، جس سے ٹیبز کو تلاش کرنا اور ان کا نظم کرنا آسان ہوجاتا ہے۔

کیا سیکھنا ہے۔

اس ٹیوٹوریل کو مکمل کرنے سے آپ کو تین شعبوں میں تجربہ حاصل ہوگا:

سب سے پہلے کروم ایکسٹینشن کی بنیادی باتیں: ایکسٹینشنز اندرونی طور پر کیسے کام کرتی ہیں، ان کا ڈھانچہ (مینی فیسٹ، بیک گراؤنڈ اسکرپٹ، پاپ اپ)، اور ڈیولپمنٹ کے دوران کروم میں ایکسٹینشنز کو لوڈ اور ٹیسٹ کرنے کا طریقہ۔

دوسرا کروم API: خاص طور پر chrome.tabs براؤزر ٹیبز کا نظم کرنے کے لیے، chrome.tabGroups ٹیب گروپس بنائیں اور اپنی مرضی کے مطابق بنائیں chrome.runtime ایک توسیع کے مختلف حصوں کے درمیان پیغامات کو منتقل کرنے کے لیے استعمال کیا جاتا ہے۔

تیسرا جدید ویب ڈویلپمنٹ ٹولز: ٹائپ سیف JavaScript کے لیے TypeScript، پاپ اپ UI بنانے کے لیے رد عمل، اور پلازمو فریم ورک جو ان سب کو ایک ساتھ جوڑتا ہے۔

شرائط

آپ کو ان شعبوں میں ماہر ہونے کی ضرورت نہیں ہے، لیکن اگر آپ بنیادی JavaScript یا TypeScript سے راضی ہیں اور HTML اور CSS کی عمومی سمجھ رکھتے ہیں تو آپ کو سب سے آسان تجربہ حاصل ہوگا۔

React کا کچھ علم مددگار ہے، لیکن ضروری نہیں ہے۔ ہم جو پاپ اپ جزو بنائیں گے وہ اتنا آسان ہے کہ پہلی بار استعمال کرنے والے بھی اس کی پیروی کر سکتے ہیں۔

سافٹ ویئر کی طرف، آپ کو Node.js ورژن 18 یا اس سے اوپر (یہاں ڈاؤن لوڈ کریں)، گوگل کروم، ایک کوڈ ایڈیٹر (VS کوڈ تجویز کردہ)، اور پیکیج مینیجر pnpm کی ضرورت ہوگی۔

ترتیبات چیک کریں۔

ٹرمینل کھولیں اور اس بات کو یقینی بنانے کے لیے درج ذیل کمانڈ چلائیں کہ سب کچھ انسٹال ہے:

node --version
# Should output v18.0.0 or higher

npm --version
# Should output 9.0.0 or higher

مدد حاصل کریں۔

اگر آپ کو کوئی مسئلہ درپیش ہے، تو براہ کرم ریپوزٹری میں مکمل کوڈ کا جائزہ لیں، کروم ایکسٹینشن دستاویزات کا حوالہ دیں، یا ہمارے کمیونٹی فورمز میں مدد طلب کریں۔

شروع کرنے کے لیے تیار ہیں؟

اگلے حصے میں، آپ اپنا ترقیاتی ماحول ترتیب دیں گے اور اپنا پہلا کروم ایکسٹینشن پروجیکٹ بنائیں گے۔

آئیے شروع کریں!

پروجیکٹ کی ترتیبات

اس سیکشن میں، ہم ایک کروم ایکسٹینشن پروجیکٹ کو سکیفولڈ کرنے کے لیے پلازمو کا استعمال کریں گے اور پھر اسے ٹیب گروپر کے لیے اپنی مرضی کے مطابق بنائیں گے۔

فائلیں دستی طور پر بنانے کے بجائے، آپ Plasmo کو اپنی ضرورت کے مطابق تمام کنفیگریشن کے ساتھ ایک سٹارٹر پروجیکٹ بنانے کی اجازت دے سکتے ہیں، اور پھر اپنی ضروریات کے مطابق اسے حسب ضرورت بنانے سے پہلے دریافت کریں کہ یہ کیا پیدا کرتا ہے۔

مرحلہ 1: pnpm انسٹال کریں (تجویز کردہ)

پلازمو کی سرکاری طور پر سفارش کی جاتی ہے۔ pnpm تیز تنصیب اور ڈسک کی جگہ کے بہتر استعمال کے لیے۔ دیکھیں کہ کیا آپ کے پاس پہلے سے موجود ہے۔

pnpm --version

اگر آپ کو ورژن نمبر نظر آتا ہے، تو مرحلہ 2 پر جائیں۔

اگر آپ کو "کمانڈ نہیں ملا” کا پیغام ملتا ہے تو، استعمال کرکے انسٹال کریں:

npm install -g pnpm

مرحلہ 2: ایک توسیعی پروجیکٹ بنائیں

نیا پلازمو پروجیکٹ بنانے کے لیے درج ذیل کمانڈ کو چلائیں:

pnpm create plasmo tab-grouper

آپ دیکھ سکتے ہیں:

🟣 Creating a new Plasmo extension
📁 Project name: tab-grouper
? Extension description: (Give your extension a nice description)
? Author name: (Your Name)

اس کے بعد پلازمو آپ کے پراجیکٹ کو اسکافولڈ کرتا ہے اور خود بخود اس کے انحصار کو انسٹال کرتا ہے۔ آپ کو تفصیل اور مصنف کا نام درج کرنے کے لیے کہا جا سکتا ہے۔

آپ جو چاہیں داخل کریں۔

مرحلہ 3: اپنے پروجیکٹ پر جائیں۔

cd tab-grouper

مرحلہ 4: دریافت کریں کہ کیا بنایا گیا تھا۔

پلازمو کے ذریعہ تیار کردہ فائلوں کی فہرست۔

ls -la

آپ کو کچھ اس طرح نظر آئے گا:

tab-grouper/
├── .git/                 # Git repository (already initialized!)
├── .github/              # GitHub Actions workflows
├── assets/
│   └── icon.png          # Default Plasmo icon 
├── node_modules/         # Dependencies (already installed!)
├── package.json          # Project configuration
├── popup.tsx             # Default popup 
├── .prettierrc.cjs       # Code formatting rules
├── .gitignore            # Git ignore rules
├── README.md             # Default readme
└── tsconfig.json         # TypeScript configuration

کلیدی فائلیں جو آپ کو جاننے کی ضرورت ہے:

• asset/icon.png: یہ کروم کے لیے درکار ایکسٹینشن آئیکن ہے۔

• package.json: یہ وہ جگہ ہے جہاں آپ انحصار اور اسکرپٹ کی فہرست بناتے ہیں اور ایکسٹینشن مینی فیسٹ کو ترتیب دیتے ہیں۔

• popup.tsx: یہ وہ UI ہے جو ظاہر ہوتا ہے جب آپ ایکسٹینشن آئیکن پر کلک کرتے ہیں۔

• tsconfig.json: TypeScript کی ترتیبات پر مشتمل ہے جو پہلے سے ہی درست طریقے سے ترتیب دی گئی ہیں۔

مرحلہ 5: بنیادی توسیع کی جانچ کریں۔

یقینی بنائیں کہ سب کچھ ٹھیک سے کام کر رہا ہے۔ پہلے آپ اسے اپنی مرضی کے مطابق بنائیں۔

آپ ڈویلپمنٹ سرور کو شروع کرکے ایسا کرسکتے ہیں۔

pnpm dev

آپ اس طرح آؤٹ پٹ دیکھیں گے:

🟣 Plasmo v0.90.5
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Building for target: chrome-mv3
🔵 INFO   | Loaded environment variables from: []
🟢 DONE   | Extension re-packaged in 1842ms! 🚀

View Extension:
📦 build/chrome-mv3-dev

آپ کی توسیع تیار ہے۔ اس ٹرمینل ونڈو کو کھلا رکھیں۔

پلازمو فائل کی تبدیلیوں کو دیکھتا ہے اور خود بخود انہیں دوبارہ بناتا ہے۔

مرحلہ 6: کروم میں ایکسٹینشن لوڈ کریں۔

اب ایکسٹینشن کو کروم میں لوڈ کرکے اس کی جانچ کریں۔

1. گوگل کروم کھولیں۔

2. تحریک chrome://extensions/

3. فعال کریں ڈویلپر موڈ (اوپر دائیں طرف ٹوگل کریں)

4. کلک کریں "غیر پیک شدہ”

5. پروجیکٹ فولڈر میں جائیں۔

6. منتخب کریں build/chrome-mv3-dev فولڈر

7. "فولڈر منتخب کریں” پر کلک کریں

توسیع اب فہرست میں ظاہر ہوگی۔

1. کروم ٹول بار میں پزل پیس آئیکن پر کلک کریں۔

2. "ٹیب گروپنگ” تلاش کریں اور اسے پن کریں۔

3. توسیعی آئیکن پر کلک کریں۔

ایک ڈیفالٹ پاپ اپ یہ کہتا ہوا نظر آئے گا "پلاسمو میں خوش آمدید!”

توسیع کام کر رہی ہے۔ اب آپ اسے اپنی مرضی کے مطابق بنا سکتے ہیں۔

مرحلہ 8: توسیع کی معلومات کو اپ ڈیٹ کریں۔

کھلا package.json آپ کے ایڈیٹر میں۔ یہ فائل آپ کے پروجیکٹ کے بارے میں میٹا ڈیٹا اسٹور کرتی ہے۔ ایکسٹینشن بنانے اور چلانے کے لیے نام، ورژن، تفصیل، انحصار، اور اسکرپٹ۔

اوپر کے قریب درج ذیل لائن تلاش کریں:

{
  "name": "tab-grouper",
  "displayName": "tab-grouper",
  "version": "0.0.0",
  "description": "A basic Plasmo extension.",

اسے تبدیل کریں:

{
  "name": "tab-grouper",
  "displayName": "Tab Grouper",
  "version": "1.0.0",
  "description": "A simple Chrome extension - group tabs by domain",

فائل کو محفوظ کریں۔

مرحلہ 9: مطلوبہ اجازتیں شامل کریں (اہم!)

یہ ایک اہم قدم ہے۔ اگر آپ کے پاس اجازت نہیں ہے تو، توسیع درج ذیل خرابی کے ساتھ ناکام ہو جائے گی۔

TypeError: Cannot read properties of undefined (reading 'query')

Chrome ایکسٹینشنز کو یہ اعلان کرنا چاہیے کہ کون سے براؤزر APIs کو استعمال کرنا ہے۔ میں package.jsonتلاش کریں۔ "manifest" پارٹ ٹائم نوکری.

یہ مندرجہ ذیل ہے:

"manifest": {
  "host_permissions": [
    "https://*/*"
  ]
}

سے بدلیں:

"manifest": {
  "permissions": [
    "tabs",
    "tabGroups"
  ]
}

فائل کو محفوظ کریں۔ کہ tabs اگر آپ کو اجازت ہے تو آپ ٹیب کی معلومات پڑھ سکتے ہیں (ضروری ہے۔ chrome.tabs.query())، اور tabGroups آپ ٹیب گروپس بنا سکتے ہیں اور ان کا نظم کر سکتے ہیں (اگلا درکار ہے)۔ chrome.tabGroups.update())۔

اپنی توسیع کے لیے درست اجازتیں تلاش کریں:

کروم ایکسٹینشن پرمیشنز کا حوالہ تمام دستیاب اجازتوں اور کن چیزوں کو غیر مقفل کرنا ہے۔

ہر API کے لیے دستاویزات کا صفحہ مطلوبہ اجازتوں کی فہرست بھی دیتا ہے۔ مثال کے طور پر، chrome.tabs API صفحہ ہے۔ "tabs" اجازت

اگر آپ پلازمو استعمال کر رہے ہیں، تو مینی فیسٹ کنفیگریشن دستاویز بتاتی ہے کہ اجازتیں کیسے شامل کی جائیں بذریعہ: package.json.

عام طور پر: undefined اگر آپ کو Chrome APIs کو کال کرتے وقت غلطیاں ہو رہی ہیں، تو سب سے پہلے چیک کرنے کے لیے اجازتیں غائب ہیں۔

مرحلہ 10: تصدیق کریں کہ ہاٹ ری لوڈ کام کر رہا ہے۔

جب آپ تبدیلیاں محفوظ کرتے ہیں تو پلازمو ایکسٹینشن کو خود بخود دوبارہ لوڈ کرتا ہے۔

معلوم کریں کہ آپ کا ٹرمینل کہاں ہے۔ pnpm dev یہ چل رہا ہے۔ بچانے کے بعد package.json آپ کو اس طرح کچھ دیکھنا چاہئے:

🔄 Reloading extension...
✅ Ready in 0.8s

آپ کا پروجیکٹ اب تیار ہے۔ کروم میں ٹاسک ایکسٹینشن لوڈ، ڈویلپمنٹ سرور ہاٹ ری لوڈ کے ساتھ چل رہا ہے، مطلوبہ اجازتیں تیار ہیں۔

جب آپ اگلے حصے میں آگے بڑھیں تو ڈویلپمنٹ سرور کو چلتے رہنے دیں اور ایکسٹینشن لوڈ ہونے دیں۔ تبدیلیاں خود بخود دوبارہ لوڈ ہو جاتی ہیں۔

سیکشن کا خلاصہ

اس سیکشن میں، ہم نے pnpm انسٹال کیا اور نئی ایکسٹینشن کو استعمال کرتے ہوئے اسکافولڈ کیا: pnpm create plasmoہم نے تیار کردہ پروجیکٹ کے ڈھانچے کو دریافت کیا، ڈیولپمنٹ سرور شروع کیا، ایکسٹینشن کو Chrome میں لوڈ کیا، اور ایکسٹینشن میٹا ڈیٹا اور اجازتوں کو اپ ڈیٹ کیا۔

اگلا: ٹیب گروپنگ منطق کو سنبھالنے کے لیے ایک پس منظر کا اسکرپٹ بنائیں۔

پس منظر کے اسکرپٹ کو سمجھنا

پس منظر کے اسکرپٹ توسیع کا مرکز ہیں۔ یہ مسلسل پردے کے پیچھے چلتا ہے اور اس میں بنیادی منطق ہے۔

اس صورت میں، کوڈ ٹیبز کو ڈومین کے لحاظ سے گروپ کرتا ہے۔

پس منظر کا اسکرپٹ کیا ہے؟

پاپ اپ بند ہونے کے باوجود بیک گراؤنڈ اسکرپٹ چلتا رہتا ہے۔

آپ براؤزر کے واقعات سن سکتے ہیں جیسے کہ ٹیبز کو کھولنا، بند کرنا، یا اپ ڈیٹ کرنا، ایسے کام انجام دے سکتے ہیں جن کے لیے صارف کے براہ راست تعامل کی ضرورت نہیں ہوتی ہے، اور پیغامات بھیج کر توسیع کے دوسرے حصوں کے ساتھ بات چیت کر سکتے ہیں۔

اسے اپنے ایکسٹینشن کے سرور سائڈ کے طور پر سوچیں۔ ایک پاپ اپ صرف ایک UI ہے جو پاپ اپ سے بات کرتا ہے۔

مرحلہ 1: background.ts بنائیں

پلازمو کی سہاروں سے پہلے سے طے شدہ بیک گراؤنڈ اسکرپٹ نہیں بنتا، اس لیے یہ اس فائل کو شروع سے تیار کرے گا۔ نامی ایک نئی فائل بنائیں background.ts پروجیکٹ کی جڑ پر (اگلی سطح پر) popup.tsx):

export {}

// Background script - runs in the background and handles tab grouping logic

console.log("Tab Grouper background script loaded!")

// Listen for messages from the popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GROUP_TABS") {
    groupTabsByDomain()
    sendResponse({ success: true })
  }
  return true
})

کہ export {} پلازمو کو ماڈیول کے طور پر اس پر کارروائی کرنے کے لیے ٹاپ فائل کی ضرورت ہے۔ اس کے بغیر آپ کو عالمی متغیر اعلامیہ کے تنازعات کے بارے میں غلطیاں مل سکتی ہیں۔

کہ console.log اس سے اس بات کو یقینی بنانے میں مدد ملتی ہے کہ اسکرپٹ کو صحیح طریقے سے لوڈ کیا گیا ہے (ایکسٹینشن کے DevTools کنسول میں نظر آتا ہے)۔ chrome.runtime.onMessage ایک سننے والا سیٹ اپ کریں تاکہ بیک گراؤنڈ اسکرپٹ پاپ اپ سے ہدایات حاصل کر سکے۔

ایک بار موصول ہونے کے بعد "GROUP_TABS" جب اشارہ کیا جائے، گروپنگ فنکشن کو کال کریں۔

آپ کروم ایکسٹینشن دستاویزات میں پیغام رسانی کے اس پیٹرن کے بارے میں مزید جان سکتے ہیں۔

مرحلہ 2: ٹیب گروپنگ منطق کو نافذ کریں۔

اب پیغام سننے والے کے نیچے ایک بنیادی گروپنگ فنکشن شامل کریں۔

async function groupTabsByDomain() {
  try {
    // Step 1: Get all tabs in the current window
    const tabs = await chrome.tabs.query({ currentWindow: true })

    // Step 2: Create a Map to organize tabs by domain
    const domainGroups = new Map()

    // Step 3: Loop through each tab and group by domain
    tabs.forEach(tab => {
      // Skip tabs without URLs
      if (!tab.url) return

      // Extract the domain from the URL
      const domain = getDomainFromUrl(tab.url)

      // Skip invalid domains (like chrome:// pages)
      if (!domain) return

      // Add tab to the appropriate domain group
      if (!domainGroups.has(domain)) {
        domainGroups.set(domain, [])
      }
      domainGroups.get(domain)!.push(tab)
    })

    // Step 4: Create tab groups for each domain (only if 2+ tabs)
    for (const [domain, domainTabs] of domainGroups) {
      // Skip domains with only 1 tab
      if (domainTabs.length < 2) continue

      // Get all tab IDs
      const tabIds = domainTabs
        .map(t => t.id!)
        .filter(id => id !== undefined)

      if (tabIds.length === 0) continue

      // Create the tab group
      const groupId = await chrome.tabs.group({ tabIds })

      // Customize the group with a title and color
      await chrome.tabGroups.update(groupId, {
        title: domain,
        color: getColorForDomain(domain) // Randomized Tab Group colors.
      })
    }

    console.log(`Successfully grouped ${domainGroups.size} domains`)
  } catch (error) {
    console.error("Error grouping tabs:", error)
  }
}

یہ فنکشن موجودہ ونڈو میں تمام ٹیبز سے استفسار کرنے سے شروع ہوتا ہے، پھر ان کے ذریعے دہرایا جاتا ہے۔ Map ڈومین نام کے طور پر درج کیا گیا۔

ایک بار جب تمام ٹیبز ڈومین کی بالٹیوں میں ترتیب دی جاتی ہیں، ہم نقشے کے ذریعے اعادہ کرتے ہیں اور اسے کال کرتے ہیں۔ chrome.tabs.group() ایک سے زیادہ ٹیب والے ڈومینز کے لیے، عنوانات اور رنگوں کے ساتھ نتیجے میں آنے والے گروپس کو فوری طور پر اپنی مرضی کے مطابق بنائیں۔

صرف ایک ٹیب والے ڈومینز کو چھوڑ دیا جائے گا۔ ایک ٹیب کو ایک ساتھ گروپ کرنا کوئی معنی نہیں رکھتا۔

مرحلہ 3: ڈومین مددگار کو نکالیں۔

یو آر ایل سے میزبان نام حاصل کرنے کے لیے ایک مددگار فنکشن شامل کریں۔

function getDomainFromUrl(url: string): string | null {
  try {
    const urlObj = new URL(url)

    // Skip Chrome internal pages (chrome://, chrome-extension://)
    if (urlObj.protocol === "chrome:" || urlObj.protocol === "chrome-extension:") {
      return null
    }

    // Remove "www." prefix and return the hostname
    return urlObj.hostname.replace(/^www./, "")
  } catch {
    // Return null if URL is invalid
    return null
  }
}

new URL(url) یو آر ایل کو دستی طور پر تاروں میں پارس کرنے کے بجائے، یہ کام کرنے کے لیے ایک منظم آبجیکٹ فراہم کرتا ہے۔

پروٹوکول معائنہ کروم کے اندرونی صفحات کو فلٹر کرتا ہے، جیسے: chrome://extensions اور chrome://settingsایکسٹینشنز قابل رسائی نہیں ہیں۔

کہ .replace(/^www./, "") گارنٹی www.github.com اور github.com انہیں دو الگ الگ گروپوں کے بجائے ایک ہی ڈومین کے طور پر سمجھا جاتا ہے۔

ہر چیز کو ٹرائی کیچ میں لپیٹ دیا جاتا ہے، اس لیے خراب URLs کو آسانی سے واپس کر دیا جاتا ہے۔ null اور اسے چھوڑ دیں۔

اصل میں: https://www.github.com/user/repo بن جاتا ہے۔ github.com، https://youtube.com/watch?v=123 بن جاتا ہے۔ youtube.comاور chrome://extensions رپورٹ null.

مرحلہ 4: کلر اسائنمنٹ اسسٹنٹ

ہر ڈومین کو ایک رنگ مقرر کرنے کے لیے ایک فنکشن شامل کریں۔

function getColorForDomain(domain: string): chrome.tabGroups.ColorEnum {
  // Available colors in Chrome
  const colors: chrome.tabGroups.ColorEnum[] = [
    "blue", "red", "yellow", "green", "pink", "purple", "cyan", "orange"
  ]

  // Create a simple hash from the domain name
  let hash = 0
  for (let i = 0; i < domain.length; i++) {
    hash = domain.charCodeAt(i) + ((hash << 5) - hash)
  }

  // Return a color based on the hash
  return colors[Math.abs(hash) % colors.length]
}

کروم ٹیب گروپس کے لیے آٹھ رنگوں کو سپورٹ کرتا ہے۔ ان کو تصادفی طور پر تفویض کرنے کے بجائے (جو ہر بار جب آپ ان کو گروپ کرتے ہیں تو تبدیل کرتے ہیں)، یہ فنکشن ڈومین کے نام کو عددی طور پر ہیش کرتا ہے اور موڈیولو آپریٹر کو کلر اری کے لیے ایک مستقل انڈیکس منتخب کرنے کے لیے استعمال کرتا ہے۔

نتیجہ یہ ہے۔ github.com جب کہ آپ کو سیشنز میں ہمیشہ ایک ہی رنگ ملے گا، مختلف ڈومینز کے مختلف رنگ ملنے کا امکان ہے۔

background.ts فائل کو مکمل کریں۔

آپ کا کامل background.ts یہ اس طرح ہونا چاہئے:

export {}

console.log("Tab Grouper background script loaded!")

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GROUP_TABS") {
    groupTabsByDomain()
    sendResponse({ success: true })
  }
  return true
})

async function groupTabsByDomain() {
  try {
    const tabs = await chrome.tabs.query({ currentWindow: true })
    const domainGroups = new Map()

    tabs.forEach(tab => {
      if (!tab.url) return
      const domain = getDomainFromUrl(tab.url)
      if (!domain) return

      if (!domainGroups.has(domain)) {
        domainGroups.set(domain, [])
      }
      domainGroups.get(domain)!.push(tab)
    })

    for (const [domain, domainTabs] of domainGroups) {
      if (domainTabs.length < 2) continue

      const tabIds = domainTabs
        .map(t => t.id!)
        .filter(id => id !== undefined)

      if (tabIds.length === 0) continue

      const groupId = await chrome.tabs.group({ tabIds })

      await chrome.tabGroups.update(groupId, {
        title: domain,
        color: getColorForDomain(domain)
      })
    }

    console.log(`Successfully grouped ${domainGroups.size} domains`)
  } catch (error) {
    console.error("Error grouping tabs:", error)
  }
}

function getDomainFromUrl(url: string): string | null {
  try {
    const urlObj = new URL(url)
    if (urlObj.protocol === "chrome:" || urlObj.protocol === "chrome-extension:") {
      return null
    }
    return urlObj.hostname.replace(/^www./, "")
  } catch {
    return null
  }
}

function getColorForDomain(domain: string): chrome.tabGroups.ColorEnum {
  const colors: chrome.tabGroups.ColorEnum[] = [
    "blue", "red", "yellow", "green", "pink", "purple", "cyan", "orange"
  ]

  let hash = 0
  for (let i = 0; i < domain.length; i++) {
    hash = domain.charCodeAt(i) + ((hash << 5) - hash)
  }

  return colors[Math.abs(hash) % colors.length]
}

پس منظر کی اسکرپٹ ٹیسٹنگ

ڈیولپمنٹ سرور کو پچھلے حصے سے شروع کریں اگر یہ پہلے سے نہیں چل رہا ہے۔

pnpm dev

اس بات کی تصدیق کرنے کے لیے کہ پس منظر کا اسکرپٹ صحیح طریقے سے لوڈ ہوا ہے، اس پر جائیں: chrome://extensions"ٹیب گروپنگ ٹیوٹوریل" تلاش کریں "سروس ورکر" لنک

جب DevTools کنسول کھلتا ہے، تو آپ دیکھیں گے 'Tab Grouper کے پس منظر کا اسکرپٹ لوڈ ہوا!' یقینی بنائیں کہ سب کچھ منسلک ہے۔

پاپ اپ ایک چھوٹی سی ونڈو ہے جو اس وقت ظاہر ہوتی ہے جب کوئی صارف کروم ٹول بار میں ایکسٹینشن آئیکن پر کلک کرتا ہے۔

یہ معلومات ظاہر کر سکتا ہے، ایکشن بٹن فراہم کر سکتا ہے، اور ڈسپلے سیٹنگز فراہم کر سکتا ہے۔

اس سیکشن میں، ہم ری ایکٹ پر مبنی پاپ اپ بنائیں گے جو ریئل ٹائم ٹیب کے اعدادوشمار دکھاتا ہے اور بیک گراؤنڈ اسکرپٹ سے گروپنگ منطق کو متحرک کرتا ہے۔

جب آپ بھاگتے ہیں pnpm create plasmoپہلے سے طے شدہ popup.tsx یہ صرف ایک خوش آئند پیغام کو ظاہر کرنے کے لیے ڈیزائن کیا گیا ہے۔

اس فائل کو کھولیں اور اسے تبدیل کریں۔ ہر اس ابتدائی کنکال کے مندرجات درج ذیل ہیں:

import { useState, useEffect } from "react"

function IndexPopup() {
  const [tabCount, setTabCount] = useState(0)
  const [groupCount, setGroupCount] = useState(0)
  const [isGrouping, setIsGrouping] = useState(false)

  return (
    

      
Tab Grouper
      Group Tabs
    

  )
}

export default IndexPopup

جب آپ فائل کو محفوظ کریں گے تو ایکسٹینشن خود بخود دوبارہ لوڈ ہو جائے گی۔

تین ریاستی متغیر کھلے ہوئے ٹیبز کی تعداد، موجودہ گروپس کی تعداد، اور آیا گروپنگ آپریشن فی الحال جاری ہے یا نہیں۔

آخری آپ کو بٹن کو غیر فعال کرنے اور لوڈنگ کی حیثیت دکھانے کی اجازت دیتا ہے تاکہ صارف ایک ساتھ متعدد گروپس کو متحرک نہ کر سکے۔

مرحلہ 2: اعدادوشمار لوڈ کریں۔

اب ہم پاپ اپ کھلنے پر ٹیبز اور گروپس کی تعداد لوڈ کرنے کے لیے منطق شامل کرتے ہیں۔ اسے اندر شامل کریں: IndexPopup تقریب کے فوراً بعد، ریاستی اعلان:

// Load tab statistics when popup opens
useEffect(() => {
  loadStats()
}, [])

async function loadStats() {
  const tabs = await chrome.tabs.query({ currentWindow: true })
  const groups = await chrome.tabGroups.query({
    windowId: chrome.windows.WINDOW_ID_CURRENT
  })

  setTabCount(tabs.length)
  setGroupCount(groups.length)
}

کہ useEffect ایک خالی انحصار صف پر مشتمل ہے۔ [] جب جزو کو پہلی بار نصب کیا جاتا ہے تو ایک بار چلتا ہے۔ یعنی جب بھی پاپ اپ کھلتا ہے۔

یہ کال کرتا ہے loadStatsموجودہ ونڈو میں ٹیبز اور گروپس کے لیے کروم سے استفسار کرتا ہے، پھر شمار کے ساتھ اسٹیٹ متغیر کو اپ ڈیٹ کرتا ہے۔

مرحلہ 3: ٹرگر ٹیبز کو گروپ کریں۔

ایک ہینڈلر شامل کریں جو بٹن پر کلک کرنے پر پس منظر کے اسکرپٹ میں پیغام بھیجتا ہے۔

async function handleGroupTabs() {
  setIsGrouping(true)

  // Send message to background script
  await chrome.runtime.sendMessage({ type: "GROUP_TABS" })

  // Refresh statistics
  await loadStats()
  setIsGrouping(false)
}

chrome.runtime.sendMessage میں پہنچاتا ہوں۔ { type: "GROUP_TABS" } سامعین کو پیغام بھیجا جو ہم نے ترتیب دیا ہے۔ background.ts.

پس منظر کا اسکرپٹ مکمل ہونے کے بعد، اعدادوشمار کو دوبارہ لوڈ کریں تاکہ گروپ کی گنتی فوری طور پر اپ ڈیٹ ہوجائے، پھر بٹن کو دوبارہ فعال کریں۔

مرحلہ 4: UI بنانا

پلیس ہولڈر تبدیل کریں۔ return ایک بیان جس کا مکمل انداز والا ورژن ہے:

return (
  

    {/* Header */}
    

      

        🗂 Tab Grouper
      
      

        Organize your tabs by domain
      
    

    {/* Statistics */}
    

    {/* Group Button */}
    
      {isGrouping ? "Grouping..." : "🗂 Group Tabs by Domain"}
    

    {/* Footer */}
    

      💡 Tip: This will group all tabs in this window by their website domain.
    
  
)

UI چار حصوں پر مشتمل ہے: ایک توسیع شدہ عنوان اور ایک مختصر تفصیل کے ساتھ ایک ہیڈر، ایک شماریاتی باکس جو ریئل ٹائم ٹیب اور گروپ کی گنتی کو ساتھ ساتھ دکھاتا ہے، ایک ڈیفالٹ ایکشن بٹن (جو عمل کے جاری رہنے کے دوران گرے ہو جائے گا اور متن "گروپ..." میں تبدیل ہو جائے گا)، اور نیچے ایک ٹپ باکس۔

یہ ٹیوٹوریل سادگی کے لیے ان لائن اسٹائل کا استعمال کرتا ہے۔ پروڈکشن ایکسٹینشنز ممکنہ طور پر اس کی بجائے CSS ماڈیولز، ٹیل ونڈ، یا اسٹائل کے اجزاء استعمال کریں گی۔

آپ کا کامل popup.tsx یہ اس طرح ہونا چاہئے:

import { useState, useEffect } from "react"

function IndexPopup() {
  const [tabCount, setTabCount] = useState(0)
  const [groupCount, setGroupCount] = useState(0)
  const [isGrouping, setIsGrouping] = useState(false)

  useEffect(() => {
    loadStats()
  }, [])

  async function loadStats() {
    const tabs = await chrome.tabs.query({ currentWindow: true })
    const groups = await chrome.tabGroups.query({
      windowId: chrome.windows.WINDOW_ID_CURRENT
    })

    setTabCount(tabs.length)
    setGroupCount(groups.length)
  }

  async function handleGroupTabs() {
    setIsGrouping(true)
    await chrome.runtime.sendMessage({ type: "GROUP_TABS" })
    await loadStats()
    setIsGrouping(false)
  }

  return (
    

      

        

          🗂 Tab Grouper
        
        

          Organize your tabs by domain
        
      

      

      
        {isGrouping ? "Grouping..." : "🗂 Group Tabs by Domain"}
      

      

        💡 Tip: This will group all tabs in this window by their website domain.
      
    
  )
}

export default IndexPopup

توسیع کی جانچ

اب جب کہ بیک گراؤنڈ اسکرپٹ اور پاپ اپ UI دونوں بنائے گئے ہیں، یہ چیک کرنے کا وقت ہے کہ کروم میں سب کچھ ایک ساتھ کام کرتا ہے۔

مرحلہ 1: یقینی بنائیں کہ ڈیو سرور چل رہا ہے۔

اگر pnpm dev اگر آپ اسے پہلے سے پچھلے مراحل میں نہیں چلا رہے ہیں تو ابھی شروع کریں۔

pnpm run dev # or pnpm dev

پلازمو اپنی ایکسٹینشن اس طرح بناتا ہے: build/chrome-mv3-dev اور تبدیلیاں دیکھیں۔

مرحلہ 2: کروم میں ایکسٹینشن لوڈ کریں۔

اگر آپ نے ابھی تک ایکسٹینشن لوڈ نہیں کیا ہے، تو اس پر جائیں: chrome://extensions/فعال کریں ڈویلپر موڈکلک کریں پیک کھول دیا سامانمنتخب کریں build/chrome-mv3-dev فولڈر

لوڈ ہونے کے بعد، آپ کو "ٹیب گروپر ٹیوٹوریل"، ورژن "1.0.0"، اور فعال کے طور پر درج ایکسٹینشن نظر آنی چاہیے۔

مرحلہ 3: ایکسٹینشن کو پن کریں۔

کروم ٹول بار میں پزل پیس آئیکن پر کلک کریں، 'ٹیب گروپنگ ٹیوٹوریل' تلاش کریں، اور پن آئیکون کو دکھائی دینے کے لیے کلک کریں۔

ایکسٹینشن آئیکن اب براہ راست ٹول بار میں ظاہر ہوتا ہے۔

مرحلہ 4: توسیعی جانچ

ٹیسٹ 1: متعدد ٹیبز کھولنا

مواد کو ایک ساتھ گروپ کرنے کے لیے متعدد ڈومینز میں متعدد ٹیبز کھولیں۔

1. https://github.com/topics، https://github.com/trending، https://github.com/explore

2. https://www.youtube.com/ اور https://www.youtube.com/trending

3. https://stackoverflow.com/questions اور https://stackoverflow.com/tags

کم از کم 7 ٹیبز کھلے رکھیں۔

ٹیسٹ 2: ٹیب گروپنگ

ٹیب گروپ بندی کو پھیلائیں آئیکن پر کلک کریں۔ آپ کو ایک پاپ اپ نظر آنا چاہیے جس میں کھلے ٹیبز کی تعداد (7 یا اس سے زیادہ) اور گروپس کی تعداد (شاید 0) دکھائی دے گی۔

کلک کریں "ڈومین کے لحاظ سے ٹیبز کو گروپ کریں" نوٹ کریں کہ ٹیبز کو رنگین گروپس میں کیسے منظم کیا جاتا ہے۔

ٹیسٹ 3: گروپ کی تصدیق

جب آپ بٹن پر کلک کرتے ہیں، تو GitHub ٹیبز کو "github.com" جیسے لیبل اور مستقل رنگوں کے ساتھ گروپ کیا جانا چاہیے، اور YouTube ٹیبز کو بھی اسی طرح گروپ کیا جانا چاہیے۔

اگر آپ دوبارہ expand آئیکون پر کلک کرتے ہیں تو اب آپ دیکھیں گے کہ گروپس کی تعداد 2 ہے اور ٹیبز کی تعداد وہی رہے گی۔

مرحلہ 5: توسیعی ڈیبگ

اگر یہ کام نہیں کرتا ہے تو، Chrome کے DevTools آپ کے بہترین دوست ہیں۔

پس منظر کے اسکرپٹس کا معائنہ کرنے کے لیے، یہاں جائیں: chrome://extensions/ایکسٹینشن تلاش کریں اور اگلا پر کلک کریں۔ "سروس ورکر" لنک

جب DevTools کنسول کھلتا ہے، تو آپ کو "ٹیب گروپنگ بیک گراؤنڈ اسکرپٹ لوڈ شدہ" نظر آئے گا۔ پیغامات اور کوئی بھی غلطیاں سرخ رنگ میں پرنٹ کی جاتی ہیں۔

پاپ اپ کا معائنہ کرنے کے لیے، ایکسٹینشن آئیکن پر دائیں کلک کریں اور منتخب کریں۔ "پاپ اپ معائنہ". اس سے DevTools میں ایک پاپ اپ کھل جائے گا۔ غلطیوں کے لیے کنسول ٹیب کو چیک کریں۔

اگر آپ بٹن پر کلک کرتے ہیں تو کچھ نہیں ہوتا ہے۔خرابیوں کے لیے بیک گراؤنڈ اسکرپٹ کنسول چیک کریں، چیک کریں کہ آیا آپ کے پاس ایک ہی ڈومین پر ایک سے زیادہ ٹیب ہیں، اور چیک کریں کہ آیا پیغامات بھیجے جا رہے ہیں (یہ دیکھنے کے لیے پاپ اپ کنسول کو چیک کریں کہ آیا ٹیب موجود ہے)۔ sendMessage ناکامی)۔

اگر ٹیبز کو گروپ نہیں کیا گیا ہے۔دو بار چیک کریں کہ آپ نے درج ذیل کو شامل کیا ہے: tabs اور tabGroups اتھارٹی package.json میں نے ایکسٹینشن کو محفوظ کیا اور دوبارہ لوڈ کیا۔

اگر آپ کو یہ پیغام نظر آتا ہے کہ 'Extension chrome://...' تک رسائی حاصل نہیں کر سکتی۔یہ متوقع رویہ ہے۔ ایکسٹینشن کروم کے اندرونی صفحات کے ساتھ تعامل نہیں کر سکتی۔ کوڈ جان بوجھ کر انہیں چھوڑ دیتا ہے۔

مرحلہ 6: گرم دوبارہ لوڈنگ

پلازمو کے فوائد میں سے ایک گرم دوبارہ لوڈنگ ہے۔ یہ آپ کو چلانے والی ایپ کے کوڈ کو دستی طور پر دوبارہ شروع کیے بغیر فوری طور پر اپ ڈیٹ کرنے کی اجازت دیتا ہے۔

کھلا popup.tsxہیڈر ایموجی کو سے میں تبدیل کریں اور محفوظ کریں۔

ایکسٹینشن خود بخود دوبارہ لوڈ ہو جائے گی۔

اپ ڈیٹ شدہ ایموجی کو فوری طور پر دیکھنے کے لیے آئیکن پر کلک کریں۔

گرم دوبارہ لوڈ کرنا فائدہ مند ہے کیونکہ یہ آپ کو حقیقی وقت میں تبدیلیاں دیکھنے کی اجازت دے کر ترقی کو تیز کرتا ہے۔

ایکسٹینشن کو ٹیوٹوریل کی باقی مثالوں اور اسکرین شاٹس کے ساتھ ہم آہنگ رکھنے کے لیے آپ ایموجی کو بعد میں دوبارہ تبدیل کر سکتے ہیں۔

مرحلہ 7: ٹیسٹ ایج کیسز

یہ دیکھنے کے لیے چند منظرناموں کی جانچ کرنے کے قابل ہے کہ آیا آپ کی ایکسٹینشن ان کو احسن طریقے سے ہینڈل کرتی ہے۔

اگر میں ایک ٹیب کے سوا تمام بند کر دوں اور "گروپ ٹیبز" پر کلک کر دوں تو کچھ نہیں ہوگا۔ ایکسٹینشن کو گروپ بنانے کے لیے ایک ہی ڈومین سے کم از کم دو ٹیبز کی ضرورت ہوتی ہے۔ افتتاحی chrome://extensions اور chrome://settings چونکہ اس صفحہ کو پھر فلٹر کیا جاتا ہے، اس لیے گروپ بندی کو بھی کچھ نہیں کرنا چاہیے۔

اگر ایک ٹیب ہے۔ reddit.com اور ایک ہے۔ freecodecamp.orgہر ڈومین صرف ایک بار ظاہر ہوتا ہے، اس لیے کوئی گروپ نہیں بنایا جانا چاہیے۔

مرحلہ 8: پیداوار کی تعمیر

جب آپ اپنی ایکسٹینشن کا اشتراک کرنے کے لیے تیار ہوں تو چلائیں:

pnpm run build

یہ پروڈکشن کے لیے موزوں ورژن بناتا ہے۔ build/chrome-mv3-prodMinified JavaScript، کوئی ڈویلپمنٹ صرف کوڈ، اور فائل کے چھوٹے سائز۔

پروڈکشن کی تعمیر کو چیک کرنے کے لیے، یہاں جائیں: chrome://extensions/ڈویلپمنٹ ورژن کو ان انسٹال کریں، "لوڈ ان زپ" پر کلک کریں اور پھر build/chrome-mv3-prod. شائع کرنے سے پہلے اچھی طرح جانچ لیں۔

ایکسٹینشن ہلکا پھلکا ہے (100KB سے کم)، صرف اس وقت چلتا ہے جب آپ کسی بٹن پر کلک کرتے ہیں، اور بیکار ہونے پر اس میں کوئی بیک گراؤنڈ پروسیس نہیں ہوتا ہے۔

اگلے اقدامات اور توسیع کے خیالات

آپ کی پہلی کروم ایکسٹینشن بنانے پر مبارکباد!

اب آپ کے پاس جدید ٹولز جیسے TypeScript، React اور Plasmo کے اوپر ایک ورکنگ ٹول بنایا گیا ہے جو ایک ہی کلک کے ساتھ ڈومین کے لحاظ سے ٹیبز کو گروپ کرتا ہے، اوپن ٹیبز اور گروپس پر ریئل ٹائم اعدادوشمار دکھاتا ہے، اور کروم ایکسٹینشن کے بہترین طریقوں کی پیروی کرتا ہے۔

توسیع ایک مضبوط بنیاد ہے۔ اسے آگے کہاں لے جانا ہے اس کے لیے یہاں کچھ آئیڈیاز ہیں:

1. خودکار گروپ بندی

بٹن پر کلک کرنے کی ضرورت کے بجائے، نیا ٹیب کھلنے پر آپ انہیں خود بخود گروپ کر سکتے ہیں۔ تم ہو chrome.tabs.onCreated واقعہ background.ts اور ٹرگر groupTabsByDomain() صفحہ کا یو آر ایل لوڈ ہونے میں تھوڑی تاخیر ہوتی ہے۔

// In background.ts
chrome.tabs.onCreated.addListener(async (tab) => {
  // Wait a bit for the URL to load
  setTimeout(() => {
    groupTabsByDomain()
  }, 2000)
})

یہ واقعہ سننے والوں، غیر مطابقت پذیر ٹائمنگ، اور اس بارے میں محتاط سوچ پر اثر انداز ہوتا ہے کہ کب عمل کرنا ہے۔ یہ سمجھنے کا ایک اچھا اگلا مرحلہ ہے کہ پس منظر کے اسکرپٹ کس طرح زیادہ فعال طور پر کام کر سکتے ہیں۔

2. کی بورڈ شارٹ کٹس

کی بورڈ شارٹ کٹ شامل کرکے، آپ پاپ اپ کھولے بغیر گروپ بندی چلا سکتے ہیں۔ اضافہ commands مینی فیسٹ سیکشن package.json:

"manifest": {
  "commands": {
    "group-tabs": {
      "suggested_key": {
        "default": "Ctrl+Shift+G",
        "mac": "Command+Shift+G"
      },
      "description": "Group tabs by domain"
    }
  }
}

پھر حکم سنیں۔ background.ts:

chrome.commands.onCommand.addListener((command) => {
  if (command === "group-tabs") {
    groupTabsByDomain()
  }
})

3. زمرہ پر مبنی گروپ بندی

خام ڈومین کے لحاظ سے گروپ بندی کے بجائے، آپ زمرہ کے لحاظ سے گروپ بنا سکتے ہیں۔ مثال کے طور پر، آپ GitHub، Stack Overflow، اور npm کو "Dev" گروپ میں ایک ساتھ رکھ سکتے ہیں۔

const categories = {
  social: ["facebook.com", "twitter.com", "instagram.com"],
  shopping: ["amazon.com", "ebay.com", "etsy.com"],
  dev: ["github.com", "stackoverflow.com", "npmjs.com"]
}

function getCategoryForDomain(domain: string): string {
  for (const [category, domains] of Object.entries(categories)) {
    if (domains.includes(domain)) {
      return category
    }
  }
  return "other"
}

4. اختیارات کا صفحہ

پلازمو ترتیبات کے صفحات کو شامل کرنا آسان بناتا ہے۔ options.tsx فائل

یہ وہ جگہ ہے جہاں صارف خودکار گروپ بندی کو ٹوگل کر سکتے ہیں، ڈومین اور زمرہ کے طریقوں کے درمیان انتخاب کر سکتے ہیں، یا اپنے زمرے کی نقشہ سازی کو ترتیب دے سکتے ہیں۔

کروم اسٹوریج API اور مستقل صارف کی ترجیحات کا ایک اچھا تعارف۔

function OptionsPage() {
  return (
    

      
      
        
        Enable auto-grouping
      
      
        
        Group by category instead of domain
      
    
  )
}

5۔ عمر سے باخبر رہنے پر ٹیپ کریں۔

آپ ٹریک کر سکتے ہیں کہ ہر ٹیب کب بنایا گیا تھا اور کون سے سطحی ٹیب کو ایک ہفتے سے زیادہ عرصے میں چھوا نہیں گیا تھا۔ یہ ٹیب حفظان صحت کی حوصلہ افزائی کرنے کا ایک بہترین طریقہ ہے۔

// Track tab creation times
const tabCreationTimes = new Map()

chrome.tabs.onCreated.addListener((tab) => {
  if (tab.id) {
    tabCreationTimes.set(tab.id, Date.now())
  }
})

// Find old tabs (e.g., > 7 days)
function getOldTabs(): chrome.tabs.Tab[] {
  const sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000)
  return tabs.filter(tab => {
    const created = tabCreationTimes.get(tab.id!)
    return created && created < sevenDaysAgo
  })
}

6. گروپوں میں تلاش کریں۔

پاپ اپ میں ایک سرچ باکس صارفین کو کھلے ٹیبز کو عنوان کے لحاظ سے فلٹر کرنے کی اجازت دیتا ہے، جس سے کسی مخصوص ٹیب پر جانا آسان ہو جاتا ہے۔

const [searchQuery, setSearchQuery] = useState("")

const filteredTabs = tabs.filter(tab =>
  tab.title?.toLowerCase().includes(searchQuery.toLowerCase())
)

7. برآمد/درآمد گروپس

آپ صارفین کو اپنے موجودہ ٹیب گروپ کو JSON فائل میں محفوظ کرنے اور بعد میں بحال کرنے کی اجازت دے سکتے ہیں۔ یہ آپ کے کام کے سیشن کو دوبارہ شروع کرنے کے دوران محفوظ رکھنے کے لیے مفید ہے۔

// Export
async function exportGroups() {
  const groups = await chrome.tabGroups.query({})
  const data = JSON.stringify(groups)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  chrome.downloads.download({ url, filename: 'tab-groups.json' })
}

// Import
async function importGroups(file: File) {
  const text = await file.text()
  const groups = JSON.parse(text)
  // Restore groups...
}

8. گروپ شماریات ڈیش بورڈ

توسیع شدہ پاپ اپ تلاش کے تجزیات، آج کھلے ہوئے ٹیبز کی کل تعداد، سب سے زیادہ دیکھے جانے والے ڈومینز، اور بہت کچھ دکھا سکتا ہے۔

function Statistics() {
  const [stats, setStats] = useState({
    totalTabs: 0,
    totalGroups: 0,
    mostUsedDomain: "",
    tabsToday: 0
  })

  return (
    

      
Browsing Statistics
      
Total tabs opened today: {stats.tabsToday}
      
Most visited domain: {stats.mostUsedDomain}
    
  )
}

سیکھنے کے مواد

اگر آپ مزید گہرائی میں جانا چاہتے ہیں تو، آفیشل کروم ایکسٹینشن دستاویزات بہت اچھی ہیں اور تمام APIs کا تفصیل سے احاطہ کرتی ہیں۔

GitHub پر کروم ایکسٹینشن کے نمونوں کے ذخیرے میں آپ کو سیکھنے کے لیے حقیقی دنیا کی درجنوں مثالیں ہیں۔ پلازمو سے متعلق سوالات کے لیے، پلازمو دستاویزات اور مثال کے ذخیرے بہترین نقطہ آغاز ہیں، اور کمیونٹی Plasmo Discord پر سرگرم ہے۔

React اور TypeScript دستاویزات بطور حوالہ مواد بک مارک کرنے کے قابل ہیں، اور React TypeScript cheatsheet مفید ہے جب آپ کو کسی خاص قسم کے پیٹرن کے بارے میں یقین نہ ہو۔

کمیونٹی سپورٹ کے لیے اسٹیک اوور فلو chrome-extension ٹیگز کی اچھی طرح نگرانی کی جاتی ہے، اور Reddit کی r/chrome_extensions سوالات پوچھنے کے لیے ایک اچھی جگہ ہے۔

کروم ویب اسٹور پر تعینات کریں۔

اب جب کہ آپ نے اپنی ایکسٹینشن تیار اور جانچ لی ہے، اسے شائع کرنے اور دنیا کے ساتھ اس کا اشتراک کرنے کا طریقہ یہاں ہے۔

آپ کو کیا ضرورت ہے

اشاعت کے لیے ایک مکمل اور تجربہ شدہ ایکسٹینشن، ایک Google اکاؤنٹ، US$5 کی ایک بار کی ڈویلپر رجسٹریشن فیس، اور کچھ اسٹور اثاثے جیسے آئیکنز، اسکرین شاٹس، اور تحریری تفصیل کی ضرورت ہوتی ہے۔

$5 فیس ایک وقتی چارج ہے (سالانہ چارج نہیں) جسے Google ڈویلپر کی شناخت کی توثیق کرنے اور اسپام کو کم کرنے کے لیے استعمال کرتا ہے۔ لامحدود توسیعی گذارشات شامل ہیں اور Google Payments کے ذریعے فوری طور پر کارروائی کی جاتی ہیں۔

مرحلہ 1: ایک پروڈکشن بلڈ بنائیں

اگر آپ نے پہلے ایسا نہیں کیا ہے تو، پروڈکشن کے لیے ایکسٹینشن بنائیں۔

cd tab-grouper-tutorial
npm run build

یہ ایک بہتر ورژن بنائے گا۔ build/chrome-mv3-prod/. پروڈکشن چھوٹے فائل سائزز کے لیے JavaScript اور CSS کو کم کرتی ہے، صرف ڈیولپمنٹ کوڈ اور کنسول لاگز کو ہٹاتی ہے، اور تیز تر لوڈنگ کے لیے اثاثوں کو بہتر بناتی ہے۔

براہ کرم اپ لوڈ کرنے سے پہلے لوڈ کریں۔ build/chrome-mv3-prod/ اس بات کو یقینی بنانے کے لیے کہ تعمیراتی عمل میں کوئی مسئلہ نہیں ہے، نکالی گئی ایکسٹینشن کے ساتھ تمام فعالیت کو ایک بار پھر جانچیں۔

مرحلہ 2: اسٹور کے اثاثے بنائیں

آئیکن کو پھیلائیں۔

مجھے تین سائز میں شبیہیں درکار ہیں۔ 128×128 پکسلز بنیادی اسٹور لسٹنگ کے لیے (ضروری) 48×48 ایکسٹینشن مینجمنٹ پیج کے لیے 16×16 فیویکون کے طور پر استعمال کے لیے۔

تمام فائلیں شفاف پس منظر والی PNG فائلیں ہونی چاہئیں۔ اپنے ڈیزائن کو سادہ اور پڑھنے کے قابل رکھیں، یہاں تک کہ چھوٹے سائز میں بھی۔ براہ کرم 16×16 ورژن میں متن نہ ڈالیں۔

فگما مفت ہے اور اس کے لیے اچھا کام کرتا ہے، جیسا کہ کینوا یا جیمپ۔

اسکرین شاٹ

1280×800 یا 640×400 پکسلز (PNG یا JPEG) کے 1 سے 5 اسکرین شاٹس اپ لوڈ کریں۔

ایکسٹینشنز کو عمل میں دکھاتا ہے، نہ کہ موک اپس۔ اعداد و شمار کے پاپ اپ، گروپ شدہ ٹیبز، اور ریاستوں سے پہلے/بعد میں سبھی اچھی طرح سے کام کرتے ہیں۔

اہم خصوصیات کو نمایاں کرنے کے لیے تشریحات شامل کرنے سے صارفین کو یہ سمجھنے میں مدد ملتی ہے کہ وہ کیا دیکھ رہے ہیں۔

پروموشنل تصویر (اختیاری)

اگر آپ اسٹور پر نمایاں ہونا چاہتے ہیں، تو آپ چھوٹی ٹائلیں (440×280)، بڑی ٹائلیں (920×680)، یا مارکی امیجز (1400×560) بھی اپ لوڈ کر سکتے ہیں۔ یہ صرف اس صورت میں درکار ہے جب Google آپ کی توسیع کو فروغ دینے کا انتخاب کرے۔

ڈیمو ویڈیو (اختیاری)

ایک مختصر یوٹیوب ویڈیو (30-60 سیکنڈ) جو آپ کی ایکسٹینشن کو عملی شکل میں دکھاتا ہے آپ کے تبادلوں کی شرح کو نمایاں طور پر بڑھا سکتا ہے۔ اپنے اسٹور کی فہرست سے لنک کریں۔

مرحلہ 3: اپنی اسٹور کی فہرست بنائیں

توسیع کا نام (45 حروف کی حد): واضح اور وضاحتی بنیں۔ "ٹیب گروپنگ - ڈومین کے لحاظ سے ٹیبز کو منظم کریں" اچھی طرح کام کرتا ہے۔ مطلوبہ الفاظ کو بھریں یا ضرورت سے زیادہ اوقاف کا استعمال نہ کریں۔

خلاصہ (132 حروف کی حد): یہ وہی ہے جو تلاش کے نتائج میں ظاہر ہوتا ہے۔ ایکسٹینشن کی خصوصیات کا تعارف۔ "ڈومین کے لحاظ سے آپ کے براؤزر کے ٹیبز کو خودکار طور پر منظم کرتا ہے۔ ایک کلک گروپ بندی آپ کے کام کی جگہ کو صاف اور نتیجہ خیز رکھتی ہے۔"

تفصیلی وضاحت (16,000 حروف کی حد): ایکسٹینشن کی خصوصیات کے ساتھ شروع کریں، واضح طور پر فہرست بنائیں کہ یہ کیا کرتا ہے، اسے استعمال کرنے کا طریقہ، پتہ کی رازداری، اور رابطے کی معلومات فراہم کریں۔ یہاں کچھ ٹیمپلیٹس ہیں جنہیں آپ ایڈجسٹ کر سکتے ہیں:

## What is Tab Grouper?

Tab Grouper automatically organizes your browser tabs by grouping them based on their website domain. No more hunting through dozens of tabs - everything is neatly organized.

## Features

- ✅ One-click tab grouping
- ✅ Automatic color-coding by domain
- ✅ Real-time statistics
- ✅ Works with all websites
- ✅ Lightweight and fast

## How to Use

1. Click the Tab Grouper icon in your toolbar
2. Click "Group Tabs by Domain"
3. Your tabs are instantly organized

## Why You Need This

If you regularly have numerous tabs open, finding the right one can waste valuable time. Tab Grouper solves this by automatically organizing tabs into colored groups, making navigation quick and straightforward.

## Privacy

This extension does not collect any personal data. It only accesses tab information locally to perform grouping. No data is sent to external servers.

## Support

Found a bug or have a suggestion? Contact us at support@example.com

زمرہ: منتخب کریں۔ پیداوری ٹیپ گروپر کے لیے۔ اگر آپ فہرست کو لوکلائز کرنا چاہتے ہیں تو آپ بعد میں دوسری زبانیں شامل کر سکتے ہیں۔

مرحلہ 4: کروم ویب اسٹور ڈویلپر کے طور پر رجسٹر ہوں۔

کروم ویب اسٹور ڈیولپر ڈیش بورڈ پر جائیں، اپنے گوگل اکاؤنٹ سے سائن ان کریں، ڈیولپر کا معاہدہ قبول کریں، اور $5 رجسٹریشن فیس ادا کریں۔ آپ کا اکاؤنٹ منٹوں میں ایکٹیویٹ ہو جائے گا۔

مرحلہ 5: ایک توسیع جمع کروائیں۔

ڈویلپر ڈیش بورڈ سے "نیا آئٹم" اپنی ایکسٹینشن اپ لوڈ کریں۔ آپ اسے دستی طور پر بھی کمپریس کر سکتے ہیں۔ build/chrome-mv3-prod/ ایک فولڈر منتخب کریں یا پلازمو کی پیکیج کمانڈ استعمال کریں۔

# Option 1: Manual zip
cd build/chrome-mv3-prod
zip -r ../../tab-grouper.zip .

# Option 2: Use Plasmo package command
cd tab-grouper-tutorial
npm run package

اپ لوڈ کرنے کے بعد، اسٹور لسٹنگ فارم کے چاروں حصے مکمل کریں۔ پروڈکٹ کی تفصیلات (نام، خلاصہ، تفصیل، زمرہ، زبان) گرافک اثاثے ( شبیہیں اور اسکرین شاٹس) رازداری کے طریقے (نیچے ملاحظہ کریں) اور تقسیم (مرئیت، مقام، قیمت)۔

واحد مقصد کا بیان

کروم کو ہر ایک توسیع کا ایک واحد، واضح طور پر بیان کردہ مقصد کی ضرورت ہوتی ہے۔ ٹیب گروپر کے بارے میں: "یہ ایکسٹینشن براؤزر ٹیبز کو ان کے ڈومین ناموں کی بنیاد پر گروپ کرتی ہے، جس سے صارفین کو متعدد کھلے ٹیبز کا مؤثر طریقے سے انتظام کرنے میں مدد ملتی ہے۔"

اجازت کی بنیاد

آپ کو ہر اعلان کردہ اتھارٹی کا جواز پیش کرنا ہوگا۔ کے لیے tabs: "ٹیب یو آر ایل اور عنوانات کو پڑھنے اور ڈومین کے لحاظ سے گروپ کرنے کے لیے ٹیب کی اجازت درکار ہے۔" کے لیے tabGroups: "کسی تنظیم کے لیے ٹیب گروپس بنانے اور ان کا انتظام کرنے کے لیے ٹیب گروپس کی اجازت درکار ہے۔"

رازداری کی پالیسی

اگرچہ Tab Grouper ذاتی ڈیٹا اکٹھا نہیں کرتا ہے، کروم کو رازداری کی پالیسی کی ضرورت پڑ سکتی ہے۔ کسی GitHub صفحہ یا ذاتی ویب سائٹ پر میزبانی کریں اور اس سے لنک کریں۔ یہاں ایک کم سے کم ٹیمپلیٹ ہے:

# Privacy Policy for Tab Grouper

## Data Collection
Tab Grouper does not collect, store, or transmit any personal data.

## Permissions
- **tabs**: Used only to read tab URLs for grouping purposes
- **tabGroups**: Used only to create and manage tab groups

## Local Processing
All tab grouping happens locally in your browser. No data is sent to external servers.

## Contact
For questions: your-email@example.com

Last updated: [Current Date]

مرحلہ 6: جائزہ کے لیے جمع کروائیں۔

جمع کرائیں پر کلک کرنے سے پہلے، درج ذیل چیک لسٹ کے ذریعے چلائیں:

• اچھی طرح سے تجربہ کیا پیداوار کی تعمیر

• تمام اپ لوڈ کردہ اسٹور اثاثے (آئیکن + ایک یا زیادہ اسکرین شاٹس)

• وضاحتیں واضح اور درست ہیں۔

• اجازت جائز ہے

• رازداری کی پالیسی منسلک ہے۔

• توسیع کے نام وضاحتی ہیں۔

جب آپ تیار ہوں تو اگلا پر کلک کریں۔ "جائزہ کے لیے جمع کروائیں"تفصیلات چیک کریں اور اگلا پر کلک کریں۔ "شائع کریں". توسیع ہماری نظرثانی کی قطار میں داخل ہوگی۔

مرحلہ 7: عمل کا جائزہ لیں۔

سادہ گذارشات کے لیے، ہم عام طور پر 1-3 کاروباری دنوں کے اندر آپ کی توسیع کا جائزہ لیتے ہیں، لیکن پیچیدہ ایکسٹینشنز یا آپ کی پہلی جمع آوری کے لیے، اس میں ایک ہفتہ لگ سکتا ہے۔ جائزہ لینے والے تصدیق کرتے ہیں کہ ایکسٹینشن جیسا کہ بیان کیا گیا ہے کام کرتا ہے، اجازتیں جائز ہیں، کوئی میلویئر نہیں ہے، اور یہ کہ فہرست Chrome ویب اسٹور کی پالیسیوں کی تعمیل کرتی ہے۔

آپ اپنے ڈویلپر ڈیش بورڈ میں اسٹیٹس کو ٹریک کرسکتے ہیں۔ جائزہ کا انتظار → جائزہ میں → منظور یا مسترد۔ اگر آپ کو مسترد کر دیا جاتا ہے، تو ہم آپ کو دوبارہ جمع کرانے کی مخصوص وجوہات اور ہدایات ای میل کریں گے۔

مسترد ہونے کی سب سے عام وجوہات میں ناکافی اجازت کی بنیادیں، گمراہ کن وضاحتیں، رازداری کی گمشدہ پالیسیاں، اور ضرورت سے زیادہ اجازتوں کی درخواستیں شامل ہیں۔ براہ کرم مسترد ای میل میں کسی بھی مسئلے کو حل کریں، اپنی جمع آوری کو اپ ڈیٹ کریں، اور دوبارہ جمع کرائیں۔

مرحلہ 8: منظوری کے بعد

منظوری کے بعد، توسیع کو چالو کر دیا جائے گا۔ https://chrome.google.com/webstore/detail/[extension-id]. سوشل میڈیا پر لنک کا اشتراک کرکے، بلاگ پوسٹ لکھ کر، Reddit (r/chrome، r/chrome_extensions) پر پوسٹ کرکے، یا پروڈکٹ ہنٹ کو جمع کر کے ڈرائیو انسٹال کریں۔

ڈویلپر ڈیش بورڈ جاری تجزیات فراہم کرتا ہے، بشمول کل اور ہفتہ وار انسٹالز، تجزیے اور درجہ بندی، نقوش، اور ان انسٹالز۔ باقاعدگی سے چیک کریں، خاص طور پر پہلے ہفتے کے دوران. جائزوں کا جواب دیں (خاص طور پر منفی)، صارفین کے مثبت تاثرات کے لیے ان کا شکریہ ادا کریں، اور مستقبل کی تازہ کاریوں کو ترجیح دینے کے لیے رپورٹ کردہ کیڑے استعمال کریں۔

مرحلہ 9: اپ ڈیٹس شائع کریں۔

کیڑے ٹھیک کرتے وقت یا خصوصیات شامل کرتے وقت ورژن نمبر شامل کریں۔ package.json (Semantic versioning کے مطابق — بگ فکسس کے لیے پیچ، نئی خصوصیات کے لیے معمولی پیچ، تبدیلیوں کو توڑنے کے لیے بڑے)، چلائیں npm run buildاپنے ڈویلپر ڈیش بورڈ کے ذریعے نئے پیکجز اپ لوڈ کریں۔ پیکج ٹیگ اپ ڈیٹس کا عام طور پر ابتدائی جمع کرانے سے زیادہ تیزی سے جائزہ لیا جاتا ہے، عام طور پر 24 گھنٹوں کے اندر۔

مرحلہ 10: طویل مدتی توسیع کی دیکھ بھال

Chrome ویب اسٹور میں پہلے سے موجود تجزیات ہیں، لیکن اگر آپ مزید تفصیلات چاہتے ہیں تو آپ Google Analytics کو بھی شامل کر سکتے ہیں۔

صارف کے تعاون کے لیے، تفصیل میں ایک ای میل ایڈریس یا GitHub مسئلہ کا صفحہ، دونوں اچھی طرح سے کام کرتے ہیں۔ جیسا کہ آپ خصوصیات شامل کرتے ہیں، تفصیل کو اپ ڈیٹ کرنا اور تبدیلی لاگ کو برقرار رکھنا یقینی بنائیں تاکہ صارفین کو معلوم ہو کہ کیا تبدیلیاں کی گئی ہیں اور کب کی گئی ہیں۔ صارف کے سوالات اور جائزوں کا جواب دینا ایک وفادار صارف کی بنیاد بنانے میں ایک طویل سفر طے کرتا ہے جو دوسروں کو آپ کی توسیع کی سفارش کرے گا۔

عام اشاعت کے مسائل کا ازالہ کریں۔

اپ لوڈ کرتے وقت "پیکیج غلط ہے"۔: یقینی بنائیں کہ مواد کمپریسڈ ہیں۔ build/chrome-mv3-prod/ بنائے گئے فولڈر کو چیک کریں، فولڈر ہی نہیں۔ manifest.json یہ درست JSON ہے۔

تردید: اجازت کی ضمانت نہیں ہے۔: 'اجازت کا جواز' فیلڈ خاص طور پر یہ بتاتا ہے کہ کن خصوصیات کو ہر اجازت کی ضرورت ہوتی ہے اور کون سی خصوصیات اس کے بغیر کام نہیں کریں گی۔

انکار: واحد مقصد واضح نہیں۔: ایک واضح طور پر بیان کردہ مرکزی فنکشن پر توجہ مرکوز کرنے کے لیے اپنے واحد مقصد والے بیان کو دوبارہ لکھیں۔

لانچ کے بعد سے کم انسٹال ریٹ: یہ اکثر خراب اسکرین شاٹس کی وجہ سے ہوتا ہے۔ یہ پہلا اسکرین شاٹ ہے جسے زیادہ تر صارفین دیکھتے ہیں۔ یقینی بنائیں کہ آپ واضح طور پر اس بات کی نشاندہی کرتے ہیں کہ کون سی توسیع ایک حقیقی مسئلہ کو حل کرتی ہے۔ یہاں تک کہ چند ابتدائی جائزے لکھنے سے بھی نئے آنے والوں کے لیے بڑا فرق پڑ سکتا ہے۔

متبادل تقسیم

کروم ویب اسٹور زیادہ تر عوامی ایکسٹینشنز کے لیے ایک اچھا انتخاب ہے۔ اگر آپ اندرونی ٹول بنا رہے ہیں۔ رجسٹرڈ نہیں ہے۔ ایکسٹینشنز (صرف براہ راست روابط کے ذریعے قابل رسائی، تلاش کے قابل نہیں) ایک اچھا اختیار ہے۔

جب آپ کو صارفین کو کسی مخصوص Google Workspace تنظیم تک محدود کرنے کی ضرورت ہو۔ نجی ایکسٹینشن دستیاب ہیں۔ سیلف ہوسٹنگ اور سائیڈ لوڈنگ ممکن ہے، لیکن صارفین سے ڈویلپر موڈ کو دستی طور پر فعال کرنے کی ضرورت ہوتی ہے، جو انہیں صرف بہت تکنیکی صارفین کے لیے عملی بناتی ہے۔

مبارک ہو!

خالی فولڈر سے، میں ویب اسٹور سے لائیو کروم ایکسٹینشن پر گیا۔ راستے میں، میں نے سیکھا کہ ایکسٹینشنز کی ساخت کیسے بنتی ہے، بیک گراؤنڈ اسکرپٹس اور پاپ اپ کس طرح بات چیت کرتے ہیں، کروم ٹیب API کیسے کام کرتا ہے، اور پبلشنگ کے پورے عمل کو کیسے نیویگیٹ کرنا ہے۔

کسی مخصوص API یا کنفیگریشن کی تفصیلات کے بجائے آپ جو سب سے اہم چیز بناتے ہیں، وہ اس بات کا ذہنی ماڈل ہے کہ آپ کی ایکسٹینشن کیسے کام کرے گی، جو براہ راست اس ایکسٹینشن آئیڈیا پر منتقل ہو جائے گی جسے آپ آگے بنانا چاہتے ہیں۔

تعمیر کرتے رہیں، سیکھتے رہیں، اور ترسیل جاری رکھیں!