إنشاء ملحقات جوجل كروم مع مصفف ترجمات نتفليكس

أهدافنا

• إنشاء منطق التمديد
• تخزين الإعدادات في المتصفح التخزين المحلي
• التحميل التلقائي وتفعيل الامتدادات على صفحة Netflix فقط
• إنشاء قائمة منبثقة
• إنشاء نماذج مع خيارات الترجمة

المتطلبات:

• المعرفة الأساسية لـ HTML, CSS و JavaScript

ترسل Netflix من خلال واجهة برمجة التطبيقات الخاصة بها كل جملة ترجمة على حدة. يستخدم أنماط CSS لتصميم الترجمات. من خلال الوصول إلى DOM الصفحة يمكننا معالجة تلك الأنماط المستلمة باستخدام امتداد كروم.

البيان

أولاً، علينا أولاً إنشاء ملف البيان المسمى manifest.json. يخبر هذا الملف المتصفح عن إعداد الامتداد، مثل ملفات واجهة المستخدم، والبرامج النصية في الخلفية، والإمكانيات التي قد يمتلكها الامتداد.

فيما يلي بيان كامل.

 {
   "الاسم": "مصمم ترجمات نتفليكس",
   "الإصدار": "1.0",
   "الوصف": "مصمم ترجمات Netflix",
   "المؤلف": "تويستيزو",
   "أذونات": ["علامات تبويب"، "تخزين"، "تخزين"، "declarativeContent"، "https://*.netflix.com/"],
   "الخلفية": {
     "البرامج النصية": ["background.js"],
     "مستمر": خطأ
   },
   "Page_action": {
     "default_popup": "popup.html",
     "default_رمز": "logo.png"
   },
   "manifest_version": 2
 }

كما ترى، لدينا بعض المعلومات القياسية، مثل الاسم والإصدار والوصف والصفحة الرئيسيةالرابط والبيانالإصدار.

أحد الأجزاء المهمة في البيان هو قسم الأذونات. هذه مصفوفة تحتوي على عناصر يمكن لملحقنا الوصول إليها.

في حالتنا هذه، نحتاج إلى الوصول إلى علامات التبويب للعثور على علامة التبويب النشطة، وتنفيذ البرامج النصية وإرسال الرسائل بين واجهة المستخدم والامتداد. نحن بحاجة إلى تخزين لتخزين إعدادات الامتداد في المتصفح و declarativeContent لاتخاذ إجراءات بناءً على محتوى علامة التبويب. يسمح العنصر الأخير https://*.netflix.com/ بالوصول إلى الامتداد إلى نطاق netflix.com فقط.

تمتلك امتدادات كروم منطقًا منفصلًا عن واجهة المستخدم، لذا نحتاج إلى أن يكون لدينا خلفية.scripts، والتي تخبر الامتداد أين يمكن أن يجد منطقه. مستمر: خطأ يعني أن هذا النص البرمجي سيُستخدم فقط عند الحاجة. Page_action هو القسم الذي يحتوي على جزء واجهة المستخدم. لدينا هنا ملف HTML بسيط لقائمة منبثقة وشعار PNG للملحق.

منطق التمديد

علينا أولًا إعداد سلوكيات وقت التشغيل.onInstalled، وإزالة أي قواعد حالية (على سبيل المثال من الإصدارات القديمة) وإعلان وظيفة لإضافة قواعد جديدة. نحن نستخدم التخزين المحلي لإعدادات التخزين حتى نتمكن من تخصيص الإعدادات الافتراضية بعد تثبيت الامتداد.

سنستخدم ثلاثة معلمات نمط العنوان الفرعي:

• vPos - الموضع الرأسي من الأسفل [بكسل]
• الحجم - حجم الخط [بكسل]
• و اللون - لون الخط [HEX]

إنشاء الخلفية.js:

