Selainlaajennusten kehittäminen (Chrome ja Edge) · Oppitunti

Selainten välisten manifestien mukautukset

Tunnistakaa Chrome- ja Edge-selainten `manifest.json`-määritysten ja API-toimintojen erot ja käsitelkää ne asianmukaisesti.

Oppitunti 1/411 vaihetta

Selainten välisten manifestien mukautukset on ilmainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Selainlaajennusten kehittäminen (Chrome ja Edge)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssilla on yhteensä 4 oppituntia.

Miksi selainten välinen yhteensopivuus on tärkeää?

Selainlaajennusten kehittäminen useille alustoille, kuten Chromelle ja Edgelle, avaa projektisi paljon laajemman yleisön käyttöön. Vaikka molemmat selaimet tukevat Manifest V3:a, todellinen selainten välinen yhteensopivuus vaatii tarkkuutta.

Tässä oppitunnissa tutustumme manifest.json-määritysten ja API-toiminnan hienovaraisiin eroihin, jotta voit rakentaa laajennuksia, jotka toimivat saumattomasti kaikkialla.

Manifest V3:n perusta: yhteiset lähtökohdat

Monet manifest.json-tiedoston keskeiset kentät ovat samoja Chromessa ja Edgessä, joten ne muodostavat vankan yhteisen perustan:

manifest_version: Nykyisissä laajennuksissa aina 3.
name, version, description: Vakiomuotoiset metatiedot.
action: Määrittää työkalupalkin ponnahdusikkunan, sen kuvakkeen ja otsikon.

Nämä kentät vaativat harvoin selainkohtaisia muutoksia.

