כיצד לעבור ל- Manifest V3 עבור הרחבות Chrome

כיצד לעבור ל- Manifest V3 עבור הרחבות Chrome

כיצד לעבור ל-Manfest V3 עבור הרחבות Chrome PlatoBlockchain Data Intelligence. חיפוש אנכי. איי.

אמנם אני לא מתכנת הרחבות רגיל של Chrome, אבל בהחלט קידדתי מספיק הרחבות ויש לי תיק פיתוח אתרים רחב מספיק כדי לדעת איך לעקוף את המשימה. עם זאת, רק לאחרונה, לקוח דחה את אחת מההרחבות שלי מכיוון שקיבלתי משוב שההרחבה שלי "מיושן".

בעודי מתאמץ להבין מה לא בסדר, טאטאתי את המבוכה שלי מתחת לשטיח ומיד התחלתי בצלילה עמוקה שלי חזרה לעולם של תוספי Chrome. לרוע המזל, המידע על Manifest V3 היה דל והיה לי קשה להבין במהירות על מה המעבר הזה.

מיותר לציין שעם עבודה ממתינה, נאלצתי לנווט בקפידה תיעוד מפתחי Chrome של גוגל ולהבין דברים בעצמי. בזמן שסיימתי את העבודה, לא רציתי שהידע והמחקר שלי בתחום הזה יאבדו והחלטתי לשתף במה שהלוואי והייתה לי גישה קלה אליו במסע הלמידה שלי.

מדוע המעבר למניפסט 3 חשוב

Manifest V3 הוא API שגוגל תשתמש בו בדפדפן Chrome שלה. הוא היורש של ממשק ה-API הנוכחי, Manifest V2, והוא קובע את אופן האינטראקציה של תוספי Chrome עם הדפדפן. Manifest V3 מציג שינויים משמעותיים בכללי ההרחבות, שחלקם יהיו עמוד התווך החדש מ-V2 שהתרגלנו אליו.

המעבר למניפסט V3 ניתן לסכם כך:

  1. המעבר נמשך מאז 2018.
  2. Manifest V3 יתחיל להופיע באופן רשמי בינואר 2023.
  3. עד יוני 2023, תוספים שמריצים את Manifest V2 לא יהיו זמינים יותר בחנות האינטרנט של Chrome.
  4. תוספים שאינם עומדים בכללים החדשים שהוצגו ב-Manfest V3 יוסרו בסופו של דבר מחנות האינטרנט של Chrome.

אחת המטרות העיקריות של Manifest V3 היא להפוך את המשתמשים לבטוחים יותר ולשפר את חוויית הדפדפן הכוללת. בעבר, תוספי דפדפן רבים הסתמכו על קוד בענן, כלומר זה יכול להיות קשה לעשות זאת להעריך אם הארכה מסוכנת. מניפסט V3 שואפת לטפל בזה על ידי דרישה שהרחבות יכילו את כל הקוד שהם יפעילו, מה שמאפשר לגוגל לסרוק אותם ולזהות סיכונים פוטנציאליים. זה גם מאלץ תוספים לבקש רשות מגוגל עבור השינויים שהם יכולים ליישם בדפדפן.

חשוב להתעדכן במעבר של גוגל ל-Manfest V3 מכיוון שהוא מציג כללים חדשים לתוספים שמטרתם לשפר את בטיחות המשתמש ואת חוויית הדפדפן הכוללת, ותוספים שאינם עומדים בכללים אלה יוסרו בסופו של דבר מהאינטרנט של Chrome חֲנוּת.

בקיצור, כל העבודה הקשה שלך ביצירת הרחבות שהשתמשו ב- Manifest V2 עלולה להיות לשווא אם לא תבצע את המעבר הזה בחודשים הקרובים.

ינואר 2023 יוני 2023 ינואר 2024
התמיכה בהרחבות Manifest V2 תבוטל בערוצי Canary, Dev ובטא של Chrome. חנות האינטרנט של Chrome לא תאפשר עוד לפרסם תוספי Manifest V2 כשהנראות מוגדרת כציבורי. חנות האינטרנט של Chrome תסיר את כל ההרחבות הנותרות של Manifest V2.
Manifest V3 יידרש עבור התג 'מומלץ' בחנות האינטרנט של Chrome. תוספים קיימים של Manifest V2 שמתפרסמים וגלויים לציבור יהפכו ללא רשומים. התמיכה במניפסט 2 תסתיים עבור כל הערוצים של Chrome, כולל הערוץ היציב, אלא אם כן ערוץ הארגוני מורחב.

