গুগল ক্রোম এক্সটেনশনগুলি - সিএসএস সহ স্থানীয় চিত্রগুলি লোড করা যায় না

Question 1

আমার একটি সহজ ক্রোম এক্সটেনশন রয়েছে যা কোনও ওয়েবসাইটকে সংশোধন করতে কন্টেন্ট স্ক্রিপ্ট বৈশিষ্ট্যটি ব্যবহার করে। আরও নির্দিষ্টভাবে, background-imageওয়েবসাইটটির।

কোনও কারণে আমি স্থানীয় চিত্রগুলি এক্সটেনশনে প্যাক করা সত্ত্বেও ব্যবহার করতে সক্ষম হতে পারছি না।

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

এটি হ'ল, সহজ সিএসএস ... তবে এটি কার্যকর হবে না। ব্রাউজারটি চিত্রটি লোড করে না।

Question 2

আপনার চিত্র 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;

Question 3

ক্রোমের আই 18 এন সমর্থন রয়েছে যা আপনার সিএসএসে আপনার এক্সটেনশানটিকে রেফারেন্স করার ক্ষমতা সরবরাহ করে। আমি আমার চিত্রগুলি এক্সটেনশনে একটি চিত্র ফোল্ডারে রাখি, তাই সিএসএসে রেসেট সম্পদগুলি এর মতো:

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

Question 4

এই প্রশ্নের অনেক পুরানো উত্তর এবং সমাধান রয়েছে।

আগস্ট 2015 পর্যন্ত (ক্রোম 45 এবং ম্যানিফেস্ট সংস্করণ 2 ব্যবহার করে), ক্রোম এক্সটেনশানগুলির মধ্যে স্থানীয় চিত্রগুলির সাথে লিঙ্ক করার জন্য বর্তমান "সেরা অনুশীলন" নিম্নলিখিত পদ্ধতির।

1) আপনার এক্সটেনশনের চিত্রগুলির ফোল্ডারে কোনও আপেক্ষিক পথ ব্যবহার করে আপনার সিএসএসের সম্পদের সাথে লিঙ্ক করুন :

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

2) আপনার এক্সটেনশনের ম্যানিফেস্ট.জসন ফাইলের ওয়েব_অ্যাক্সেসিবল_ রিসোর্স বিভাগে স্বতন্ত্র সম্পদ যুক্ত করুন:

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

দ্রষ্টব্য: এই পদ্ধতিটি কয়েকটি ফাইলের জন্য উপযুক্ত তবে অনেকগুলি ফাইলের সাথে এটি ভাল স্কেল করে না।

পরিবর্তে, একটি আরও ভাল পদ্ধতি হ'ল প্রদত্ত ডিরেক্টরিতে সমস্ত ফাইলকে সাদা তালিকাভুক্ত করার জন্য ম্যাচের নিদর্শনগুলির জন্য ক্রোমের সমর্থন উপার্জন করা:

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

এই পদ্ধতির ব্যবহার আপনাকে দেশীয় সমর্থিত পদ্ধতিগুলি ব্যবহার করে আপনার ক্রোম এক্সটেনশনের সিএসএস ফাইলে দ্রুত এবং অনায়াসে চিত্রগুলি ব্যবহার করার অনুমতি দেবে।

Question 5

একটি বিকল্প হ'ল আপনার চিত্রকে বেস 64 এ রূপান্তর করা :

এবং তারপরে আপনার সিএসএসে ডেটা ঠিক রাখুন:

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

যদিও নিয়মিত ওয়েবপৃষ্ঠা বিকাশ করার সময় আপনি এটি ব্যবহার করতে চান এমন কোনও দৃষ্টিভঙ্গি নাও থাকতে পারে , ক্রোম এক্সটেনশন তৈরির কিছুটা প্রতিবন্ধকতার কারণে এটি দুর্দান্ত বিকল্প।

Question 6

আমার সমাধান।

ম্যানিফেস্ট ভি 2 এর সাহায্যে আপনাকে web_accessible_resourcesফাইলটিতে যুক্ত করতে হবে এবং তারপরে chrome-extension://__MSG_@@extension_id__/images/pattern.pngআপনার সিএসএস ফাইলে ইউআরএল হিসাবে ব্যবহার করতে হবে।

সিএসএস:

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

ম্যানিফেস্ট.জসন

{
  "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"
     ]
}

পিএস আপনার ম্যানিফেস্ট.জসন এটির থেকে আলাদা দেখতে পারে।

Question 7

এই সিএসএস-সংস্করণটি কেবল এক্সটেনশন পরিবেশে (অ্যাপ পৃষ্ঠা, পপআপ পৃষ্ঠা, ব্যাকগ্রাউন্ড পৃষ্ঠা, বিকল্প পৃষ্ঠা) পাশাপাশি কন্টেন্ট_স্ক্রিপ্ট CSS ফাইলগুলিতে কাজ করে।

.বিহীন ফাইলে, আমি সর্বদা শুরুতে একটি পরিবর্তনশীল সেট করি:

@extensionId : ~"__MSG_@@extension_id__";

তারপরে, আপনি যদি চিত্রগুলির মতো এক্সটেনশান-স্থানীয়-সংস্থানগুলি উল্লেখ করতে চান তবে ব্যবহার করুন:

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

Question 8

একটি বিষয় উল্লেখ করার জন্য হ'ল ওয়েব_অ্যাক্সেসযোগ্য_স্রোতে আপনি ওয়াইল্ডকার্ড ব্যবহার করতে পারেন। পরিবর্তে তাই

"চিত্র / প্যাটার্ন.পিএনজি"

তুমি ব্যবহার করতে পার

"চিত্র / *"

Question 9

কেবলমাত্র ডকুমেন্টেশন অনুযায়ী স্পষ্ট করতে, একটি এক্সটেনশনের প্রতিটি ফাইলই এর মতো পরম URL দ্বারা অ্যাক্সেসযোগ্য:

ক্রোম-এক্সটেনশন: // <extensionID>/<pathToFile>

নোটটি <extensionID>হ'ল একটি অনন্য শনাক্তকারী যা প্রতিটি এক্সটেনশনের জন্য এক্সটেনশন সিস্টেম উত্পন্ন করে। আপনি URL ক্রোম: // এক্সটেনশনে গিয়ে আপনার সমস্ত লোডযুক্ত এক্সটেনশনের আইডি দেখতে পারেন । <pathToFile>এক্সটেনশন শীর্ষ ফোল্ডারের অধীনে ফাইলের অবস্থান হয়; এটি সম্পর্কিত ইউআরএল হিসাবে একই as

...

সিএসএসে পটভূমি চিত্র পরিবর্তন করা:

#id{পটভূমি-চিত্র: url (" chrome-extension://<extensionID>/<pathToFile>"); }

জাভাস্ক্রিপ্টের মাধ্যমে সিএসএসে পটভূমি চিত্র পরিবর্তন করা:

document.getElementById (' id') .style.backgroundImage = "url ('ক্রোম-এক্সটেনশন: // <extensionID>/ <pathToFile>')");

JQuery এর মাধ্যমে CSS এ পটভূমি চিত্র পরিবর্তন করা:

$ (" #id") .css ("পটভূমি-চিত্র", "ইউআরএল ('ক্রোম-এক্সটেনশন: // <extensionID>/ <pathToFile>')");