{
  "manifest_version": 3,
  "name": "My Cross-Browser Extension",
  "version": "1.0",
  "description": "A simple extension for Chrome and Edge.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

Käyttöoikeudet: yleiset määritykset

Chrome ja Edge käyttävät samaa syntaksia määritettäessä permissions- ja host_permissions-käyttöoikeuksia. Ne määrittävät, mitä laajennuksesi voi tehdä ja millä verkkosivustoilla se voi toimia.

Tarkka määritys on tässä ratkaisevan tärkeää, sillä mikä tahansa ero voi aiheuttaa käyttöoikeusvaroituksen tai toimintahäiriön toisessa selaimessa.

{
  "permissions": [
    "storage",
    "activeTab"
  ],
  "host_permissions": [
    "*://*.example.com/*",
    "https://www.google.com/*"
  ]
}

Content Security Policy (CSP) -erityispiirteet

content_security_policy-avainta käytetään molemmissa selaimissa estämään injektiohyökkäyksiä. Oletusarvoissa tai valvonnassa voi kuitenkin olla hienovaraisia eroja, erityisesti script-src- ja object-src-direktiivien kohdalla.

Testaa CSP aina molemmissa selaimissa, sillä yhdelle selaimelle liian tiukka käytäntö voi rikkoa toiminnallisuuden, kun taas liian salliva käytäntö voi aiheuttaa tietoturvariskin.

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

`declarativeNetRequest`-sääntökokoelmat

declarativeNetRequest-API mahdollistaa verkkopyyntöjen estämisen tai muokkaamisen ilman niiden sieppaamista, mikä parantaa yksityisyyttä ja suorituskykyä. Sääntökokoelmien määrittelyrakenne on hyvin yhdenmukainen eri selaimissa.

Muoto on yhdenmukainen, mutta selainten sääntöjen tai sääntökokoelmien määrää koskevissa rajoissa voi olla pieniä eroja. Tarkista ajantasaiset rajoitukset aina virallisesta dokumentaatiosta.

{
  "permissions": [
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

API:n toiminta: `chrome.tabs`-esimerkki

Vaikka useimmat chrome.*-APIt on suunniteltu yhteensopiviksi, toiminnassa voi ilmetä hienovaraisia eroja. Esimerkiksi välilehtien luomisella tai päivittämisellä chrome.tabs-API:n avulla voi olla erilaiset oletustoiminnot tai tapahtumien laukaisujärjestys.

Tarkista aina monimutkaisten API-kutsujen täsmällinen toiminta, etenkin kun niihin liittyy käyttöliittymän käsittelyä tai navigointia.

chrome.action.onClicked.addListener(async (tab) => {
  const newTab = await chrome.tabs.create({
    url: 'https://example.com/new-page',
    active: false
  });
  console.log('New tab created:', newTab.id);
  // Edge might handle 'active: false' slightly differently
  // or fire specific events in a different order.
});

API:n toiminta: `chrome.storage` -kiintiöt

chrome.storage-API tarjoaa laajennuksesi tiedoille pysyvän tallennustilan. Vaikka sen ydintoiminnallisuus toimii hyvin eri selaimissa, todelliset tallennuskiintiöt voivat vaihdella.

Esimerkiksi QUOTA_BYTES (sync-tallennustilan tavujen kokonaismäärä) ja QUOTA_BYTES_PER_ITEM voivat olla hieman erilaiset Chromessa ja Edgessä. Suunnittele tallennusstrategiasi pienimmän yhteisen nimittäjän mukaan.

chrome.storage.sync.set({
  'user_setting': 'value_A'
}, () => {
  if (chrome.runtime.lastError) {
    console.error('Storage error:', chrome.runtime.lastError.message);
    // Check limits if storage fails unexpectedly.
  } else {
    console.log('Setting saved.');
  }
});

Lokalisoinnin (`_locales`) parhaat käytännöt

Laajennuksen kansainvälistäminen käyttämällä _locales-kansiota ja manifestin default_locale-määritystä on molempien selainten tukema vakiintunut käytäntö.

Varmista viestiavainten ja paikkamerkkien muotoilun yhdenmukaisuus kaikissa aluekohtaisten asetusten tiedostoissa. Vaikka järjestelmä on yhdenmukainen, käännettyjen merkkijonojen testaaminen molemmissa selaimissa varmistaa oikean näyttämisen ja ehkäisee asetteluongelmia.

{
  "default_locale": "en",
  "name": "__MSG_extensionName__",
  "description": "__MSG_extensionDescription__"
}

Ehdolliset manifestit koontityökaluilla

Edistyneissä tilanteissa, joissa Chrome ja Edge edellyttävät merkittävästi erilaisia manifest-määrityksiä (esimerkiksi yksilöllisiä käyttöoikeuksia tai brändäykseen liittyviä erilaisia kuvakkeita), yksi manifest.json-tiedosto ei välttämättä riitä.

Monet kehittäjät käyttävät koontityökaluja, kuten Webpackia tai mukautettuja komentosarjoja, selainkohtaisten manifest.json-tiedostojen luomiseen ja pakkaamiseen. Tämä tarjoaa paljon joustavuutta, mutta lisää koonnin monimutkaisuutta.

Pikatarkistus: selainten väliset erityispiirteet

Kun kehität selainlaajennusta sekä Chromelle että Edgelle, mikä osa todennäköisimmin vaatii huolellista tarkistamista ja mahdollisia muutoksia hienovaraisten toimintaerojen vuoksi, vaikka API-syntaksi olisi sama?

Vastaa interaktiivisessa oppitunnissa

Kertaus: selainten välisten manifestien hallinta

Olet oppinut, että vaikka Chrome ja Edge käyttävät suurelta osin yhteensopivaa Manifest V3 -rakennetta, selainten välinen kehitys vaatii tarkkuutta.

Manifestin keskeiset kentät ja käyttöoikeusmääritykset ovat pääosin yhdenmukaisia.
CSP, API-toiminta (kuten chrome.tabs ja chrome.storage -kiintiöt) sekä lokalisointi on tarkistettava ja testattava huolellisesti molemmissa selaimissa.
Merkittävissä eroissa koontityökaluilla voidaan luoda selainkohtaiset manifestit.

Perusteellinen testaaminen on paras apusi aidosti yhteensopivan selainten välisen laajennuksen rakentamisessa!

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Selainten välisten manifestien mukautukset” ilmainen?

Kyllä – oppitunnin ”Selainten välisten manifestien mukautukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssin, päivitä CoddyKit PROhon. Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Selainten välisten manifestien mukautukset”?

Tunnistakaa Chrome- ja Edge-selainten `manifest.json`-määritysten ja API-toimintojen erot ja käsitelkää ne asianmukaisesti. Harjoittelet Selainlaajennusten kehittäminen (Chrome ja Edge)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Selainlaajennusten kehittäminen (Chrome ja Edge)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Selainlaajennusten kehittäminen (Chrome ja Edge)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Selainten välisten manifestien mukautukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunnilla?

Kyllä. Jokainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Selainten välisten manifestien mukautukset
WebExtension-polyfillien käyttäminen
Laajennuskehityksen kehysten tarkastelu
Paketointi ja julkaiseminen useissa kaupoissa

← Takaisin: Selainlaajennusten kehittäminen (Chrome ja Edge)