ההבדלים העיקריים בין Manifest V2 ו- V3

ישנם הבדלים רבים בין השניים, ולמרות שאני ממליץ לך בחום לקרוא מדריך "הגירה למניפסט V3" של Chrome, הנה סיכום קצר ומתוק של נקודות מפתח:

  1. עובדי שירות החלף דפי רקע במניפסט V3.
  2. שינוי בקשת הרשת מטופל עם החדש declarativeNetRequest ממשק API במניפסט V3.
  3. ב- Manifest V3, הרחבות יכולות להפעיל רק JavaScript הכלול בחבילה שלהם ואינן יכולות להשתמש בקוד המתארח מרחוק.
  4. Manifest V3 מציג promise תמיכה בשיטות רבות, אם כי התקשרות חוזרת עדיין נתמכת כחלופה.
  5. הרשאות מארח ב- Manifest V3 הן רכיב נפרד ויש לציין אותן ב- "host_permissions" שדה.
  6. מדיניות אבטחת התוכן ב- Manifest V3 היא אובייקט עם חברים המייצגים הקשרים חלופיים של מדיניות אבטחת תוכן (CSP), ולא מחרוזת כפי שהייתה ב- Manifest V2.

במניפסט פשוט של תוסף Chrome שמשנה את הרקע של דף אינטרנט, זה עשוי להיראות כך:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}
// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

אם אתה מוצא שחלק מהתגים שלמעלה נראים לך זרים, המשך לקרוא כדי לגלות בדיוק מה אתה צריך לדעת.

כיצד לעבור בצורה חלקה ל-Manfest V3

סיכמתי את המעבר ל- Manifest V3 בארבעה תחומים מרכזיים. כמובן, בעוד שיש הרבה פעמונים ושריקות במניפסט V3 החדש שצריך ליישם מהמניפסט V2 הישן, יישום שינויים בארבעת התחומים האלה יביא את תוסף Chrome שלך ​​בדרך הנכונה למעבר בסופו של דבר.

ארבעת תחומי המפתח הם:

  1. עדכון המבנה הבסיסי של המניפסט שלך.
  2. שנה את הרשאות המארח שלך.
  3. עדכן את מדיניות אבטחת התוכן.
  4. שנה את הטיפול בבקשות הרשת שלך.

עם ארבעת התחומים האלה, היסודות של המניפסט שלך יהיו מוכנים למעבר ל- Manifest V3. הבה נסתכל על כל אחד מההיבטים המרכזיים הללו בפירוט ונראה כיצד נוכל לפעול להגנת עתיד של תוסף Chrome שלך ​​מהמעבר הזה.

עדכון המבנה הבסיסי של המניפסט שלך

עדכון המבנה הבסיסי של המניפסט שלך הוא השלב הראשון במעבר ל- Manifest V3. השינוי החשוב ביותר שתצטרך לעשות הוא שינוי הערך של "manifest_version" אלמנט ל 3, הקובע שאתה משתמש בערכת התכונות Manifest V3.

אחד ההבדלים העיקריים בין Manifest V2 ו-V3 הוא החלפת דפי רקע בעובד שירות הרחבה יחיד ב-Manfest V3. יהיה עליך לרשום את ה-Service Worker תחת "background" שדה, באמצעות ה "service_worker" מפתח וציין קובץ JavaScript יחיד. למרות שמניפסט V3 אינו תומך במספר סקריפטים ברקע, באפשרותך להכריז על ה-Service Worker כמודול ES על ידי ציון "type": "module", המאפשר לך לייבא קוד נוסף.

במניפסט V3, ה "browser_action" ו "page_action" נכסים מאוחדים ליחידה "action" תכונה. תצטרך להחליף את המאפיינים האלה ב "action" במניפסט שלך. באופן דומה, ה "chrome.browserAction" ו "chrome.pageAction" ממשקי API מאוחדים ל-API יחיד "Action" ב- Manifest V3, ותצטרך לעבור ל-API זה.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},
// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

בסך הכל, עדכון המבנה הבסיסי של המניפסט שלך הוא שלב מכריע בתהליך המעבר ל- Manifest V3, מכיוון שהוא מאפשר לך לנצל את התכונות והשינויים החדשים שהוצגו בגרסה זו של ה-API.

שנה את הרשאות המארח שלך