chrome.runtime.onInstalled.addListener()() => { {
chrome.storage.local.set({ vPos: 300, fSize: 24, fColor: "#FFFFFF"}));

chrome.declarativeContentent.onPageChanged.removeRules(غير محدد، () => { {
chrome.declarativeContentent.onPageChanged.addRules([
// مصفوفة بالقواعد
]);
});
});
```

هدف قاعدتنا هو تعطيل زر الامتداد على جميع النطاقات بخلاف netflix.com. ننشئ قاعدة جديدة مع أداة تتبع الصفحة الحالة الصفحة الشروط والإعلان إظهار الإجراء حيث سيتم تعيين قاعدة جديدة.

{
   الشروط: [
     جديد chrome.declarativeContentent.PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   الإجراءات: [جديد chrome.declarativeContentent.ShowPageAction()]]
 }

الخطوة التالية هي إضافة المُستمع tabs.onUpdated، والذي سينفذ البرنامج النصي الخاص بنا أثناء تحميل أو تحديث علامة التبويب النشطة.

{
   الشروط: [
     جديد chrome.declarativeContentent.PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   الإجراءات: [جديد chrome.declarativeContentent.ShowPageAction()]]
 }

أولاً، نتحقق أولاً من أن الحالة changeInfo.status لديها الحالة مكتمل. هذا يعني أنه تم تحميل موقع الويب في علامة التبويب هذه. ثم نحصل على الإعدادات من وحدة التخزين المحلية ونعلن عن البرنامج النصي الذي يجب تشغيله على علامة التبويب الحالية باستخدام tabId. أخيرًا، في رد النداء نرسل الرسالة مع الإعدادات من واجهة المستخدم إلى البرنامج النصي.

واجهة المستخدم الإضافية

لإنشاء قائمة منبثقة بالملحق مع النموذج، نقوم بإنشاء ثلاثة ملفات: منبثق.html و نافذة منبثقة.css بطبقات مرئية و منبثق.js مع منطق للتواصل بين القائمة والمعزولة الخلفية.js السيناريو

هدف واجهة المستخدم لدينا:

لدينا هنا نموذج HTML بسيط مع التحقق من الصحة المدمج: منبثق.html:

<code> <!DOCTYPE html>
 <html>
   <head>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />
     <link rel="stylesheet" href="popup.css" />
   </head>
   <body>
     <div class="container logo">
       مصمم ترجمات نتفليكس
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">الموضع الرأسي من الأسفل [بكسل]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">حجم الخط [بكسل]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">لون الخط [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">التغيير</button>
     <input type="hidden" name="trp-form-language" value="ar"/></form>
     <div class="container footer">
       © تويستيزو، 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

تصميم القائمة المنبثقة ليس الهدف من هذه المقالة، لذا أقترح عليك زيارة https://github.com/twistezo/netflix-subtitles-styler ونسخ كل نافذة منبثقة.css في ملف المشروع.

منطق واجهة المستخدم - منبثق.js:

const form = document.getElementById("popup-form");
const inputElements = ["vPos", "fSize", "fColor"];

chrome.storage.local.get(inputElements, data => {
inputElements.forEach(el => { {
document.getElementBylementById(el).value = data[el];
});
});

form.addEventEventListener("إرسال"، الحدث => { {
event.preventDefault();
const [vPos, fSize, fColor] = [...inputElements.map(el => event.target.el[el].value)];

chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
chrome.storage.local.set({ vPos, fSize, fColor });
chrome.tabs.executeScript(
علامات التبويب[0].id,
{
ملف: "script.js"
},
() => {
خطأ = chrome.runtime.lastError;
إذا (خطأ) "خطأ. معرف علامة التبويب: " + معرف علامة التبويب + ": ": " + JSON.stringify(خطأ);

    chrome.tabs.sendMessage(tabs[0].id, { vPos, fSize, fColor });
  }
);

});
});
```

