Pyyntöotsakkeiden muokkaaminen
Toteuttakaa sääntöjä HTTP-pyyntöotsakkeiden muokkaamiseen, jotta voitte määrittää mukautettua toimintaa tai todentamista lähteville pyynnöille.
Pyyntöotsakkeiden muokkaaminen on ilmainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Mitä pyyntöotsakkeet ovat?
Kun selaimenne keskustelee verkkosivuston kanssa, se lähettää HTTP-pyyntöjä. Näissä pyynnöissä välitetään lisätietoja, kuten metatietoja, niin sanotuissa otsakkeissa.
Otsakkeet kertovat palvelimelle esimerkiksi sen, mitä selainta käytätte (User-Agent), millaista sisältöä odotatte (Accept) ja jopa todennustunnuksia (Authorization).
Tehokas otsakkeiden hallinta
Opimme käyttämään declarativeNetRequest-rajapintaa estämiseen ja uudelleenohjaukseen. Se on tehokas, koska selain voi käsitellä säännöt tehokkaasti ilman, että laajennuksen JavaScript-koodia tarvitsee suorittaa jatkuvasti.
Tänään käytämme sitä näiden pyyntöotsakkeiden muokkaamiseen: lisäämme, muutamme tai poistamme niitä ennen kuin pyyntö edes lähtee selaimestanne!
`modifyHeaders`-toiminnon esittely
Otsakkeiden muuttamiseen käytämme declarativeNetRequest-säännöissä erityistä actionType-arvoa: "modifyHeaders".
Tämä toiminto ottaa vastaan requestHeaders-taulukon. Taulukon jokainen alkio kuvaa yhtä otsakemuutosta, jonka haluatte tehdä.
Otsakkeiden toimintojen selitys
Jokaiselle otsakemuutokselle määritetään operation-toiminto:
"set": Korvaa olemassa olevan otsakkeen arvon tai lisää otsakkeen, jos sitä ei ole."append": Lisää otsakkeeseen uuden arvon. Jos otsake on jo olemassa, sillä on useita arvoja. Muussa tapauksessa otsake lisätään."remove": Poistaa otsakkeen kokonaan pyynnöstä.
Tarvittavat käyttöoikeudet
Jotta voitte käyttää declarativeNetRequest-rajapintaa otsakkeiden muokkaamiseen, laajennuksenne tarvitsee tietyt käyttöoikeudet manifest.json-tiedostossa:
"declarativeNetRequest": Peruskäyttöoikeus rajapinnan käyttämiseen."declarativeNetRequestWithHostAccess": Tarvitaan, jos säännöt muokkaavat otsakkeita tietyillä verkkosivustoilla (isännillä). Näin on yleensä!
Mukautetun otsakkeen lisääminen
Lisätään kaikkiin lähteviin pyyntöihin mukautettu otsake nimeltä X-CoddyKit-User. Tästä voi olla hyötyä laajennuksenne lähettämien pyyntöjen tunnistamisessa.
Tämä koodi sijoitetaan laajennuksenne background.js-tiedostoon.
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [1],
addRules: [{
id: 1,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [{
header: "X-CoddyKit-User",
operation: "set",
value: "CoddyKitStudent"
}]
},
condition: {
urlFilter: "<all_urls>",
resourceTypes: ["main_frame", "sub_frame", "xmlhttprequest"]
}
}]
});
// In a real extension, this runs once on install/update.
// You'd observe the header in your browser's DevTools Network tab.Säännön erittely
Koodissa käytetään chrome.declarativeNetRequest.updateDynamicRules-metodia sääntöjen hallintaan. Tässä on lyhyt erittely:
id: Säännön yksilöllinen numero.priority: Määrittää, mikä sääntö voittaa, jos useita sääntöjä sovelletaan.action: Määrittää suoritettavan toiminnon. Tässä tapauksessa"modifyHeaders"yhdessärequestHeaders-arvon kanssa.condition: Määrittää, milloin sääntöä sovelletaan (esimerkiksi<all_urls>kaikkialla).
User-Agentin muuttaminen
Myös tavallisia otsakkeita voi muuttaa käyttämällä "set"-toimintoa. Tässä muokkaamme User-Agent-otsaketta pyyntöjä varten, jotka lähetetään osoitteeseen example.com. Tämä väärentää selaimenne tunnistetiedot kyseisellä sivustolla.
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [2],
addRules: [{
id: 2,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [{
header: "User-Agent",
operation: "set",
value: "CoddyKitBrowser/1.0 (Extension)"
}]
},
condition: {
urlFilter: "*://example.com/*",
resourceTypes: ["main_frame", "sub_frame"]
}
}]
});
// This rule would change the User-Agent for example.com.Otsakkeen poistaminen
Joskus otsake kannattaa poistaa yksityisyyden suojaamiseksi tai tietyn seurannan estämiseksi. Poistetaan Referer-otsake kaikista kuvatiedostojen pyynnöistä.
Referer-otsake kertoo verkkosivustolle, mistä tulitte.
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [3],
addRules: [{
id: 3,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [{
header: "Referer",
operation: "remove"
}]
},
condition: {
urlFilter: "<all_urls>",
resourceTypes: ["image"]
}
}]
});
// This rule would remove the Referer header for image requests.Pikatarkistus: otsakkeiden toiminnot
Haluatte lisätä pyyntöön mukautetun otsakkeen X-API-Key, joka sisältää API-avaimen. Jos otsake on jostain syystä jo olemassa, haluatte varmistaa, että avaimenne lisätään siihen mahdollisesti toisena arvona olemassa olevan arvon korvaamisen sijaan.
Kertaus ja seuraavat vaiheet
Hienoa työtä! Olette oppineet muokkaamaan HTTP-pyyntöotsakkeita tehokkaasti declarativeNetRequest-rajapinnan avulla.
- Tutustuimme
"modifyHeaders"-toimintoon. - Opimme tuntemaan
"set"-,"append"- ja"remove"-toiminnot. - Näimme, miten mukautettuja otsakkeita lisätään, User-Agent-arvoja muutetaan ja arkaluonteisia tietoja poistetaan.
- Muistakaa tarvittavat käyttöoikeudet:
declarativeNetRequestjadeclarativeNetRequestWithHostAccess.
Seuraavaksi perehdymme URL-osoitteiden uudelleenohjaukseen ja uudelleenkirjoittamiseen!
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
Usein kysytyt kysymykset
Onko oppitunti ”Pyyntöotsakkeiden muokkaaminen” ilmainen?
Kyllä – oppitunnin ”Pyyntöotsakkeiden muokkaaminen” 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 ”Pyyntöotsakkeiden muokkaaminen”?
Toteuttakaa sääntöjä HTTP-pyyntöotsakkeiden muokkaamiseen, jotta voitte määrittää mukautettua toimintaa tai todentamista lähteville pyynnöille. 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 2/4.
Kuinka kauan ”Pyyntöotsakkeiden muokkaaminen”-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
- Verkkopyyntöjen estäminen
- Pyyntöotsakkeiden muokkaaminen
- URL-osoitteiden uudelleenohjaus ja uudelleenkirjoitus
- Dynaamiset säännöt ja declarativeNetRequestin virheenkorjaus