השלב השני במעבר ל-Manfest V3 הוא שינוי הרשאות המארח שלך. ב- Manifest V2, אתה מציין הרשאות מארח ב- "permissions" שדה בקובץ המניפסט. ב- Manifest V3, הרשאות מארח הן אלמנט נפרד, ועליכם לציין אותן ב- "host_permissions" שדה בקובץ המניפסט.

להלן דוגמה כיצד לשנות את הרשאות המארח שלך:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]
// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

עדכן את מדיניות אבטחת התוכן

כדי לעדכן את ה-CSP של תוסף Manifest V2 שלך כך שיתאים ל-Manfest V3, תצטרך לבצע כמה שינויים בקובץ המניפסט שלך. במניפסט V2, ה-CSP צוין כמחרוזת ב- "content_security_policy" שדה המניפסט.

במניפסט V3, ה-CSP הוא כעת אובייקט עם חברים שונים המייצגים הקשרים חלופיים של CSP. במקום סינגל "content_security_policy" שדה, כעת תצטרך לציין שדות נפרדים עבור "content_security_policy.extension_pages" ו "content_security_policy.sandbox", בהתאם לסוג דפי ההרחבה שבהם אתה משתמש.

עליך גם להסיר כל הפניות לדומיינים חיצוניים ב- "script-src", "worker-src", "object-src", ו "style-src" הנחיות אם הן קיימות. חשוב לבצע עדכונים אלה ל-CSP שלך על מנת להבטיח את האבטחה והיציבות של התוסף שלך ב- Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"
// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

שנה את הטיפול בבקשות הרשת שלך

השלב האחרון במעבר ל-Manfest V3 הוא שינוי הטיפול בבקשות הרשת שלך. במניפסט V2, היית משתמש ב- chrome.webRequest API לשינוי בקשות רשת. עם זאת, ממשק API זה מוחלף במניפסט V3 ב- declarativeNetRequest ה-API.

כדי להשתמש ב-API החדש הזה, תצטרך לציין את declarativeNetRequest הרשאה במניפסט שלך ועדכן את הקוד שלך לשימוש ב-API החדש. הבדל מרכזי אחד בין שני ממשקי ה-API הוא שה- declarativeNetRequest ממשק API דורש ממך לציין רשימה של כתובות שנקבעו מראש לחסימה, במקום להיות מסוגל לחסום קטגוריות שלמות של בקשות HTTP כפי שניתן עם chrome.webRequest ה-API.

חשוב לבצע את השינויים האלה בקוד שלך כדי להבטיח שהתוסף שלך ימשיך לתפקד כראוי תחת Manifest V3. הנה דוגמה לאופן שבו היית משנה את המניפסט שלך לשימוש ב- declarativeNetRequest ממשק API במניפסט V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]
// Manifest V3 "permissions": [ "declarativeNetRequest"
]

תצטרך גם לעדכן את קוד ההרחבה שלך כדי להשתמש ב- declarativeNetRequest API במקום ה chrome.webRequest ה-API.

היבטים נוספים שאתה צריך לבדוק

