کروم ایکسٹینشن کیسے بنائیں

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

ہمارے آرٹیکل کو بہترین ٹچ اسکرین کروم بوکس بھی دیکھیں

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

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

کروم ایکسٹینشنز

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

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

اپنی خود کی کروم ایکسٹینشن بنائیں

تھوڑی سی تحقیق سے ، آپ اپنی توسیع کو موافقت دے سکتے ہیں کہ آپ جو چاہیں کریں لیکن مجھے ایک بٹن اسپیڈ چیک کا خیال پسند ہے لہذا اس کے ساتھ جا رہا ہوں۔

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

ہر چیز کو اندر رکھنے کے ل keep آپ کو اپنے کمپیوٹر پر فولڈر بنانے کی ضرورت ہوگی۔ تین خالی فائلیں ، مینی فیسٹ۔ جےسن ، پاپ اپ ایچ ٹی ایم ایل اور پاپ اپ.جز بنائیں۔ اپنے نئے فولڈر کے اندر دائیں کلک کریں اور نئی اور ٹیکسٹ فائل کو منتخب کریں۔ اپنی پسند کے ٹیکسٹ ایڈیٹر میں اپنی تین فائلوں میں سے ہر ایک کو کھولیں۔ یقینی بنائیں کہ پاپ اپ ایچ ٹی ایم ایل کو ایک HTML فائل کے طور پر محفوظ کیا گیا ہے اور پاپ اپ.جس کو جاوا اسکرپٹ فائل کی طرح محفوظ کیا گیا ہے۔ اس ٹیوٹوریل کے مقاصد کے لئے بھی گوگل سے نمونے کے اس آئیکن کو ڈاؤن لوڈ کریں۔

manifest.json کو منتخب کریں اور اس میں درج ذیل کو پیسٹ کریں:

manifest "manifest_version": 2، "name": "GTmetrix صفحہ اسپیڈ تجزیہ کار" ، "وضاحت": "کسی ویب سائٹ کے صفحے کی لوڈنگ کی رفتار کا تجزیہ کرنے کے لئے GTmetrix استعمال کریں" ، "ورژن": "1.0" ، "براؤزر_یکشن": default "default_icon" : "icon.png"، "default_popup": "popup.html"} ، "اجازت":}

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

popup.html کھولیں اور اس میں مندرجہ ذیل کو پیسٹ کریں۔

HTTP: //popup.js

جی ٹی میٹریکس کا استعمال کرتے ہوئے پیج سپیڈ تجزیہ کار

صفحے کی رفتار چیک کریں!

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

popup.js کھولیں اور اس میں درج ذیل کو پیسٹ کریں:

document.addEventListener ('DOMContentLoaded'، فنکشن () {var checkPageButton = دستاویز = دستاویز؛ var f = d.createElement ('form')؛ f.action = 'http://gtmetrix.com/analyze.html؟bm'؛ f.method = 'پوسٹ'؛ var i = d.createElement ( 'ان پٹ')؛ i.type = 'پوشیدہ'؛ i.name = 'url'؛ i.value = tab.url؛ f.appendChild (i)؛ d.body.appendChild (f)؛ f.submit () ؛})؛}، غلط)؛}، غلط)؛

میں جاوا اسکرپٹ کو جاننے کا بہانہ نہیں کروں گا یہی وجہ ہے کہ سائٹ پوائنٹ پر فائل پہلے ہی موجود ہے۔ میں صرف اتنا جانتا ہوں کہ وہ جی ٹی میٹرکس کو موجودہ کروم ٹیب میں موجود صفحے کا تجزیہ کرنے کے لئے کہتا ہے۔ جہاں یہ کہتے ہیں کہ 'chrome.tabs.getSelected' توسیع فعال ٹیب سے URL لے کر ویب فارم میں داخل ہوتی ہے۔ جہاں تک میں جاسکتا ہوں۔

آپ کے کروم توسیع کی جانچ ہو رہی ہے

اب ہمارے پاس بنیادی ڈھانچہ موجود ہے ، ہمیں یہ جانچنے کی ضرورت ہے کہ یہ کیسے کام کرتا ہے۔

1. کروم کھولیں ، مزید ٹولز اور ایکسٹینشنز منتخب کریں۔
2. اسے قابل بنانے کیلئے ڈیولپر وضع کے ساتھ والے باکس کو چیک کریں۔
3. غیر پیک شدہ توسیع لوڈ کریں کا انتخاب کریں اور اس توسیع کے ل for آپ نے بنائی فائل پر نیویگیٹ کریں۔
4. توسیع کو لوڈ کرنے کے لئے ٹھیک ہے کو منتخب کریں اور یہ آپ کی توسیعات کی فہرست میں ظاہر ہونا چاہئے۔
5. فہرست میں قابل بنے ہوئے کے ساتھ والے باکس کو چیک کریں اور آئیکن آپ کے براؤزر میں ظاہر ہونا چاہئے۔
6. براؤزر میں آئیکون کو منتخب کریں تاکہ پاپ اپ ظاہر ہو۔
7. بٹن کو منتخب کریں ، اس صفحے کو ابھی چیک کریں!

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

آگے بڑھانا

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

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

اصل گائیڈ کے لئے سائٹ پوائنٹ پر جان سونمیز کو تمام کریڈٹ۔ اس نے سخت محنت کی ، میں نے اسے ذرا سی تنظیمی شکل دی اور اسے قدرے اپ ڈیٹ کیا۔

کیا آپ نے خود اپنی Chrome کی توسیع تیار کی ہے؟ اسے فروغ دینا یا اس کا اشتراک کرنا چاہتے ہو؟ اگر آپ کرتے ہیں تو ہمیں نیچے بتائیں!