أقوم بتطوير ملحقات لـ Chrome لفترة طويلة وخلال هذه الفترة ، انتقلت من النص البرمجي للمستخدم Greasemonkey إلى تطبيق Angular كامل في غلاف تمديد الكروم. مهمتي هي أن أقوم بتصحيح بعض المواقع التي تعمل بالفعل من أجل تغيير وظائفها وأتمتة بعض العمليات على هذه المواقع. في بعض الأحيان ينمو تطبيقي على نطاق واسع ويصبح من الصعب دعم امتداد js العادي (هناك الكثير من الإعدادات في التطبيق ، ووظائف CRUD ، وما إلى ذلك). ثم يأتي الزاوي إلى الإنقاذ.
في هذه المقالة ، سوف أخبرك كيف صنعت صداقات مع
Chrome Extension و
Angular CLI ،
وأعدت عملية التطوير ، فضلاً عن الصعوبات التي واجهتها وكيفية حلها.
قم بإنشاء مجلد جديد وبدء تطبيق جديد فيه.
mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true
في مرحلة التطوير ، تنشئ
Angular ملف html ديناميكيًا يحدث فيه التطوير ، ويحتاج امتداد Chrome إلى تغذية ملف html ثابت لرؤية نتيجة العمل. بالطبع ، يمكنك تجميع مشروع Angulyarovsk بشكل منفصل ومن ثم إنشاء إصدار البنية بالإضافة إلى ذلك ، لكن سيكون من المناسب إذا حدث ذلك تلقائيًا.
بعد إنشاء تطبيق جديد ، انتقل إلى مجلد الواجهة الأمامية وفي ملف package.json في قسم البرامج النصية أضف نصًا جديدًا لإنشاء مشروعنا
"developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
انتبه إلى
deploy-url و
base-href .
ثم ، في جذر المشروع ، قم بإنشاء مجلد
ملحق آخر وإنشاء ملف
extension.js فيه ، والذي سيكون البرنامج النصي
للخلفية الخاصة بالملحق الخاص بنا. هيكل المشروع الحالي:
| new-project/ | | extension/ | | | extension.js | | frontend/ | | | ...
محتوى
extension.js const ANGULAR_HTML_URL = "../../frontend/dist/frontend/index.html"; chrome.browserAction.onClicked.addListener(function () { chrome.tabs.create({ url: chrome.runtime.getURL(ANGULAR_HTML_URL) }); });
سيكون هذا
browserAction ، الذي سيفتح علامة تبويب جديدة مع تطبيقنا الزاوي ، والتي سيتم تخزينها في شكل تجميع بالفعل على طول هذا المسار.
أضف manifest.json إلى مشروعنا { "manifest_version": 2, "name": "Simple Chrome Ext", "description": "Simple Chrome Extension as an example", "version": "1.00", "author": "Bogdan", "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "background": { "persistent": true, "scripts": ["/extension/extension.js"] }, "browser_action": { "default_title": "Chrome ext" } }
الآن يمكننا تجميع مشروعنا في امتداد. نحن نذهب في
chrome: // extensions / ، وقم
بتمكين وضع المطور وحدد
Download unpacked extension .
الراحة هي أن لدينا تقريبا إعادة شحن الساخنة. أطلقنا
ng build مع علامة
المراقبة وعندما يتغير الرمز ، سيتم إعادة بناء المشروع وسيتم استبدال ملفات js. هذا هو ، على صفحة التمديد ، نحتاج فقط إلى إعادة تحميل الصفحة وسيتم التقاط جميع التحديثات. هذا يسرع كثيرا في تطوير الإضافات.
النقطة الأخرى التي أكلت فيها الكلب هي أنه في تكوين التوجيه:
{ useHash: true }
وأيضًا سنعود أعلاه ، بناءً على
القاعدة التي سجلناها كـ
/frontend/dist/frontend/index.html؟/ - الانتباه إلى علامة استفهام قبل
الشرطة المائلة الأخيرة. الحقيقة هي أنه في بعض الأنظمة ، عندما تنقر على الروابط في تطبيق Angular ، يتعطل كل شيء بدون هذه العلامة. يبدو أن خادم الويب الثابت لمحرك chrome ينظر إلى تغيير عنوان URL كطلب إلى ملف آخر (على الرغم من useHash: true) وعند تحديث الصفحة ، قام بإرجاع خطأ 404. فقط في هذه المجموعة تمكنت من تحقيق التشغيل المستقر على جميع الأنظمة.
دعنا نعود إلى
package.json تطبيقنا وإضافة برنامج نصي آخر
"prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
سيكون هذا البرنامج النصي لبناء تطبيقنا لنسخة الإنتاج.
في سوق Chrome الإلكتروني ، يتم نشر أرشيف مضغوط مع الإضافة ولتسهيل التجميع الذي قمتُ بإعداد برنامج نصي لهذه الأغراض
شفرة المصدر يمكن العثور عليها
هنا .
المجموع: لقد أنشأنا مجموعة ما قبل التطوير لـ Angular Chrome Extension مع التوجيه الصحيح وتحديث / بناء التطبيق.
ملاحظة: من أجل التخلص من هذا المسار
/ frontend / dist / frontend / ، يمكنك تهيئة البيئة وتحديد المسار في مجموعة الإنتاج بشكل مختلف ، لكن هذه ليست النقطة الأساسية.