Add-ons For Firefox

إضافة جميلة الله يعطيك العافية

فكرة الدروس ممتازة أيضاً

أريد أن أتعلم برمجة هذة الأضافات

وأعرف أنها تكون بالجافا سكريبت

السلام عليكــم ورحمـة الله وبركاتــه.

بالفعل فكرة رائعة.

ولك جزيل الشكر.

جيد جداً اخي ..

الافضل , نقل الموضوع الى قسم المجتمع ..

جميل جدا ... لم أتوقع أن أجد هذه الردود وخصوصا من مشرفينا الأعزاء وطبعا من باقي الأعضاء وهذا مشجع حقيقة

سأقوم بشرح ما فهمته من المواقع التي تعبت في البحث عنها وآسف إذا كان الشرح غير واضح :

في البداية هذ هو موقع هذه الإضافات

https://addons.mozilla.org/en-US/firefox/

أعتقد كلكم يعلم عنه ولكن للتذكير.

سنرى ماهي الإضافة التي نريدها ... مثلا للطقس أم للمنتدى أم لآي شيء آخر ؟..

هناك إضافات كثيره وجاهزه للتعديل فمعظمها يحمل الرخص GPL أي أنها رخصة مفتوحة المصدر

لذلك يمكنك تحميل أي إضافة وتعديل محتواها ومن ثم إستخدامها ...

سنأتي للإضافة التي قم بعملها ... من خلال هذا الرابط الإضافة قم بتحميلها وذلك بحفظ الهدف ك .. أو save target as أو save link as

بعد تحميل الأداة نقوم بتحويل امتدادها إلى رار

from e51g!-1.01-fx.xpi to e51g!-1.01-fx.rar

ومن ثم نقوم بالضغط كليك يمين وإكستراكت هير أو فك الضغط هنا

سنرى مجموعة ملفات وهي كالتالي :

الملف المهم نوعا ما لعملية تثبيت الإضافه هو

install.rdf

لو قمنا بفتح الملف بأي محرر أكواد سنجد التالي :

سأكتب تحت كل سطر مهم ماهو عمله

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	 xmlns:em="http://www.mozilla.org/2004/em-rdf#">

	<Description about="urn:mozilla:install-manifest">
		<em:id>{6664FCA9-8245-4803-82ED-214ADFDF00A6}</em:id>
هذا السطر يمكنك كتابة أي أرقام ولكن يفضل أن تكون بنفس الفورمات الموجوده كما يمكنك تحميل هذا البرنامج 
http://download.microsoft.com/download/3/9/7/3971c7df-8354-4cb6-8c29-4a56a82c0d0a/GUIDGen.EXE
ليصنع لك رقم عشوائي 

		<em:name>E51g!</em:name>
هنا عنوان الإضافة وإسمها 
		<em:description>Display last item upload in e51g.com site - عرض آخر منتج تم تحميله في موقع إي51جي</em:description>
هنا مختصر عن الإضافة ولاحظ العربي لازم يكون بترميز utf-8  غير هيك مارح يظهر للأسف 

		<em:creator>bassam alessawi</em:creator>
إسمك أو إسم مبرمج هذه الإضافة 

		<em:homepageURL>http://www.saprinna.com</em:homepageURL>
الصفحة الرئيسيه لصانع الإضافة 
		<em:aboutURL>chrome://e51g/content/about.xul</em:aboutURL>
هنا يمكن وضع إمتداد ملف ( عني ) ولكني لم أستخدمه في الإضافة التي قمت بها. 

		<!-- em:updateURL>http://www.e51g.com/update.rdf</em:updateURL -->
هذه أيضا لعمل تطوير للإضافة وأذكر أني حذفتها لأنها تسبب مشكله بسبب أن هذا التطوير غير موثوق ... هي محذوفه .. مستخدمه كتعليق إذا لاحظتوا . 
		<em:version>1.01</em:version>
رقم النسخة 

		<em:type>2</em:type>
لا أعلم ماهي .. بس خفت أشطبها يضرب الشغل :) أعتقد عادي لو شطبتها بس خليها ما بتأثر :) 

		<em:iconURL>chrome://e51g/skin/e51g32.png</em:iconURL>