في النص البرمجي أعلاه، نقوم بتحميل الإعدادات من وحدة التخزين المحلية ونرفقها بمدخلات النموذج. ثم نقوم بإنشاء مستمع إلى تقديم حدث مع دوال لحفظ الإعدادات في التخزين المحلي وإرسالها برسالة إلى النص البرمجي الخاص بنا. كما ترى، نستخدم التخزين المحلي في كل مكون. لا يمتلك امتداد كروم مساحة بيانات خاصة به، لذا فإن أبسط حل هو استخدام المساحة المحلية للمتصفح مثل التخزين المحلي. نستخدم أيضًا في كثير من الأحيان إرسال رسالة الوظيفة. إنه ناتج عن بنية ملحقات Chromme - فهي تحتوي على منطق منفصل عن واجهة المستخدم.

السيناريو

حان الوقت الآن لإنشاء السيناريو.js بمنطق التلاعب بأنماط ترجمات Netflix.

أولاً، نقوم بإنشاء على الرسالة مستمع لاستقبال الرسائل ذات الإعدادات من الامتداد.

chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // دالة لمعالجة الأنماط
 });

ثم نقوم في نفس الملف بإنشاء الدالة لتغيير أنماط Netflix المناسبة إلى أنماطنا في الوقت الفعلي.

changeSubtitititlesStyle = (vPos, fSize, fColor) => {.
console.log ("%cnetcflix-subtititles-styler : المراقب يعمل..."، "اللون: أحمر؛");

رد النداء = () => {
// .player-timedText
const subtitles = document.querySelector(".player-timedText");
إذا (العناوين الفرعية) {
subtititles.style.bottom = vPos + "px";

  // .player-timedtext> .player-timedtext-container [0]
  const firstChildContainer = .subtitles.firstChild;
  إذا (firstChildContainer) {
    // .player-timedtext > .player-timedtext-container [0] > div
    const firstChild = firstChildContainer.firstChild.firstChild;
    إذا (FirstChild) {
      firstChild.style.backgroundColor.backgroundColor = "شفاف";
    }

    // // .player-timedtext> .player-timedtext-container [1]
    const secondChildContainer = firstChildContainer.nextSibling;
    إذا (secondChildContainer) {
      لـ (const span of secondChildContainer.childNodes) {
        // // .player-timedtext> .player-timedtext-container [1] > span
        span.style.fontSize = fSize + "px";
        span.style.fontWeight = "عادي";
        span.style.color = fColor;
      }
      secondChildContainer.style.left = "0";
      secondChildContainer.style.right.style.right = "0";
    }
  }
}

};

const observer = جديد MutationObserver(callback);
Observer.observer.observe(document.body, {
الشجرة الفرعية: صحيح,
السمات: خطأ,
قائمة الأطفال: صحيح
});
};
```

بالنسبة لـ Netflix، في كل مرة يتلقى فيها جمل الترجمة كاملةً يقوم بتبديل جزء الترجمة فقط من DOM الصفحة. لذا علينا استخدام دالة مراقب مثل مراقب الطفراتوالذي سيؤدي إلى تشغيل تغيير نمط الترجمات في كل مرة عندما تتغير دالة DOM الصفحة. في معاودة الاتصال الدالة نرى معالجة بسيطة للأنماط. تحتوي الأسطر المعلقة على معلومات حول مكان العثور على الأنماط المناسبة.

وقت الجري

أفترض أنه ليس لديك حساب مطور في متجر Chrome الإلكتروني. لذا لتشغيل هذا الامتداد انتقل إلى chrome://extensions/ في متصفح كروم الخاص بك، انقر على تحميل غير معبأ، حدد المجلد الذي يحتوي على الامتداد وهذا كل شيء! بعد ذلك، انتقل بالطبع إلى صفحة Netflix لاختباره.

الاستنتاجات

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

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

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

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

روابط مفيدة:

• المستودع مع هذا المشروع https://github.com/twistezo/netflix-subtitles-styler
• دليل جوجل الرسمي https://developer.chrome.com/extensions/overview
• واجهة برمجة تطبيقات ملحقات كروم https://developer.chrome.com/extensions/api_index