Google Chrome एक्सटेंशन - सीएसएस के साथ स्थानीय छवियों को लोड नहीं कर सकता

Question

मेरे पास एक सरल क्रोम एक्सटेंशन है जो वेबसाइट को संशोधित करने के लिए सामग्री स्क्रिप्ट सुविधा का उपयोग करता है। विशेष रूप से, background-imageउक्त वेबसाइट का।

किसी कारण से मैं स्थानीय छवियों का उपयोग करने में सक्षम नहीं हो सकता, भले ही वे विस्तार में पैक किए गए हों।

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

यही है, सबसे सरल सीएसएस ... लेकिन यह काम नहीं करेगा। ब्राउज़र छवि लोड नहीं करता है।

Comments

एक्सटेंशन यह क्यों सोचेगा कि url ('image.jpg') स्थानीय है? क्या आपको पूर्ण पथ की आवश्यकता नहीं होगी?

— त्रिगामेर

Answer 1

आपका छवि URL जैसा दिखना चाहिए chrome-extension://<EXTENSION_ID>/image.jpg

आप जावास्क्रिप्ट के माध्यम से सीएसएस की जगह लेना बेहतर होगा। से डॉक्स :

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

Comments

@ सलाम क्योंकि अन्यथा आपको सीएसएस में अपनी एक्सटेंशन आईडी को हार्डकोड करना होगा।

— सर्ग

गूंगा नहीं है, लेकिन वह मुद्दा क्यों है?

— सलेम

@ सलाम यह अनपैकड एक्सटेंशन आईडी के रूप में विकसित करने के लिए असुविधाजनक होगा और गैलरी में अलग-अलग आईडी को अपलोड किया जाएगा। उदाहरण के लिए कोड में हार्डकॉपी निरपेक्ष फ़ाइल पथों की तरह, यह दुनिया का अंत नहीं है, बस असुविधा और बुरे अभ्यास की तरह है।

— सर्ग

आह, समझ में आता है। मैं इसकी सराहना करता हूं।

— सेलम

चूंकि यह स्वीकृत उत्तर है, इसलिए आपको स्थानीय फ़ॉन्ट और चित्रों तक पहुंचने के लिए अपनी प्रकट फ़ाइल में web_accessible_resources सहित ariera के बारे में उल्लेख किए गए अन्य उत्तर पर टिप्पणी देखनी चाहिए।

— आर्यन फिरोजियन

Answer 2

Chrome में i18n समर्थन है जो आपके CSS में आपके एक्सटेंशन को संदर्भित करने की क्षमता प्रदान करता है। मैं विस्तार में एक छवि फ़ोल्डर में अपनी छवियों को रखता हूं, इसलिए सीएसएस में संदर्भ संपत्ति जैसे:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

Comments

महान एक। यह एक महान समाधान है और वास्तव में अनपैक्ड और पैकेज्ड एक्सटेंशन दोनों के लिए काम करता है - वास्तव में शानदार टिप साझा करने के लिए धन्यवाद।

— रिचर्ड हॉलिस

धन्यवाद, यह वही है जिसकी मुझे तलाश थी। बस एक फुटनोट: याद रखें कि आपको अपनी संपत्ति को अपनी प्रकट फ़ाइल में web_accessible_resource के रूप में घोषित करना होगा (जैसा कि यहां बताया गया है: code.google.com/chrome/extensions/… )। अन्यथा वे लोड नहीं होंगे

— अरिया जूल

एक बात मुझे एहसास हुई! कभी नहीं लगता कि स्वीकृत उत्तर उस प्रश्न का एकमात्र सही समाधान है! मुझे डर था कि मुझे हार्डकोड करना होगा जब मैंने स्वीकार किए गए उत्तर को देखा, लेकिन आपको जवाब देखने के बाद मैंने खुद को बताया कि इस आदमी ने मेरा दिन बचाया !! ;-)

— रफ़ीक मोहम्मद

यह लगभग हमेशा इसे करने का बेहतर तरीका है। शुद्ध सीएसएस बनाम युग्मनपत्र और सीएसएस एक साथ @ उत्तर में सीएसएस। यह मेरी राय में स्वीकृत उत्तर होना चाहिए।

— जेरेमी ज़ेर

@ ariera का लिंक अब यहाँ है: developer.chrome.com/extensions/manifest/…

— बेन

Answer 3

इस प्रश्न के कई पुराने उत्तर और समाधान हैं।

अगस्त 2015 तक (क्रोम 45 और मैनिफेस्ट संस्करण 2 का उपयोग करके), क्रोम एक्सटेंशन्स के भीतर स्थानीय छवियों को जोड़ने के लिए वर्तमान "सर्वश्रेष्ठ अभ्यास" निम्नलिखित दृष्टिकोण है।