الصورة الكبيره للإضافة 32 في 32

		<em:optionsURL>chrome://e51g/content/options.xul</em:optionsURL>
مكان صفحة الخيارات والتي من خلالها يمكن التحكم في الإضافة 
إللي تحت ماتصيبه إشي خاص بموزيلا 	ويحتوي أيضا ماهي النسخ التي تعمل عليها الإضافه من الفيرفوكس ... كل مايتم عن طريق جافاسكريبت يعمل على جميع النسخ وعلى جميع انظمة التشغيل ...	
		<!-- Target Application this extension can install into,
		with minimum and maximum supported versions. -->
		<em:targetApplication>
		<Description>
			<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
			<em:minVersion>1.5</em:minVersion>
			<em:maxVersion>3.0.*</em:maxVersion>
		</Description>
		</em:targetApplication>
	</Description>	  
</RDF>

الملف الثاني :

chrome.manifest

أيضا قم بفتحه على أي محرر أكواد سنرى فيه أماكن المجلدات والملفات .قم بتعديل مايناسبك مثل

,; وكلمة e51g بشكل عام e51g.uxl ...

content e51g chrome/content/
skin	e51g classic/1.0 chrome/skin/
preferences e51g defaults/preferences/
overlay chrome://browser/content/browser.xul chrome://e51g/content/e51g.xul

الآن ندخل إلى المجلد \defaults\preferences

هذا المجلد يحتوي على ملفات جافا سكريبت لتوضيح مافي المتغيرات المستخدمه في هذه الإضافه ... هذا إللي فهمته

ندخل على الملف الوحيد الموجود في إضافتنا : e51g.js

نقوم بتحرير الملف لنجد بداخله هذا الكود :

pref("ext.e51g.key1", "");
pref("ext.e51g.label1", "");
pref("ext.e51g.key2", "");
pref("ext.e51g.label2", "");
pref("ext.e51g.key3", "");
pref("ext.e51g.label3", "");
pref("ext.e51g.key4", "");
pref("ext.e51g.label4", "");
pref("ext.e51g.key5", "");
pref("ext.e51g.label5", "");

pref هذه داله وتأخذ متغيرين الأول إسم المتغير والثاني قيمة هذا المتغير , في العاده هذه المتغيرات للتكست بوكس أما للشيك بوكس نستخدم في القيمة صحيح أو خطأ (true - false)

المجلد الأخير ويحتوي عدة ملفات :

ندخل إلى هذا المجلد \chrome\skin

هنا نضع كل الصور المستخدمه في الإضافة والCss وغيرها ... هنا فقط لدينا الصورة الكبيره أو الآيكون الكبير والذي سيظهر في قائمة الآد أون والآيكون الصغير المستخدم في الستاتس بار

نأتي إلى المجلد الأخير وهو : \chrome\content

الملف الأول هو : e51g.css

لعمل تصميم المخرجات ويحتوي على

#e51gIcon {
	list-style-image: url(chrome://e51g/skin/e51g16.png);
}

الملف الثاني : e51g.xul

هذا الملف يخص جميع المخرجات التي ستظهر على متصفح الفيرفوكس ... مثلا شريط أدوات أو كبسة في الشريط أو كلمة في الستاتس بار كما نريد في هذا المثال .

<?xml version="1.0"?>
<?xml-stylesheet
		  href="chrome://e51g/content/e51g.css"
لاحظ هنا إستخدمنا ملف الستايل 
		  type="text/css"?>

<overlay id="e51g" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
هذا الكود خاص بفايرفوكس 

	<script type="application/x-javascript" src="chrome://e51g/content/e51g.js"></script>
ملف الجافاسكريبت الذي سينفذ 
	<statusbar id="status-bar">
		<statusbarpanel id="e51g-statusbar-panel1" onmousedown="showDetails();">
عرفنا الستاتس بار وعند الضغط بالماوس سيقوم بتنفيذ الدالة في ملف الجافاسكريبت الذي قمنا بتعريفه بالأعلى /content/e51g.js

			<image id="e51gIcon"/>
			<label id="waulabel1" value="" />
			<label id="waucount1" value="bassam" />
