在內容腳本中丟失CSS

Question

我使用colorbox插件在特定頁面中創建模態對話框。創建對話框，但我失去了我的CSS的所有邊界/背景覆蓋...在谷歌瀏覽器的控制檯我得到這樣的錯誤：

https://www.website.com/br/cgi-bin/images/controls.png [404 找不到]

https://www.website.com/br/cgi-bin/images/border.png [404 未找到]

雖然文件 'controls.png' 和 'border.png' 是在擴展/ CSS的本地目錄...

我injecti通過Google Chrome擴展程序的content_script使用CSS。清單：

"content_scripts": [ 
    { 
    "matches": ["<all_urls>"], 
    "css": ["colorbox.css"], 
    "js": ["jquery.min.js", "jquery.colorbox.js", "dominteract.js"], 
    "run_at": "document_end", 
    "all_frames": true 
    }], 

我注意到，在CSS源代碼中的圖像鏈接這樣：

cboxOverlay {背景：網址（圖像/ overlay.png）重複0 0;}

如何將此目錄聲明爲chrome的擴展名知道這是本地目錄而不是遠程？

Answer 1

要連結你的形象，你必須包含您的擴展目錄，如：

background:url('chrome-extension://__MSG_@@extension_id__/images/overlay.png') repeat 0 0; 

您可能需要在你的清單中添加映像，作爲這樣的web_accessible_resource：

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