المعرفة الأساسية
1. بنية ملفات الإضافات
1.1. manceest.json
يحتوي كل امتداد ، و WebApp القابل للتثبيت ، والجلد على ملف واضح لـ JSON الذي يخزن معلومات مهمة متعلقة بالمكونات.
مثال على التكوين الأساسي:
{"Name": "Browser Action Demo" ، "الإصدار": "1.0" ، "الأذونات": ["علامات التبويب" ، "http: //*/*" ، "https: //*/*"] ، "browser_action "popup.html"} ، "الخلفية": {"صفحة": "background.html"} ، "manesest_version": 2}1.2. يظهر فجأة
النافذة المنبثقة للمكون الإضافي ، Default_Popup في Browser_Action في التكوين أعلاه هي هذه الصفحة.
1.3. صفحة الخلفية
تتضمن معظم التطبيقات صفحة خلفية لأداء الوظائف الرئيسية للتطبيق.
1.4. نصوص المحتوى
يمكن لـ Content Script تمكين التفاعل بين التطبيق وصفحة الويب ، والتي تشير إلى نصوص JavaScript التي يمكن تشغيلها داخل الصفحات التي تم تحميلها بواسطة المتصفح. يمكنك التفكير في البرنامج النصي للمحتوى كجزء من صفحة ويب ، وليس جزءًا من التطبيق الموجود.
2. التفاعل بين الملفات
يمكن استدعاء الوظيفة في صفحة الخلفية مباشرة في النافذة المنبثقة.
يمكن لـ Content Script قراءة وتعديل شجرة DOM لصفحة الويب الحالية ، ولكن لا يمكنه تعديل شجرة DOM لصفحة الخلفية (الخلفية) للتطبيق الذي توجد به.
التفاعل بين البرنامج النصي والتطبيق: يمكنك إرسال رسائل إلى بعضها البعض
3. حقن ملف JS (نصوص المحتوى) في صفحة الويب:
الطريقة 1: تكوين في ملف manesest.json:
"content_scripts": [{"Matches": ["http://www.google.com/*"] ، "css": ["mystyles.css"] ، "js":الطريقة 2 ، عبر executescript ():
حقن البرامج النصية JavaScript في الصفحة لتنفيذها.
chrome.tabs.executescript (integer tabid ، تفاصيل الكائن ، رد الفظيعة) chrome.tabs.executescript (tabid ، {file: "func.js" ، allframes: true}) ؛مظهر واجهة المستخدم
1. عمل المتصفح:
أضف أيقونة على يمين شريط العناوين في شريط أدوات الكروم الرئيسي.
ملاحظة: لا يمكن للتطبيقات المعبأة استخدام إجراءات المتصفح
1.1. التكوين في MAYESTEST.JSON
تسجيل المتصفح:
{"name": "Extension" ، ... "browser_action": {"default_icon": "Images/ICON19.PNG" ، // اختياري "default_title": "Google Mail" ، // اختياري ؛ يظهر في Tooltip "default_popup": "popup.html" // اختياري} ، ...}1.2. وصف عنصر التكوين
(1) default_icon
أيقونة 19 * 19px
قم بتعديل حقل default_icon في بيان Browser_Action ، أو استدعاء طريقة seticon ().
chrome.browseraction.seticon (تفاصيل الكائن)
تعيين أيقونة عمل المتصفح. يمكن أن يكون الرمز طريقًا إلى صورة أو بكسل معلومات مستخرجة من عنصر قماش. سواء كان مسار أيقونة أو Imagedata من قماش ، يجب تحديد هذه الخاصية.
(2) default_title
قم بتعديل حقل default_title في بيان Browser_Action ، أو استدعاء طريقة Settitle (). يمكنك تحديد سلسلة محلية لحقل Default_Title ؛ انقر فوق التدويل لعرض التفاصيل.
chrome.browseraction.settitle (تفاصيل الكائن)
قم بتعيين عنوان إجراء المستعرض ، وسيتم عرض ذلك في Tooltip.
(3) شارة
يمكن لتصرفات المتصفح عرض شارة - عرض بعض النص على الرمز. يمكن لشارات ببساطة تحديث بعض معلومات موجه لحالة التمديد الصغيرة لإجراء المتصفح.
نظرًا لأن مساحة الشارة محدودة ، فإنها تدعم فقط أقل من 4 أحرف.
لتعيين نص شارة ولون ، يمكنك استخدام setBadgetext () و setBadgebackgroundColor () على التوالي.
chrome.browseraction.setbadgetext (تفاصيل الكائن)
اضبط نص شارة المتصفح ، ويتم عرض الشارة على الرمز.
setBadgebackgroundColorChrome.BrowserAction.setBadgebackgroundColor (تفاصيل الكائن)
ضبط لون الخلفية من الشارة.
(4) default_popup
نصائح الفقاعة المنبثقة
قم بتعديل حقل Default_Popup في بيان Browser_Action لتحديد ملف HTML ، أو استدعاء طريقة setPopup ().
chrome.browseraction.setpopup (تفاصيل الكائن)
يعين HTML معروضة في المنبثقة عند النقر فوق إجراءات المتصفح.
1.3. نصائح
للحصول على أفضل عرض ، اتبع المبادئ التالية:
تأكد من أن إجراءات المتصفح تستخدم فقط في السيناريوهات التي يكون لها معظم مواقع الويب متطلبات وظيفية.
تأكد من عدم استخدام إجراءات المتصفح في عدد قليل من صفحات الويب التي لها وظائف. يرجى استخدام إجراءات الصفحة لهذا السيناريو.
تأكد من أن حجم الرمز الخاص بك يجب أن يشغل مساحة 19x19 بكسل. يجب أن تبدو أيقونة عمل المتصفح أكبر وأثقل من أيقونة إجراء الصفحة.
لا تحاول تقليد أيقونات وجع Google Chrome ، وقد يكون أدائها مشكلة في ظل موضوعات مختلفة ، ويجب أن يكون التمديد أكثر جاذبية.
حاول استخدام قناة ألفا وتنعيم حواف الرموز الخاصة بك ، لأن العديد من المستخدمين يستخدمون السمات ، يجب أن تعمل الرموز الخاصة بك بشكل جيد في خلفيات مختلفة.
لا تستمر في وميض الرمز الخاص بك ، إنه مسيء للغاية.
2. انقر بزر الماوس الأيمن فوق القائمة
يمكنك اختيار إضافة عنصر قائمة النقر بزر الماوس الأيمن لأنواع مختلفة من الكائنات (مثل الصور والروابط والصفحات).
يمكنك إضافة عدة عناصر قائمة النقر بزر الماوس الأيمن حسب الحاجة. سيتم دمج عناصر قائمة النقر بزر الماوس الأيمن المتعدد في امتداد تلقائيًا بواسطة Chrome ووضعها في القائمة الثانوية لاسم التمديد المقابل.
يمكن أن تظهر قائمة النقر بزر الماوس الأيمن في أي مستند (أو إطارات في المستند) أو حتى في ملف محلي (مثل الملف: // أو Chrome: //). إذا كنت ترغب في التحكم في عرض قائمة النقر بزر الماوس الأيمن في مستندات مختلفة ، فيمكنك تحديد DocumentUrlpatterns عند الاتصال Create () و update ().
2.1. التكوين في MAYESTEST.JSON
إعلان إذن "ContentMenus" في البيان. في الوقت نفسه ، يجب عليك تحديد أيقونة 16x16 لاستخدامها كشعار قائمة النقر بزر الماوس الأيمن. على سبيل المثال:
{"name": "My Extension" ، ... "أذونات": ["ContextMenus"] ، "الرموز": {"16": "icon-bitty.png" ، "48": "icon-small.png" ، "128": "icon-large.png" ، ...}3. إخطارات سطح المكتب
أبلغ المستخدم أن شيئًا مهمًا قد حدث. سيتم عرض إشعارات سطح المكتب خارج نافذة المتصفح. الصورة أدناه توضح تأثير الإخطارات. على منصات مختلفة ، سيكون تأثير عرض الإخطارات مختلفًا قليلاً.
استخدم مباشرة قطعة صغيرة من رمز JavaScript لإنشاء إشعارات ، وبالطبع ، يمكن أيضًا القيام به من خلال صفحة HTML منفصلة في حزمة الامتداد.
3.1. التكوين في MAYESTEST.JSON
{"الاسم": "ملحق" ، ... "أذونات": ["الإخطارات"] ، ...}3.2. التفاعل مع الصفحة الموسعة:
استخدم getBackgroundPage () و getViews () لإنشاء تفاعلات في الإخطارات وصفحات التمديد
// استدعاء طريقة الصفحة الموسعة في الإخطار ... chrome.extension.getBackgroundPage (). dothing () ؛ // استدعاء طريقة الإخطار من صفحة التمديد ... chrome.extension.getViews ({type: "الإخطار"}). foreach (function (win) {win.dootherthing () ؛}) ؛4. Omnibox
تتيح لك واجهة تطبيق Omnibox تسجيل كلمة رئيسية مع شريط العناوين الخاص بـ Google Chrome ، والذي يسمى أيضًا Omnibox.
يجب تضمين حقل الكلمة الرئيسية Omnibox في البيان. يلزم تحديد أيقونة ذات وحدات بكسل من 16 × 16 بحيث يتم عرضها في شريط العناوين عندما يدخل المستخدم كلمة رئيسية.
4.1. التكوين في MAYESTEST.JSON
{"name": "امتداد Aaron's Omnibox" ، "الإصدار": "1.0" ، "Omnibox": {"الكلمة الرئيسية": "Aaron"} ، "adicons": {"16": "16-full-color.png"} ،يقوم Chrome تلقائيًا بإنشاء أيقونات مع 16 × 16 بكسل في وضع رمادي. يجب عليك تقديم نسخة كاملة من الأيقونة بحيث يمكن استخدامها في سيناريوهات أخرى.
5. صفحة الخيارات
لكي يقوم المستخدمون بإعداد ملحقاتك ، قد تحتاج إلى توفير صفحة خيار. إذا قمت بتقديم صفحة خيار ، فسيتم توفير رابط على صفحة إدارة الامتداد Chrome: // extensions. انقر فوق رابط الخيارات لفتح صفحة الخيارات الخاصة بك.
5.1. التكوين في MAYESTEST.JSON
{"name": "Extension" ، ... "Options_Page": "Options.html" ، ...}6. الكتابة فوق صفحات محددة
باستخدام صفحات بديلة ، يمكنك استبدال بعض الصفحات المحددة في Chrome بشكل افتراضي واستخدام الصفحات التي يوفرها الامتداد بدلاً من ذلك.
6.1. التكوين في MAYESTEST.JSON
{"name": "امتداد بلدي" ، ... "chrome_url_overrides": {"pageToOverride": "mypage.html"} ، ...}7. إجراءات الصفحة
استخدم إجراءات الصفحة لوضع الرمز في شريط العناوين.
إذا كنت تريد أن تكون أيقونة التمديد مرئية دائمًا ، فاستخدم إجراء المتصفح.
لا يمكن للتطبيقات المعبأة استخدام إجراءات الصفحة.
7.1. التكوين في MAYESTEST.JSON
{"name": "My Extension" ، ... "Page_Action": {"default_icon": "icons/foo.png" ، // اختياري "default_title": "do Action" ، // اختياري ؛ يظهر في Tooltip "default_popup": "popup.html" // اختياري} ، ...}7.2. وصف عنصر التكوين
مثل إجراءات المتصفح ، يمكن أن تحتوي إجراءات الصفحات على أيقونات ورسائل سريعة ونوافذ منبثقة. لكن لا توجد شارة
استخدم الأساليب عرض () وإخفاء () لإظهار وإخفاء إجراءات الصفحة. افتراضيًا ، يتم إخفاء إجراء الصفحة. عندما تريد عرضها ، تحتاج إلى تحديد صفحة علامة التبويب التي يوجد بها الرمز. سيبقى الرمز مرئيًا حتى تغلق صفحة علامة التبويب أو تبدأ في عرض عنوان URL مختلف (مثل: ينقر المستخدم على اتصال)
7.3. نصائح
استخدم إجراء الصفحة فقط لبضع صفحات ؛
لا تستخدمه لمعظم الصفحات ، استخدم إجراءات المتصفح بدلاً من ذلك إذا كانت الوظيفة تتطلب ذلك.
لا تدع الرموز تظهر دائمًا في الرسوم المتحركة عندما تكون على ما يرام ، فسيكون ذلك مزعجًا للغاية.
8. الموضوع
الموضوع هو امتداد خاص يمكن استخدامه لتغيير مظهر المتصفح بأكمله. يشبه السمة الامتداد القياسي ، ولكن لا يمكن أن يحتوي السمة على رمز JavaScript أو HTML.
8.1. التكوين في MAYESTEST.JSON
{"الإصدار": "2.6" ، "name": "camo them" ، "theme": {"Images": {"theme_frame": "Images_frame_camo.png" ، "theme_frame_overlay": "Images/theme_frame_stripe.png" ، "theme_toolbar": "theme_ntp_background": "Images/theme_ntp_background_norepeat.png" ، "theme_ntp_attribution": : [36 ، 70 ، 0] ، "ntp_section": [207 ، 221 ، 192] ، "button_background": [255 ، 255 ، 255]} ، "tints": {"buttons": [0.33 ، 0.5 ، 0.47]} ،