Deze pagina is vertaald door de Cloud Translation API.

Zelfstudie: Migreren naar Manifest V2

Manifestversie 1 is in Chrome 18 afgekeurd en de ondersteuning ervoor zal worden afgebouwd volgens het ondersteuningsschema voor manifestversie 1. De wijzigingen van versie 1 naar versie 2 vallen onder twee brede categorieën: API-wijzigingen en beveiligingswijzigingen.

Dit document bevat checklists voor het migreren van uw Chrome-extensies van manifestversie 1 naar versie 2, gevolgd door meer gedetailleerde samenvattingen van wat deze wijzigingen inhouden en waarom ze zijn doorgevoerd.

Checklist voor API-wijzigingen

Gebruik je de eigenschap browser_actions of de ` chrome.browserActions API?
Vervang browser_actions door de enkelvoudige eigenschap browser_action .
Vervang chrome.browserActions door chrome.browserAction .
Vervang de eigenschap icons door default_icon .
Vervang de eigenschap name door default_title '.
Vervang de eigenschap popup door default_popup (en dit moet nu een tekenreeks zijn).
Gebruik je de eigenschap page_actions of de chrome.pageActions API?
Vervang page_actions door page_action .
Vervang chrome.pageActions door chrome.pageAction .
Vervang de eigenschap icons door default_icon .
Vervang de eigenschap name door default_title '.
Vervang de eigenschap popup door default_popup (en dit moet nu een tekenreeks zijn).
Gebruik je de eigenschap chrome.self ?
Vervang dit door chrome.extension .
Gebruik je de eigenschap Port.tab ?
Vervang dit door Port.sender .
Gebruik je de API's chrome.extension.getTabContentses() of chrome.extension.getExtensionTabs() ?
Vervang dit door chrome.extension.getViews( { "type" : "tab" } ) .
Gebruikt uw extensie een achtergrondpagina?
Vervang de eigenschap background_page door een eigenschap background .
Voeg een scripts of page eigenschap toe die de code voor de pagina bevat.
Voeg een persistent eigenschap toe en stel deze in op false om uw achtergrondpagina om te zetten in een evenementpagina.

Checklist voor beveiligingswijzigingen

Gebruik je inline scriptblokken in HTML-pagina's?
Verwijder de JavaScript-code binnen de <script> -tags en plaats deze in een extern JavaScript-bestand.
Gebruik je inline eventhandlers (zoals onclick, enz.)?
Verwijder ze uit de HTML-code, verplaats ze naar een extern JavaScript-bestand en gebruik in plaats daarvan addEventListener() .
Voegt uw extensie scripts toe aan webpagina's die toegang nodig hebben tot bronnen (zoals afbeeldingen en scripts) die in het pakket van de extensie zijn opgenomen?
Definieer de eigenschap web_accessible_resources en geef een lijst van de resources (en optioneel een afzonderlijk Content Security Policy voor die resources).
Integreert uw extensie externe webpagina's?
Definieer de sandbox- eigenschap.
Gebruikt uw code of bibliotheek eval() , new Function() , innerHTML , setTimeout() of op een andere manier strings met JavaScript-code die dynamisch worden geëvalueerd?
Gebruik JSON.parse() als je JSON-code naar een object wilt converteren.
Gebruik een CSP-vriendelijke bibliotheek, bijvoorbeeld AngularJS .
Voeg een sandbox-item toe aan je manifest en voer de betreffende code uit in de sandbox. Gebruik postMessage() om met de pagina in de sandbox te communiceren.
Laadt u externe code, zoals jQuery of Google Analytics?
Overweeg om de bibliotheek te downloaden en in je extensie te verpakken, en deze vervolgens vanuit het lokale pakket te laden.
Voeg het HTTPS-domein dat de bron aanbiedt toe aan de whitelist in het "content_security_policy"-gedeelte van uw manifest.

Samenvatting van API-wijzigingen

Manifest versie 2 introduceert een aantal wijzigingen in de API's voor browseracties en pagina-acties, en vervangt een aantal oude API's door nieuwere.

Wijzigingen in browseracties

De Browser Actions API introduceert enkele naamswijzigingen:

De eigenschappen browser_actions en chrome.browserActions zijn vervangen door hun enkelvoudige tegenhangers browser_action en chrome.browserAction .
Onder de oude eigenschap browser_actions bevonden zich de eigenschappen icons , name en popup . Deze zijn vervangen door:
default_icon voor het actiebadge-pictogram van de browser
default_name voor de tekst die in de tooltip verschijnt wanneer je met de muis over de badge beweegt.
default_popup voor de HTML-pagina die de gebruikersinterface voor de browseractie vertegenwoordigt (en dit moet nu een tekenreeks zijn, het mag geen object zijn).

Wijzigingen in pagina-acties

Net als bij de wijzigingen voor browseracties, is ook de API voor pagina-acties gewijzigd:

De eigenschappen page_actions en chrome.pageActions zijn vervangen door hun enkelvoudige tegenhangers page_action en chrome.pageAction .
Onder de oude eigenschap page_actions bevonden zich de eigenschappen icons , name en popup . Deze zijn vervangen door:
default_icon voor het actiebadge-pictogram van de pagina
default_name voor de tekst die in de tooltip verschijnt wanneer je met de muis over de badge beweegt.
default_popup voor de HTML-pagina die de gebruikersinterface voor de pagina-actie vertegenwoordigt (en dit moet nu een tekenreeks zijn, het mag geen object zijn).

Verwijderde en gewijzigde API's

Enkele extensie-API's zijn verwijderd en vervangen door nieuwe varianten:

De eigenschap background_page is vervangen door background .
De eigenschap chrome.self is verwijderd, gebruik in plaats daarvan chrome.extension .
De eigenschap Port.tab is vervangen door Port.sender .
De API's chrome.extension.getTabContentses() en chrome.extension.getExtensionTabs() zijn vervangen door chrome.extension.getViews( { "type" : "tab" } ) .

Samenvatting van de beveiligingswijzigingen

De overstap van manifestversie 1 naar versie 2 brengt een aantal beveiligingsgerelateerde wijzigingen met zich mee. Veel van deze wijzigingen vloeien voort uit de implementatie van Content Security Policy (CSP) door Chrome; lees meer over dit beleid om de implicaties ervan te begrijpen.

Inline scripts en gebeurtenisafhandelaars zijn niet toegestaan.

Vanwege het gebruik van Content Security Policy (CSP) is het niet langer mogelijk om <script> -tags inline in de HTML-inhoud te gebruiken. Deze moeten worden verplaatst naar externe JavaScript-bestanden. Daarnaast worden inline eventhandlers ook niet ondersteund. Stel bijvoorbeeld dat u de volgende code in uw extensie had:

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

Deze code zou een fout veroorzaken tijdens de uitvoering. Om dit op te lossen, verplaats je de inhoud van <script> -tag naar externe bestanden en verwijs je ernaar met een src='path_to_file.js' attribuut.

Op dezelfde manier zullen inline event handlers, een veelvoorkomend en handig hulpmiddel dat door veel webontwikkelaars wordt gebruikt, niet worden uitgevoerd. Neem bijvoorbeeld de volgende veelvoorkomende gevallen:

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

Deze werken niet in manifest V2-extensies. Verwijder de inline eventhandlers, plaats ze in uw externe JS-bestand en gebruik addEventListener() om eventhandlers ervoor te registreren. Gebruik bijvoorbeeld in uw JS-code:

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

Dit is een veel nettere manier om het gedrag van je extensie te scheiden van de opmaak van de gebruikersinterface.

Inhoud insluiten

Er zijn scenario's waarin uw extensie inhoud kan insluiten die extern gebruikt kan worden of afkomstig is van een externe bron.

Extensie-inhoud in webpagina's: Als uw extensie bronnen (zoals afbeeldingen, scripts, CSS-stijlen, enz.) insluit die worden gebruikt in scripts die in webpagina's worden geïnjecteerd, moet u de eigenschap `web_accessible_resources` gebruiken om deze bronnen op een whitelist te plaatsen, zodat externe webpagina's ze kunnen gebruiken.

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

Externe inhoud insluiten: Het Content Security Policy (CSP) staat alleen het laden van lokale scripts en objecten vanuit uw pakket toe, waardoor externe aanvallers geen onbekende code in uw extensie kunnen introduceren. Er zijn echter momenten waarop u extern aangeleverde bronnen wilt laden, zoals jQuery of Google Analytics-code. Hiervoor zijn twee manieren beschikbaar:

Download de benodigde bibliotheek (zoals jQuery) lokaal en voeg deze samen met je extensie.
Je kunt het CSP-beleid enigszins versoepelen door HTTPS-bronnen toe te staan in het gedeelte "content_security_policy" van je manifest. Om een bibliotheek zoals Google Analytics te integreren, kun je de volgende aanpak volgen:
```
{
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}
```

Gebruikmakend van dynamische scriptevaluatie

Een van de grootste veranderingen in het nieuwe manifest v2-schema is wellicht dat extensies geen dynamische scriptevaluatietechnieken meer kunnen gebruiken, zoals eval() of new Function() , of strings met JavaScript-code kunnen doorgeven aan functies die een eval() -aanroep activeren, zoals setTimeout() . Daarnaast is bekend dat bepaalde veelgebruikte JavaScript-bibliotheken, zoals Google Maps en bepaalde sjabloonbibliotheken, sommige van deze technieken gebruiken.

Chrome biedt een sandbox voor pagina's die in hun eigen omgeving worden uitgevoerd en geen toegang hebben tot de chrome.* API's. Om functies zoals eval() te kunnen gebruiken onder het nieuwe Content Security Policy:

Voeg een sandbox-item toe aan je manifestbestand.
Geef in het sandbox-veld de pagina's op die u in de sandbox wilt uitvoeren.
Gebruik berichtuitwisseling via postMessage() om te communiceren met de afgeschermde pagina.

Zie de documentatie over het gebruik van de sandbox voor meer informatie over hoe u dit kunt doen.

Verder lezen

De wijzigingen in manifestversie 2 zijn bedoeld om ontwikkelaars te helpen bij het bouwen van veiligere en robuuster ontworpen extensies en apps. Voor een volledige lijst met wijzigingen van manifestversie 1 naar versie 2, raadpleegt u de documentatie van het manifestbestand . Lees het artikel over sandboxing-evaluatie voor meer informatie over het gebruik van sandboxing om onveilige code te isoleren. U kunt meer leren over Content Security Policy door onze tutorial over extensies en een goede introductie op HTML5Rocks te bekijken.