ส่วนขยายของ Google Chrome - ไม่สามารถโหลดภาพในเครื่องด้วย CSS

ฉันมีส่วนขยาย Chrome แบบธรรมดาที่ใช้คุณลักษณะสคริปต์เนื้อหาเพื่อแก้ไขเว็บไซต์ โดยเฉพาะอย่างยิ่งbackground-imageของเว็บไซต์ดังกล่าว

ด้วยเหตุผลบางอย่างดูเหมือนว่าฉันไม่สามารถใช้รูปภาพในเครื่องได้แม้ว่าจะบรรจุในส่วนขยายแล้วก็ตาม

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

แค่นั้นแหละ CSS ที่ง่ายที่สุด ... แต่มันใช้ไม่ได้ เบราว์เซอร์ไม่โหลดภาพ

URL รูปภาพของคุณควรมีลักษณะดังนี้ chrome-extension://<EXTENSION_ID>/image.jpg

คุณควรเปลี่ยน css ผ่าน javascript จะดีกว่า จากเอกสาร :

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

Chrome มีการสนับสนุน i18n ที่ให้ความสามารถในการอ้างอิงส่วนขยายของคุณใน CSS ของคุณ ฉันเก็บรูปภาพไว้ในโฟลเดอร์รูปภาพในส่วนขยายดังนั้นการอ้างอิงเนื้อหาใน CSS จึงเป็นดังนี้:

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

มีคำตอบและคำตอบที่เก่ากว่ามากมายสำหรับคำถามนี้

ในเดือนสิงหาคม 2015 (โดยใช้ Chrome 45 และ Manifest เวอร์ชัน 2) "แนวทางปฏิบัติที่ดีที่สุด" ในปัจจุบันสำหรับการลิงก์ไปยังอิมเมจในเครื่องภายในส่วนขยายของ Chromeเป็นแนวทางต่อไปนี้

1) เชื่อมโยงไปยังเนื้อหาใน CSS ของคุณโดยใช้เส้นทางสัมพัทธ์ไปยังโฟลเดอร์รูปภาพของส่วนขยายของคุณ:

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

2) เพิ่มเนื้อหาแต่ละรายการลงในส่วนweb_accessible_resourcesของไฟล์manifest.jsonของส่วนขยายของคุณ:

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

หมายเหตุ: วิธีนี้เหมาะสำหรับไฟล์บางไฟล์ แต่ไม่สามารถปรับขนาดได้ดีกับไฟล์จำนวนมาก

วิธีที่ดีกว่าคือการใช้ประโยชน์จากการสนับสนุนรูปแบบการจับคู่ของ Chrome เพื่ออนุญาตไฟล์ทั้งหมดภายในไดเรกทอรีที่กำหนด:

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

การใช้วิธีนี้จะช่วยให้คุณใช้รูปภาพในไฟล์ CSS ของส่วนขยาย Chrome ได้อย่างรวดเร็วและง่ายดายโดยใช้วิธีการที่รองรับ

ทางเลือกหนึ่งคือการแปลงรูปภาพของคุณเป็น base64:

จากนั้นใส่ข้อมูลลงใน css ของคุณเช่น:

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

แม้ว่านี่อาจไม่ใช่แนวทางที่คุณต้องการใช้เมื่อพัฒนาหน้าเว็บเป็นประจำแต่ก็เป็นตัวเลือกที่ยอดเยี่ยมเนื่องจากข้อ จำกัด บางประการในการสร้างส่วนขยาย Chrome

ทางออกของฉัน

ด้วย Menifest v2 คุณต้องเพิ่มลงweb_accessible_resourcesในไฟล์แล้วใช้chrome-extension://__MSG_@@extension_id__/images/pattern.pngเป็น url ในไฟล์ css ของคุณ

CSS:

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

ps manifest.json ของคุณอาจดูแตกต่างจากรายการนี้

เวอร์ชัน CSS เท่านั้นนี้ใช้งานได้ในสภาพแวดล้อมส่วนขยาย (หน้าแอปหน้าป๊อปอัปหน้าพื้นหลังหน้าตัวเลือก)รวมทั้งไฟล์ CSS content_scripts

ในไฟล์ .less ฉันมักจะตั้งค่าตัวแปรที่จุดเริ่มต้น:

@extensionId : ~"__MSG_@@extension_id__";

จากนั้นในภายหลังหากคุณต้องการอ้างถึง extension-local-resource เช่นรูปภาพให้ใช้:

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

สิ่งหนึ่งที่ต้องพูดถึงคือใน web_accessible_resources คุณสามารถใช้สัญลักษณ์แทนได้ ดังนั้นแทนที่จะเป็น

"images / pattern.png"

คุณสามารถใช้ได้

"ภาพ / *"

เพื่อชี้แจงให้ชัดเจนตามเอกสารทุกไฟล์ในส่วนขยายสามารถเข้าถึงได้โดย URL ที่สมบูรณ์เช่นนี้:

ส่วนขยาย chrome: // <extensionID>/<pathToFile>

โปรดสังเกตว่า<extensionID>เป็นตัวระบุเฉพาะที่ระบบส่วนขยายสร้างขึ้นสำหรับแต่ละส่วนขยาย คุณสามารถดูรหัสสำหรับส่วนขยายโหลดทั้งหมดของคุณโดยไปยัง URL chrome: // extensions <pathToFile>เป็นที่ตั้งของไฟล์ภายใต้โฟลเดอร์ด้านบนของส่วนขยายนั้น เหมือนกับ URL สัมพัทธ์

...

การเปลี่ยนภาพพื้นหลังใน CSS:

#id{background-image: url (" chrome-extension://<extensionID>/<pathToFile>"); }

การเปลี่ยนภาพพื้นหลังใน CSS ผ่าน JavaScript:

document.getElementById (' id') .style.backgroundImage = "url ('chrome-extension: // <extensionID>/ <pathToFile>')");

การเปลี่ยนภาพพื้นหลังใน CSS ผ่าน jQuery:

$ (" #id") .css ("background-image", "url ('chrome-extension: // <extensionID>/ <pathToFile>')");