Kuinka injektoida React-sovellus Chrome-laajennukseen sisältökomentosarjana

Chrome-laajennus React-sovelluksella, joka injektoidaan sisältöskriptinä

Chrome-laajennukset ovat hienoja työkaluja, joiden avulla voit olla vuorovaikutuksessa selaimen ja verkkosivustojen kanssa monin tavoin.

  • Selain- ja sivutoiminnot, jotka näkyvät kuvakkeina selaimen työkalurivillä ja voivat näyttää valinnaisen ponnahdusikkunan.
  • Uusi välilehti -sivut, jotka ohittavat uuden oletusvälilehden
  • Asetukset-sivut Chrome-laajennusten määrittämiseen
  • Chromen kontekstivalikot, jotka ilmestyvät hiiren oikealla painikkeella
  • Ilmoitukset, jotka liukuvat näytön oikeassa yläkulmassa
  • Sisältökriptit, jotka lisäävät JavaScriptin verkkosivulle ja voivat muuttaa sen käyttöliittymää

Tämä artikkeli koskee React-sovelluksen lataamista sisältöskriptiin. Asenna ensin luo-reagoi-sovellus, jos sinulla ei ole sitä. Tässä on arkisto, jos haluat vain nähdä koodin.

Luo uusi React-sovellus

  • luo-reagoi-sovellus reagoi -sisältö-skripti

Päivitä manifestitiedosto

  • Löydä se hakemistosta /public/manifest.json

Manifesti.json-tiedosto tarvitaan tärkeiden tietojen toimittamiseen Chrome-laajennukselle. Manifesti_versio, nimi ja versio vaaditaan, jotta Chrome-laajennus olisi kelvollinen. Content_scripts-taulukko on se, jonka injektoimme React-sovelluksemme https://www.google.com/.

Voit injektoida sisältökomentosarjan tietylle sivulle, kuten teemme täällä, tai voit käyttää match-näppäintä määrittääksesi URL-osoitteet, joihin haluat koodisi latautuvan. Esimerkiksi [""] lataa sisältökomentosarjan, joka vastaa mitä tahansa kelvollinen URL-järjestelmä.

Päivitä App-komponentti

Poista tuontilogi './logo.svg' -kohdasta; ja korvata kuvatunnisteen src sanalla "https://facebook.github.io/react/img/logo.svg".

Päivitä App.css oleellisemmaksi.

Liitä sovellus DOM: iin

Täällä injektoimme sisältökomentin DOM: iin https://www.google.com. Tutki ensin sen verkkosivuston (tai verkkosivustojen) DOM, johon haluat lisätä sisältökomentosarjan. Valitse sitten elementti sen perusteella, mihin haluat lisätä koodisi DOM: iin.

Valitsin

, mutta joudut ehkä kokeilemaan löytääksesi sinulle parhaiten sopivan. Sinun ei ehkä tarvitse edes laittaa HTML-koodia ollenkaan.

Sisäkoodin pistämiskohdan valitseminen

sijoittaa

  • Seuraavaksi rakenna sovellus tuotantoon suorittamalla komento lanka run build form /package.json.
  • Avaa Laajennukset-välilehti Mukauta ja hallitse Google Chromen valikon Muiden työkalujen alla (kolme pystysuuntaista pistettä selaimen työkalurivin oikeassa reunassa) tai siirry kohtaan chrome: // laajennukset.
  • Valitse Kehittäjätila-valintaruutu.
  • Napsauta Lataa pakkaamaton laajennus… sitten etsi ja valitse rakennuskansio kohdasta react-content-script / src / ladataksesi laajennus.
sisältökriptin latausvirhe

Laajennuksen lataaminen epäonnistui, koska manifestissa määrittämämme "css" ja "js" tiedostonimet ovat erilaisia ​​kuin Webpackin luomat.

Webpack tuotti CSS- ja JS-tiedostonimet

Muokkaa rakennustulostiedostonimiä

Voit vain nimetä main.css ja main.js joka kerta, kun rakenteessasi on muutoksia, main.cacbacc7.css ja main.f0a6875b.js tässä tapauksessa, mutta parempi ratkaisu on muokata Webpackin tuotannon kokoonpanotulostustiedostonimiä, jotta sinun ei tarvitse päivittää manuaalisesti, kun haluat ladata laajennuksen. Jotta pääset käyttämään /config/webpack.config/prod, sinun on poistettava Create React App -sovelluksesta.

  • Poista Luo React -sovelluksesta langanpoistolla ja vahvista y kirjoittamalla y.
  • Poista luodut tiivisteet CSS- ja JavaScript-tulostetiedostojen nimistä. Vertaa ORIGINAL-tiedostoa päivitettynä /config/webpack.config/prod -kansiossa.
// ... (Muu kokoonpano)
// Huomaa: määritelty tässä, koska sitä käytetään useammin kuin kerran.
// Alkuperäinen // const cssFilename = 'staattinen / css / [nimi]. [Contenthash: 8] .css';
// PÄIVITETTY
const cssFilename = 'staattinen / css / [nimi] .css';
// ... (Muu kokoonpano)
lähtö: {
    // Rakennuskansio.
    polku: polut.appBuild,
    // Luodut JS-tiedostonimet (sisäkkäisissä kansioissa).
    // Asynkronista palaa kohden on yksi pääpaketti ja yksi tiedosto.
    // Emme tällä hetkellä mainosta koodinjakoa, mutta Webpack tukee sitä.
    // Alkuperäinen // tiedostonimi: 'static / js / [name]. [Chunkhash: 8] .js',
    // PÄIVITETTY
    tiedostonimi: 'static / js / [name] .js',
// ... (Muu kokoonpano)

Luo uudelleen ja lataa se uudelleen ja varmista, että tiedostonimet ovat oikein, ennen kuin lataat rakennuksen Chromeen.

Reagoi sovellus, joka on injektoitu Chrome-laajennuksen sisältöskriptiin

Se siitä. Kiitos käsittelystä ja ilmoita minulle, jos sinulla on kysyttävää.