מה שכיסיתי הוא רק קצה הקרחון. כמובן, אם הייתי רוצה לכסות הכל, יכולתי להיות כאן ימים שלמים ולא יהיה טעם לקבל את המדריכים למפתחי Chrome של גוגל. בעוד שמה שסיקרתי יבטיח לך מספיק עתיד כדי לחמש את תוספי Chrome שלך ​​במעבר הזה, הנה כמה דברים אחרים שאולי תרצה להסתכל עליהם כדי להבטיח שהתוספים שלך פועלים בראש המשחק שלהם.

  • העברת סקריפטים ברקע להקשר הביצוע של Service Worker: כפי שהוזכר קודם לכן, Manifest V3 מחליף את דפי הרקע ב-Service Worker של הרחבה יחידה, כך שייתכן שיהיה צורך לעדכן סקריפטים ברקע כדי להתאים להקשר הביצוע של Service Worker.
  • איחוד ה **chrome.browserAction** ו **chrome.pageAction** ממשקי API: שני ממשקי ה-API השווים הללו מאוחדים ל-API יחיד ב-Manfest V3, כך שייתכן שיהיה צורך לעבור ל-Action API.
  • העברת פונקציות המצפה להקשר רקע של Manifest V2: האימוץ של עובדי שירות במניפסט V3 אינו תואם לשיטות כמו chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), ו chrome.extension.getViews(). ייתכן שיהיה צורך לעבור לעיצוב המעביר הודעות בין הקשרים אחרים לבין עובד השירות ברקע.
  • העברת בקשות CORS בסקריפטים של תוכן לעובד השירות ברקע: ייתכן שיהיה צורך להעביר בקשות CORS בסקריפטים של תוכן לעובד ברקע כדי לעמוד ב- Manifest V3.
  • מעבר מביצוע קוד חיצוני או מחרוזות שרירותיות: Manifest V3 כבר לא מאפשר ביצוע של לוגיקה חיצונית באמצעות chrome.scripting.executeScript({code: '...'}), eval(), ו new Function(). ייתכן שיהיה צורך להעביר את כל הקוד החיצוני (JavaScript, WebAssembly, CSS) לחבילת ההרחבה, לעדכן הפניות לסקריפט ולסגנון כדי לטעון משאבים מחבילת ההרחבה ולהשתמש chrome.runtime.getURL() כדי לבנות כתובות אתרים של משאבים בזמן ריצה.
  • עדכון שיטות סקריפטים ו-CSS מסוימות ב-Tabs API: כפי שהוזכר קודם לכן, מספר שיטות עוברות מ-Tabs API ל-Scripting API ב- Manifest V3. ייתכן שיהיה צורך לעדכן כל קריאות לשיטות אלה כדי להשתמש בממשק ה-API הנכון של Manifest V3.

ועוד רבים!

אתה מוזמן להקדיש זמן כדי להתעדכן בכל השינויים. אחרי הכל, השינוי הזה הוא בלתי נמנע ואם אתה לא רוצה שהרחבות Manifest V2 שלך יאבדו עקב הימנעות מהמעבר הזה, אז הקדישו זמן מה להתחמש בידע הדרוש.

מצד שני, אם אתה חדש בתכנות הרחבות לכרום ומחפש להתחיל, דרך מצוינת לעשות זאת היא לצלול לתוך עולם הכלים למפתחי אינטרנט של כרום. עשיתי זאת באמצעות קורס בנושא לימוד קישורין, מה שהעלה אותי למהירות די מהר. ברגע שיש לך את הידע הבסיסי הזה, חזור למאמר זה ותרגם את מה שאתה יודע ל Manifest V3!

אז איך אשתמש בתכונות ב- Manifest V3 החדש בעתיד?

ובכן, מבחינתי, המעבר ל- Manifest V3 והסרת ה- chrome.webRequest נראה כי ה-API מרחיק את ההרחבות ממקרי שימוש ממוקדי נתונים (כגון חוסמי פרסומות) לשימושים יותר פונקציונליים ומבוססים על יישומים. לאחרונה התרחקתי מפיתוח יישומים מכיוון שזה יכול להיות די עתירת משאבים לפעמים. עם זאת, ייתכן שהשינוי הזה הוא מה שמחזיר אותי!

העלייה של כלי בינה מלאכותית בתקופה האחרונה, רבים עם ממשקי API זמינים לשימוש, עוררה טונות של יישומי SaaS חדשים ורעננים. באופן אישי, אני חושב שזה מגיע בזמן מושלם עם המעבר לתוספי Chrome מבוססי יישומים יותר! בעוד שרבים מההרחבות הישנות יותר עלולות להימחק מהמעבר הזה, הרבה תוספים חדשים שנבנו סביב רעיונות SaaS חדשניים יבואו לתפוס את מקומם.

לפיכך, זהו עדכון מרגש לקפוץ עליו ולחדש הרחבות ישנות או לבנות חדשים! באופן אישי, אני רואה אפשרויות רבות בשימוש בממשקי API הכוללים שימוש ב-AI בהרחבות כדי לשפר את חווית הגלישה של המשתמש. אבל זה באמת רק קצה הקרחון. אם אתה מחפש באמת להיכנס לעניינים עם הרחבות מקצועיות משלך או לפנות לחברות כדי לבנות/לעדכן הרחבות עבורן, הייתי ממליץ שדרוג חשבון Gmail שלך על היתרונות שהוא נותן בשיתוף פעולה, פיתוח ופרסום הרחבות לחנות האינטרנט של Chrome.

עם זאת, זכור שהדרישות של כל מפתח שונות, אז למד מה אתה צריך כדי לשמור על התוספים הנוכחיים שלך, או על התוספים החדשים שלך!

בול זמן:

עוד מ טריקים של CSS