إذا كنت قد طورت لاحقًا إضافة لمتصفح Chrome ، فقد يتبين أنها توقفت عن العمل.والسبب هو أنه بدءًا من العام الماضي ، يتم حظر طلبات Cross-Origin من نصوص المحتوى في متصفح Chrome. وهذا يعني أنه في حالة وصول الإضافة إلى بعض واجهة برمجة التطبيقات التابعة لجهة خارجية مباشرةً من النص البرمجي للمحتوى ، فسيتم حظر هذا الطلب بفضل Cross-Origin Read Blocking (CORB)الطريقة الموصى بها لحل مشكلة الحظر هي نقل الطلبات من البرنامج النصي للمحتوى إلى البرنامج النصي للخلفية. مثال من الوثائق:نص المحتوى القديم:var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
encodeURIComponent(request.itemId);
fetch(url)
.then(response => response.text())
.then(text => parsePrice(text))
.then(price => ...)
.catch(error => ...)
نص محتوى جديد:chrome.runtime.sendMessage(
{contentScriptQuery: "queryPrice", itemId: 12345},
price => ...);
نص خلفية جديد:chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.contentScriptQuery == "queryPrice") {
var url = "https://another-site.com/price-query?itemId=" +
encodeURIComponent(request.itemId);
fetch(url)
.then(response => response.text())
.then(text => parsePrice(text))
.then(price => sendResponse(price))
.catch(error => ...)
return true;
}
});
انتبه أيضًا إلى حقيقة أنه لا ينبغي لك إنشاء وكيل من نص برمجي للخلفية ، أي لا يجب إرسال عنوان URL كرسالة من البرنامج النصي للمحتوى إلى البرنامج النصي للخلفية لتلقي البيانات ، ولكن من الجدير تحديد عنوان URL داخل البرنامج النصي للخلفية بناءً على البيانات الموجودة في الرسالة. وهكذا، في المثال أعلاه، يتم تحديد URL للطلب من contentScriptQuery و المعلمات itemId . مثال على رسالة "سيئة" مأخوذة من الوثائق:{
contentScriptQuery: "fetchUrl",
url: "https://example.com/any/path/or/site/allowed/here"
}
ملاحظة: أقومبتطوير امتدادات لمتصفح Firefox و Chrome ، ولكن المتصفح الرئيسي هو Firefox ، وأتحقق من الأداء في Chrome عندما أقوم بتنزيل إصدار جديد من الإضافة. في اليوم الآخر ، اكتشفت أن أحد امتداداتي توقفت عن العمل ، لقد خمنت ذلك بفضل CORB. تحقق من الامتدادات الخاصة بك حتى لا يكون هذا مفاجأة لك.