मैं एक Google क्रोम एक्सटेंशन विकसित कर रहा हूं और मैं एक सापेक्ष पथ समस्या में चल रहा हूं। यदि मैं किसी छवि के सापेक्ष पथ देता हूं और किसी निश्चित पृष्ठ में प्लगइन खोलता हूं तो वह उस छवि को एक्सटेंशन के बजाए वेबसाइट के पथ में देखेगा।Google क्रोम एक्सटेंशन सापेक्ष पथ
कोई विचार?
आप अपना एक्सटेंशन पृष्ठों (पृष्ठभूमि, पॉपअप, जानकारी बार, आदि) में सीएसएस का उपयोग कर रहे हैं तो आप एक स्लैश (/) के साथ संबंधित पथ का उपयोग कर सकते हैं:
background-image:url("/sprites.png");
ऊपर काम करना चाहिए, हर किसी का उपयोग करता है यह।
background-image:url('chrome-extension://[email protected]@extension_id__/sprites.png');
आप प्रोग्राम इसे सेट करना चाहते हैं, तो आप chrome.extension.getURL वाक्य रचना के रूप में उपयोग कर सकते हैं: लेकिन, अपनी सामग्री स्क्रिप्ट के लिए उपयोग करने और आप किसी भी सीएसएस के लिए भी ऐसा कर सकते हैं, तो आप का उपयोग करने के predefined message तरह की आवश्यकता होगी निम्नलिखित:
var url = chrome.extension.getURL('sprites.png');
ये वे तरीके हैं जिन्हें आप एक विशिष्ट यूआरएल/छवि का संदर्भ दे सकते हैं।
इसके अतिरिक्त, mentioned in this answer के रूप में, यदि आप अपनी छवि संपत्ति को निर्देशिका में रखते हैं, तो ये फ़ाइलें स्वचालित रूप से वेब पेज DOM में उपलब्ध नहीं हैं। डेवलपर को उन संसाधनों को निर्दिष्ट करना चाहिए जिन्हें manifest.json फ़ाइल में "web_accessible_resources" सेटिंग का उपयोग करके पृष्ठ लोड किया जा सकता है:
मुझे समझने दो कि क्या मैं समझता हूं, मैं केवल अपने बैकग्राउंड, पॉपअप, इन्फोबार और उसके जैसे अन्य पृष्ठों में सापेक्ष पथ का उपयोग कर सकता हूं।यदि मैं सामग्री स्क्रिप्ट या सीएसएस में किसी छवि का संदर्भ देता हूं तो मुझे ऊपर बताए गए एक पूर्वनिर्धारित संदेश का उपयोग करना होगा। क्या वो सही है? – ForeignerBR
हाँ, अच्छा लगता है। –
एनबी: वर्तमान में यह तकनीक सामग्री स्क्रिप्ट सीएसएस फ़ाइलों के लिए काम नहीं करेगी, क्योंकि वे @@ extension_id जैसे पूर्वनिर्धारित संदेशों का उपयोग नहीं कर सकते हैं। विवरण के लिए, बग 398 99 (http://crbug.com/39899) –
@ मोहम्मद के उत्तर ने मेरे लिए काम किया लेकिन इसे एक साथ रखने में थोड़ी देर लग गई। मैंने इस और उत्तर दिया है, लेकिन यहां वह समाधान है जो मेरे लिए काम करता है।
मेरा समाधान।
मेनिफेस्ट v2 के साथ आपको फ़ाइल में web_accessible_resources जोड़ने की आवश्यकता है और फिर chrome-extension://[email protected]@extension_id__/images/pattern.png का उपयोग अपनी सीएसएस फ़ाइल में यूआरएल के रूप में करें।
सीएसएस:
#selector {
background: #fff url('chrome-extension://[email protected]@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"
]
}
पी.एस. आपका manifest.json इस से अलग दिख सकता है।
कुछ मामलों में आप छवि के इनलाइन बेस 64 एन्कोडिंग का भी उपयोग कर सकते हैं। उदाहरण के लिए,
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />
वही आप अपने सीएसएस पर आवेदन कर सकते हैं। आप पूरे वेब पर छवि एन्कोडर्स पा सकते हैं।
एक उदाहरण पोस्ट करें। यह सामान्य रूप से काम करता है। पृष्ठभूमि छवि: यूआरएल ('sprites.png') त्रुटि: संसाधन लोड करने में असफल: – bzlm
यहां एक उदाहरण दिया सर्वर 404 (नहीं मिला) sprites.png की स्थिति के साथ प्रतिक्रिया व्यक्त की अगर मैं एक का उपयोग करें पूर्ण पथ जैसे क्रोम-एक्सटेंशन: // pfionnbgiepoddidhifofhiijoojachg/छवियों, यह किसी समस्या के बिना छवि पाता है। – ForeignerBR