1) अपने CSS में अपने एक्सटेंशन के इमेज फोल्डर के सापेक्ष पथ का उपयोग करते हुए संपत्ति से लिंक करें :

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) अपने एक्सटेंशन की मेनिफेस्ट.जसन फ़ाइल के web_accessible_resources अनुभाग में व्यक्तिगत संपत्ति जोड़ें :

"web_accessible_resources": [
  "images/file.png"
]

नोट: यह विधि कुछ फ़ाइलों के लिए उपयुक्त है, लेकिन कई फ़ाइलों के साथ अच्छी तरह से पैमाने पर नहीं है।

इसके बजाय, एक बेहतर तरीका यह है कि किसी दिए गए निर्देशिका के भीतर सभी फाइलों को श्वेतसूची में मिलान पैटर्न के लिए क्रोम के समर्थन का लाभ उठाया जाए :

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

इस दृष्टिकोण का उपयोग करने से आप आसानी से और आसानी से अपने क्रोम एक्सटेंशन की सीएसएस फ़ाइल में मूल समर्थित तरीकों का उपयोग करके छवियों का उपयोग कर सकते हैं।

Answer 4

एक विकल्प होगा परिवर्तित बेस 64 के लिए अपनी छवि:

और फिर डेटा को अपने सीएसएस में सही तरह से डालें:

body { background-image: url(data:image/png;base64,iVB...); }

हालांकि यह एक ऐसा दृष्टिकोण नहीं हो सकता है जिसे आप नियमित रूप से वेबपृष्ठ विकसित करते समय उपयोग करना चाहते हैं , यह क्रोम एक्सटेंशन के निर्माण की कुछ बाधाओं के कारण एक बढ़िया विकल्प है।

Comments

मुझे यह विकल्प पसंद है। मैं असहमत हूं कि Google उपरोक्त उल्लिखित दृष्टिकोण के माध्यम से सभी छवियों को इंजेक्ट करने का सुझाव देने के लिए सही है । बेस 64 दृष्टिकोण भी तेज है। +1 !!!

— Skone

Answer 5

मेरा समाधान।

Menifest v2 के साथ आपको web_accessible_resourcesफ़ाइल में जोड़ना होगा और फिर chrome-extension://__MSG_@@extension_id__/images/pattern.pngअपनी css फ़ाइल में url के रूप में उपयोग करना होगा ।

सीएसएस:

 #selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png'); 
 }

manifest.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

पीएस आपका मैनिफेस्ट.जसन इस पर अलग दिख सकता है।

Answer 6

यह सीएसएस-संस्करण-केवल विस्तार के वातावरण (ऐप पृष्ठ, पॉपअप पृष्ठ, पृष्ठभूमि पृष्ठ, विकल्प पृष्ठ) के साथ-साथ CSS फ़ाइल में काम करता है।

बिना फाइल के, मैं हमेशा शुरुआत में एक चर सेट करता हूं:

@extensionId : ~"__MSG_@@extension_id__";

फिर बाद में, यदि आप छवियों जैसे विस्तार-स्थानीय-संसाधन को संदर्भित करना चाहते हैं, तो उपयोग करें:

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

Answer 7

एक बात का उल्लेख है कि web_accessible_resources में आप वाइल्डकार्ड का उपयोग कर सकते हैं। इसलिए इसके बजाय

"छवियों / pattern.png"

आप उपयोग कर सकते हैं

"इमेजिस/*"

Answer 8

बस स्पष्ट करने के लिए, दस्तावेज़ के अनुसार , एक्सटेंशन की प्रत्येक फ़ाइल इस तरह से एक पूर्ण URL द्वारा भी सुलभ है:

क्रोम-एक्सटेंशन: // <extensionID>/<pathToFile>

नोट <extensionID>एक विशिष्ट पहचानकर्ता है जो विस्तार प्रणाली प्रत्येक एक्सटेंशन के लिए उत्पन्न करता है। आप URL क्रोम: // एक्सटेंशन पर जाकर अपने सभी लोडेड एक्सटेंशन के लिए आईडी देख सकते हैं । <pathToFile>विस्तार के शीर्ष फ़ोल्डर के अंतर्गत फ़ाइल का स्थान है, यह सापेक्ष URL के समान है।

...

CSS में बैकग्राउंड इमेज बदलना:

#id{पृष्ठभूमि-छवि: url (" chrome-extension://<extensionID>/<pathToFile>"); }

सीएसएस में पृष्ठभूमि छवि को जावास्क्रिप्ट के माध्यम से बदलना:

document.getElementById (' id') .style.backgroundImage = "url ('क्रोम-एक्सटेंशन: // <extensionID>/ <pathToFile>')");

JQuery के माध्यम से CSS में पृष्ठभूमि छवि बदलना:

$ (" #id") .cs ("पृष्ठभूमि-छवि", "url ('क्रोम-एक्सटेंशन: // <extensionID>/ <pathToFile>')");