في الأسطر الثلاث السابقة قمنا بتعريف صورة وليبل لكي نقوم بتعبئة البيانات التي نريدها والصورة إستخدما لها الستايل في ملف الستايل 
		</statusbarpanel>
	</statusbar>
</overlay>

صورة توضيحية

الآن الملف الثالث وهو : e51g.js

هو ملف جافا سكريبت عادي ولكن يحتوي على بعض الأكواد الخاصه بفيرفوكس مثل إستدعاء المتغرات من الأوبشن وهذا الأمر الذي عقدني جدا :)

نرى مابداخل هذا الملف :

//set my request object
واضح هنا عملية أجاكس 
var http = createRequestObject();
//variable to track if we're currently in a call
var inCall = false;
//queue for calls
var callToArray = new Array();
//queue for function to execute when call complete
var returnToArray = new Array();

var MAXSITES = 6;

function createRequestObject() {
	var request_;
	request_ = new XMLHttpRequest();
	return request_;
}

function sendCall(whereTo, returnTo) {
	//get the next array item and remove from array
	callToArray.push(whereTo);
	returnToArray.push(returnTo);
}

function callQueue() {
	//check the queue and send next call in line
	if(!inCall && callToArray.length > 0) {
		//do we have anything in the queue?
		if(callToArray.length > 0) {
			//we do, so get the first item in the call array and remove it
			whereTo = callToArray.shift();
			returnTo = returnToArray.shift();
			//send that call
			doCall(whereTo, returnTo);
		}
	}
}

function doCall(whereTo, returnTo) {
	inCall = true;
	http.open('get', whereTo, true);
	http.overrideMimeType('text/plain');
	//do we have a function to call once call is completed?
	if(returnTo.length > 0){
		http.onreadystatechange = function (aEvt) {
			if(http.readyState == 4) {
				 if(http.status == 200)
					showUsers(returnTo);
			}
		};
	}
	//send call
	http.send(null);
}

function hr_inCall() {
	if(http.readyState == 4){
		inCall = false;
	}
}
هذه الدالة هي التي تهمنا لتصفح المتغيرات التي عرفناها 
function getKey(id) {
	var prefs = Components.classes["@mozilla.org/preferences-service;1"].
	getService(Components.interfaces.nsIPrefBranch);
	var key = prefs.getCharPref("ext.e51g.key" + id.toString());
	return key;
}

function getLabel(id) {
	var prefs = Components.classes["@mozilla.org/preferences-service;1"].
	getService(Components.interfaces.nsIPrefBranch);
	var label = prefs.getCharPref("ext.e51g.label" + id.toString());
	return label;
}

function getUsers() {
	var key = "";
	for (var id=1; id <= MAXSITES; id++) {
		key = key + '*' + getKey(id);
		if (key != ""){
			sendCall('http://e51g.com/' + key + '/status/1/', id.toString());

	document.getElementById('waulabel1').value = getLabel(id);
هنا عملية الطباعه على الستاتس بار 

			document.getElementById('e51g-statusbar-panel1').hidden = false;
		} else {
		عملية إخفاء أو إظهار الليبل والصورة في الستاتس بار 	
document.getElementById('e51g-statusbar-panel1').hidden = true;
		}
	}
}

function showUsers(id) {
	if(http.readyState == 4) {
		var response = http.responseText;
		document.getElementById('waucount1').value = response;
		inCall = false;
		if(id == 1) {
			setTimeout('getUsers()', 300000);
		}
	}
}

function showDetails() {
	//force a refresh of toolbar
   //	getUsers();
	//var key = '*' +getKey(1)+ '+' + getKey(2)+ '+' +getKey(3)+ '+' +getKey(4)+ '+' +getKey(5)+ '+' +getKey(6);
	var b = document.getElementById("content");
		var t = b.addTab('http://e51g.com/' + document.getElementById('waucount1').value + '/Search/1/');
	b.selectedTab = t;
}

function editKey() {
	window.openDialog("chrome://e51g/content/options.xul","e51g-prefs","centerscreen, chrome, modal");
}

var queueWatcher = setInterval(callQueue, 100);
window.addEventListener("load", getUsers, false);

