css - 在内容脚本中丢失 CSS

Question

我正在使用 colorbox 插件在某些页面中创建模态对话框。对话框已创建，但我丢失了我的 CSS 的所有边框/背景覆盖...在谷歌浏览器控制台中，我收到如下错误:

https://www.website.com/br/cgi-bin/images/controls.png [404not found]

https://www.website.com/br/cgi-bin/images/border.png [404not found]

虽然文件“controls.png”和“border.png”位于扩展名/css 的本地目录中...

我正在通过 Google Chrome 扩展的 content_script 注入(inject) CSS。 list :

  "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{background:url(images/overlay.png) repeat 0 0;}

如何向 chrome 的扩展程序声明此目录，知道这是本地目录而不是远程目录？

Answer 1

要链接您的图片，您必须包含扩展程序的目录，如下所示:

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

您可能需要将您的图像作为 web_accessible_resource 添加到 list 中，如下所示:

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