👨‍🎓 🖍️ 🎯 Ursprungsübergreifende Leseblockierung (CORB) in Chrome-Erweiterungen 🚌 🎅 📲

Wenn Sie einmal eine Erweiterung für Chrome entwickelt haben, stellt sich möglicherweise heraus, dass diese nicht mehr funktioniert.

Der Grund dafür ist, dass ab dem letzten Jahr Cross-Origin-Anfragen von Inhaltsskripten im Chrome-Browser blockiert werden. Dies bedeutet, dass eine solche Anforderung dank Cross-Origin Read Blocking (CORB) blockiert wird, wenn Ihre Erweiterung direkt über das Inhaltsskript auf eine Drittanbieter-API zugreift.

Die empfohlene Methode zur Lösung des Blockierungsproblems besteht darin, Anforderungen vom Inhaltsskript an das Hintergrundskript zu übertragen. Beispiel aus der Dokumentation:

Altes Inhaltsskript:

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 => ...)

Neues Inhaltsskript:

chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

Neues Hintergrundskript:

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;  // Will respond asynchronously.
    }
  });

Achten Sie auch darauf, dass Sie keinen Proxy aus einem Hintergrundskript erstellen sollten, d. H. Die URL sollte nicht als Nachricht vom Inhaltsskript an das Hintergrundskript gesendet werden, um Daten zu empfangen. Es lohnt sich jedoch, die URL im Hintergrundskript anhand der Daten in der Nachricht zu bestimmen. Im obigen Beispiel wird die URL für die Anforderung aus den Parametern contentScriptQuery und itemId bestimmt . Ein Beispiel für eine „schlechte“ Nachricht aus der Dokumentation:

{
  contentScriptQuery: "fetchUrl",
  url: "https://example.com/any/path/or/site/allowed/here"
}

PS: Ich

entwickle Erweiterungen für Firefox und Chrome, aber der Hauptbrowser ist Firefox. Ich überprüfe die Leistung in Chrome, wenn ich eine neue Version der Erweiterung herunterlade. Neulich habe ich festgestellt, dass eine meiner Erweiterungen dank CORB nicht mehr funktioniert. Überprüfen Sie Ihre Erweiterungen, damit Sie nicht überrascht werden.

Ursprungsübergreifende Leseblockierung (CORB) in Chrome-Erweiterungen

More articles: