Webpack e script di contenuto a iniezione programmata

Question

Sto sviluppando un'estensione di Chrome utilizzando React e Webpack.

In questo progetto, diversi moduli programmeranno in modo programmatico gli script di contenuto utilizzando chrome.tabs.executeScript(null, {file: 'content-script-file.js'}).

Questo diventa problematico poiché utilizzo Webpack per unire tutto. Fondamentalmente, lo script in background sta caricando un numero di moduli, che sono tutti configurati per iniettare script di contenuto a livello di programmazione in determinate circostanze.

Tuttavia, non riesco a capire in che modo questi script di contenuto verranno "trovati" nell'applicazione in bundle. Non vengono mai importati in modo esplicito, con riferimento alle chiamate executeScript.

Allo stesso tempo, gli script di contenuto utilizzano React, quindi devono passare attraverso lo babel-loader in Webpack.

Qualche idea?

Answer 1

Gli script contenuti sono effettivamente "punti di ingresso" in webpack-termini.

Ogni script di contenuto di livello superiore deve essere definito come una voce del pacchetto Web. Utilizzare il webpack per creare questi script di contenuto. Ogni voce inserirà tutte le sue dipendenze (come React) in un unico grande blob.

Quindi si effettua una seconda build del webpack che crea l'estensione. Questa estensione utilizzerà il loader crudo e import vostri script contenuti WebPack-compilati e poi li avrà come stringhe variabili locali:

import scriptA from 'content/build/a'; 
import scriptB from 'content/build/b'; 

E ora si può iniettare gli script nelle vostre schede in base alle esigenze:

chrome.tabs.executeScript(null, scriptA); 

Answer 2

Questo dovrebbe funzionare, i documenti di Chrome dicono eseguire script di eccezione codice stringa o file stringa.

import ContentScript from './content-script-file'; 
 

 
chrome.tabs.executeScript(null, ContentScript);