يبقى الملف الأخير والخاص بعملية إظهار الخيارات لهذه الإضافة : options.xul

لاحظ أنه يشبه ملف المخرجات التي ستظهر على متصفح الفيرفوكس , لآنه يعتبر من المخرجات في الفيرفوكس أو الإضافات فأنت بهذه الملفات ستجعل الفيرفوكس له ميزه جديده وهذا ماجله من أقوى المتصفحات ومن يستخدم الإنترنت إكسبلولر فهذا لايعلم عن الفيرفوكس ولو جرب الفيرفوكس لنسي أي شيء يخص الإنترنت إكسبلولر

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<prefwindow id="e51g-prefs"
  title="e51g.com item"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">


	<prefpane id="e51gPane" label="e51g.com key">
إنشاء النافذه الخاصه بالخيارات 
		<preferences>
			<preference id="pref_key1" name="ext.e51g.key1" type="string" />
			<preference id="pref_name1" name="ext.e51g.label1" type="string" />
			<preference id="pref_key2" name="ext.e51g.key2" type="string" />
			<preference id="pref_name2" name="ext.e51g.label2" type="string" />
			<preference id="pref_key3" name="ext.e51g.key3" type="string" />
			<preference id="pref_name3" name="ext.e51g.label3" type="string" />
			<preference id="pref_key4" name="ext.e51g.key4" type="string" />
			<preference id="pref_name4" name="ext.e51g.label4" type="string" />
			<preference id="pref_key5" name="ext.e51g.key5" type="string" />
			<preference id="pref_name5" name="ext.e51g.label5" type="string" />
			<preference id="pref_key6" name="ext.e51g.key6" type="string" />
			<preference id="pref_name6" name="ext.e51g.label6" type="string" />
المتغيرات التي سنستخدمها 
		</preferences>

	<tabbox id="tablist">
لإنشاء ألسنه في النافذه (tabs)
			<tabs>
				<tab label="Simple - عام"/>
				<tab label="Advanced - متقدم"/>
				<tab label="Help - مساعده"/>
			</tabs>
			<tabpanels>
				<tabpanel id="simpletab">
بعد تعريف الألسنه نقوم بتحديد نمط الكتابه داخل اللسان أفقي أو عمودي ومايحتوي عليه اللسان 
					<vbox align="vertical">
						<label control="normal" value="let me know what's new in this category's"/>
						<label control="normal" value="دعني أعرف ماهي آخر المنتجات التي تم تحميلها في الفئات التي إخترتها"/>
						<label control="normal" value="Ebooks - كتب "/>
						<checkbox preference="pref_key1" id="normal" />
						<label control="normal" value="Games - ألعاب"/>
						<checkbox preference="pref_key2" id="normal" />
						<label control="normal" value="Graphics - تصاميم"/>
						<checkbox preference="pref_key3" id="normal" />
						<label control="normal" value="Magazines - مجلات"/>
						<checkbox preference="pref_key4" id="normal" />
						<label control="normal" value="Software - برامج"/>
						<checkbox preference="pref_key5" id="normal" />
					</vbox>
				</tabpanel>

	<tabpanel id="advancedtab">
اللسان الثاني 
					<vbox>
						<label control="normal" value="let me know what's new in category's who have this word."/>
						<label control="normal" value="دعني أعرف ماهي آخر المنتجات التي تم تحميلها في الفئات التي إخترتها وتحتوي على هذه الكلمة."/>

						<label control="normal" value="Type a word for search"/>
						<label control="normal" value="أكتب كلمة البحث"/>
						<textbox preference="pref_key6" id="normal" />
					</vbox>
				</tabpanel>
				<tabpanel id="helptab">
اللسان الثالث .. لاحظ عملية إضافة ليبل وتكست بوكس وشيك بوكس كلها تتم عن طريق كود إكس إم أل بسيط كما ترى 
					<vbox>
						<label control="normal" value="please unckeck all categorys and if its alredy uncheck please recheck it and uncheck ."/>
						<label control="normal" value="sorry for this bug, we well fix it soon"/>

						<label control="normal" value="أرجو أن تقوم بإزالة الصح من كل الفئات وإذا كان الصح مزال أصلا فأرجو أن تقوم" />
 						<label control="normal" value="بوضعة ومن ثم إزالته وبعدها تختار الفئات التي تريدها" />

						<label control="normal" value="هذه المشكله سيتم تعديلها إن شاء الله " />
						<label control="normal" value="شكرا لتفهمك "/>

						<label control="normal" value=""/>
						<label control="normal" value="About"/>
						<label control="normal" value="this add-ons created by saprinna.com site"/>

					</vbox>
				</tabpanel>
			</tabpanels>
		</tabbox>
	</prefpane>
