वेबपैक और प्रोग्रामेटिक रूप से इंजेक्शन सामग्री स्क्रिप्ट

Question

मैं रिएक्ट और वेबपैक का उपयोग कर क्रोम एक्सटेंशन विकसित कर रहा हूं।

इस प्रोजेक्ट में, विभिन्न मॉड्यूल chrome.tabs.executeScript(null, {file: 'content-script-file.js'}) का उपयोग करके सामग्री स्क्रिप्ट को प्रोग्रामेटिक रूप से इंजेक्ट करेंगे।

यह समस्याग्रस्त हो जाता है क्योंकि मैं सबकुछ बंडल करने के लिए वेबपैक का उपयोग कर रहा हूं। असल में, पृष्ठभूमि स्क्रिप्ट कई मॉड्यूल लोड कर रही है, जो कुछ परिस्थितियों में प्रोग्राम स्क्रिप्ट को प्रोग्रामेटिक रूप से इंजेक्ट करने के लिए कॉन्फ़िगर की गई हैं।

हालांकि, मैं यह नहीं समझ सकता कि इन सामग्री स्क्रिप्ट को बंडल एप्लिकेशन में "पाया" कैसे मिलेगा। उन्हें कभी भी स्पष्ट रूप से आयात नहीं किया जाता है, बस executeScript कॉल में संदर्भित किया गया है।

उसी समय, सामग्री स्क्रिप्ट प्रतिक्रिया का उपयोग करते हैं, इसलिए उन्हें वेबपैक में babel-loader से गुज़रना पड़ता है।

कोई विचार?

Answer 1

आपका सामग्री स्क्रिप्ट को प्रभावी ढंग से "प्रवेश बिंदुओं" webpack-मामले में कर रहे हैं।

प्रत्येक शीर्ष-स्तरीय सामग्री स्क्रिप्ट को वेबपैक प्रविष्टि के रूप में परिभाषित किया जाना चाहिए। इन सामग्री स्क्रिप्ट बनाने के लिए वेबपैक का उपयोग करें। प्रत्येक प्रविष्टि एक बड़ी ब्लॉब में अपनी सभी निर्भरताओं (जैसे प्रतिक्रिया) में खींच जाएगी।

फिर आप अपना दूसरा एक्सटेंशन बनाते हैं जो आपके एक्सटेंशन को बनाता है। इस विस्तार के कच्चे लोडर और import अपने webpack संकलित सामग्री स्क्रिप्ट का उपयोग करेगा और फिर इसे उन सब को तार स्थानीय चर के रूप होगा:

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

और अब आप की जरूरत के रूप में अपने टैब में स्क्रिप्ट इंजेक्षन कर सकते हैं:

chrome.tabs.executeScript(null, scriptA); 

Answer 2

यह काम करना चाहिए, क्रोम दस्तावेज़ कहते हैं कि निष्पादित स्क्रिप्ट स्ट्रिंग कोड या स्ट्रिंग फ़ाइल को छोड़ती है।

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

 
chrome.tabs.executeScript(null, ContentScript);