Pakiety skryptów zawartości Webpack i programowo wstrzykiwanych

Question

Pracuję nad rozszerzeniem przeglądarki Chrome za pomocą React i WebPack.

W tym projekcie różne moduły będą programowo wstrzykiwać skrypty treści za pomocą chrome.tabs.executeScript(null, {file: 'content-script-file.js'}).

Jest to problematyczne, ponieważ używam pakietu Webpack do łączenia wszystkich elementów. Zasadniczo skrypt działający w tle ładuje kilka modułów, które są skonfigurowane do programowego uruchamiania skryptów zawartości w określonych okolicznościach.

Nie mogę jednak dowiedzieć się, jak te "skrypty" zostaną "znalezione" w pakiecie aplikacji. Nie są one nigdy jawnie importowane, odwołują się tylko do wywołań executeScript.

W tym samym czasie skrypty treści korzystają z opcji Reaguj, dlatego muszą przejść przez stronę WWW w wersji babel-loader.

Wszelkie pomysły?

Answer 1

Twoje skrypty treści są skutecznie "punkty wejścia" w WebPACK-warunkach.

Każdy skrypt treści najwyższego poziomu powinien być zdefiniowany jako wpis w pakiecie sieci Web. Skorzystaj z pakietu webowego, aby zbudować te skrypty treści. Każdy wpis pobiera wszystkie swoje zależności (np. React) w jeden duży obiekt typu blob.

Następnie tworzysz drugą kompilację, która zbuduje rozszerzenie. To rozszerzenie będzie używać surowego ładowarka i import swoje WebPACK skompilowane skrypty zawartość, a następnie będzie musiał je wszystkie jako ciągi zmiennych lokalnych:

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

I teraz można wstrzykiwać skrypty do swoich zakładek, ile potrzeba:

chrome.tabs.executeScript(null, scriptA); 

Answer 2

To powinno działać, w chrome docs say wykonuj skrypt z wyjątkiem ciągu znaków lub ciągów znaków.

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

 
chrome.tabs.executeScript(null, ContentScript);