</prefwindow>

تم العمل على هذه الملفات لتجربة الكود قم بضغط الملفات بإمتداد .zip وحول إسم الملف الناتج إلى .xpi

وفم بسحب الملف الناتج إلى الفيرفوكس سترى نافذه تخبرك عن تحميل إضافة قم بعمل تستيب وسترى النتيجه بعد عمل ريستارت للفير فوكس

ملاحظه : يمكنك تحميل ملف آخر بعد التعديل عليه وسيقوم الفيرفوكس بعمل أبديت للإضافة القديمه . يعني مافي داعي تضل تعمل حذف للإضافة وتستيب في كل مرة بدك تجربها ,

ملاحظه ثانيه : يمكنك التعديل مباشرة بعد عملية التستيب من خلال الذهاب إلى مجلد الإضافات ويمكنك إيجاده بالبحث عن معرف الإضافة الذي وضعناه في ملف التستيب :

{6664FCA9-8245-4803-82ED-214ADFDF00A6}

لآن الفير فوكس يقوم بإنشاء مجلد بإسم المعرف وليش بإسم الإضافة , والتعديل مباشرة على الملفات وعمل ريستارت للفيرفوكس إذا لم تشاهد النتيجه فورا .

لرفع الإضافة إلى موقع موزيلا قم بإنشاء حساب ثم الذهاب إلى Developer Tools وبعدها ستجد على اليسار قائمة فيها Submit Add-on ثم إتبع الإرشادات

سيقوم موزيلا بوضع الإضافة تحت الإختبار وبعدها يقوم بنشرها أو رفضها

أتمنى يكون الدرس مفيد ورح نحاول نعمل إضافة بسيطه تستدعي كلمة من موقع وتقوم بوضعها في الستاتس بار للفيرفوكس .. من سيقوم بالبدء ؟

من يقوم بعمل إضافه نرجو منه وضع رابط لها هنا لنقوم بتجربتها

شكرا لكم

العفو أخي الكريم وهذا واجب ... شكرا إلك

شكرا أخي الكريم .. عموماً أنا نظرت لجميع إضافاتك بصراحة كل شي بتضيفه داخل هذا المنتدى إشي جديد و منتقى و رائع .. ولا أعلم لماذا لم يضعوك مشرف في هذا المنتدى..

عموماً أخي الكريم أنا أشكرك لأني إستفدت منك كثير و يا ريت كل ما هو جديد ومفتقر له إنك تضيفه تفيدنا فيه فنحن بحاجة لأمثالك..

و السلام عليكم

@ أخي Prince00 : شكرا لك , يمكن ذلك وهي فكرة جميله ولكن أرجو في البدايه البحث عن إضافة للقرآن الكريم فربما أن تكون موجوده وإذا لم تكن فنحن مستعدون للتعاون ولكن قم بكاتبه الفكرة كامله حتى نقوم بتكوين أفكارنا قبل البدء , للأسف لدي الإنترنت بطيء جدا جدا جدا لذلك لايمكنني تجربة إي إضافة أو حتى الدخول على أي موقع وأكتب هنا عن طريق جعل المتصفح بدون صور أو أي إضافات (حتى يمكن تصفح هذا المنتدى) , الفكره جميله جدا سأكتب أفكاري للإضافه بعد أن تقوم بوضع الفكرة الرئيسيه :)

@ cornerofart : شكرا لك وهذا واجبنا , هناك مشرفين على قدر عال ونحن نكن لهم كل الإحترام والتقدير ويكفيني فخرا جعلي من خبراء المجتمع العربي , الإشراف يحتاج إلى مجهود ولا أعتقد أنني جدير به :)