Kuidas süstida rakenduse Reakt sisu skriptina Chrome'i laiendisse

Chrome'i laiendus koos rakendusega React, mis sisestati sisuskriptina

Chrome'i laiendused on suurepärased tööriistad, mis võimaldavad teil brauseri ja veebisaitidega suhelda mitmel viisil.

  • Brauseri ja lehe toimingud, mis kuvatakse brauseri tööriistaribal ikoonidena ja võivad näidata valikulist hüpikakent.
  • Uue vahelehe lehed, mis alistavad vaikimisi uue vahelehe
  • Chrome'i laienduste konfigureerimise valikute lehed
  • Chrome'i kontekstimenüüd, mis kuvatakse paremklõpsuga
  • Märguanded, mis libisevad ekraani paremas ülanurgas
  • Sisukriptid, mis sisestavad JavaScripti veebilehele ja saavad muuta selle kasutajaliidest

See artikkel räägib rakenduse React laadimisest siseskripti. Kui teil seda pole, installige esmalt rakendus loomise-reageerimise rakendus. Siin on hoidla, kui soovite lihtsalt koodi näha.

Looge uus rakendus React

  • loo-reageeri-rakenduse reageeri-sisu-skript

Manifesti faili värskendamine

  • Leidke see kataloogist /public/manifest.json

Fail manifest.json on vajalik Chrome'i laienduse jaoks olulise teabe pakkumiseks. Chrome'i laienduse kehtimiseks on vaja manifesti_versiooni, nime ja versiooni. Content_scripts-massiiv on see, mille abil sisestame oma React rakenduse https://www.google.com/.

Saate sisestada sisu skripti konkreetsele lehele, nagu me siin teeme, või kasutada vasteklahvi, et täpsustada URL-id, kuhu soovite oma koodi laadida. Näiteks [""] laadib siseskripti, mis vastab kõigile kehtiv URL-i skeem.

Värskendage rakenduse komponenti

Eemaldage impordi logo './logo.svg' -st; ja asendage kujutise sildi src sõnaga "https://facebook.github.io/react/img/logo.svg".

Värskendage App.css, et see oleks esinduslikum.

Lisage rakendus DOM-i

Siin sisestame sisuskripti DOM-i veebisaidil https://www.google.com. Esmalt uurige selle veebisaidi (või veebisaitide) DOM-i, kuhu soovite siseskripti sisestada. Seejärel valige element selle põhjal, kuhu soovite oma koodi DOM-i lisada.

Valisin

, kuid peate võib-olla katsetama, et leida teie jaoks kõige sobivam. Võib-olla ei pea te üldse HTML-i sisestama.

Sisu skripti sisestamise koha valimine

Juurutada

  • Järgmine ehitage rakendus tootmiseks, käivitades käsu lõnga käivita ehituse vorm /package.json.
  • Avage menüü Kohandamine ja juhtimine Google Chrome'is muude tööriistade all vahekaart Laiendid (kolme vertikaalse punktiga brauseri tööriistariba paremas servas) või minge aadressile chrome: // laiendid.
  • Märkige ruut Arendaja režiim.
  • Klõpsake käsul Laadi lahti pakkimata laiend ... siis leidke ja valige laiendi laadimiseks kaust ehitada react-content-script / src /.
sisuskripti laadimisviga

Laiendi laadimine ebaõnnestus, kuna manifesti täpsustatud failinimed "css" ja "js" erinevad Webpacki loodud failinimedest.

Webpack genereeris CSS- ja JS-failinimed

Muutke ehituse väljundi failinimesid

Peaksite lihtsalt main.css ja main.js ümber nimetama iga kord, kui teie ehitamisel on muudatusi, nt. main.cacbacc7.css ja main.f0a6875b.js, sel juhul on parem lahendus Webpacki produktsiooni konfiguratsiooni väljundfailide nimede muutmine, nii et te ei pea laienduse laadimiseks käsitsi värskendama. /Config/webpack.config/prod juurde pääsemiseks peate looge rakendusest Loo React.

  • Lülitage lõnga väljalõikamise abil välja lõigust Loo reaktori rakendus ja sisestage kinnitamiseks y.
  • Eemaldage genereeritud räsi CSS-i ja JavaScripti väljundnimedest. Võrrelge ORIGINALi ajakohastatud versioonis /config/webpack.config/prod.
// ... (muu konfiguratsioon)
// Märkus: siin määratletud, kuna seda kasutatakse rohkem kui üks kord.
// ORIGINAL // const cssFilename = 'staatiline / css / [nimi]. [Contenthash: 8] .css';
// UUENDATUD
const cssFilename = 'staatiline / css / [nimi] .css';
// ... (muu konfiguratsioon)
väljund: {
    // ehitamiskaust.
    tee: paths.appBuild,
    // Genereeritud JS-failinimed (pesastatud kaustadega).
    // Asünkroonse tüki kohta tuleb üks peamine kimp ja üks fail.
    // Me ei reklaami praegu koodide jagamist, kuid Webpack toetab seda.
    // ORIGINAL // failinimi: 'static / js / [name]. [Chunkhash: 8] .js',
    // UUENDATUD
    failinimi: 'static / js / [nimi] .js',
// ... (muu konfiguratsioon)

Enne ehituse laadimist Chrome'i tehke see uuesti ja laadige uuesti ning kontrollige, kas failinimed on õiged.

Reageerige rakendusele, mis on sisestatud Chrome'i laienduse sisuskripti

See selleks. Täname, et lugesite ja andke teada, kui teil on küsimusi.