在内容脚本中丢失 CSS答案

【问题标题】：Losing CSS in content script在内容脚本中丢失 CSS
【发布时间】：2013-10-25 21:22:29
【问题描述】：

我正在使用彩盒插件在某些页面中创建模式对话框。对话框已创建，但我丢失了 CSS 的所有边框/背景覆盖...在 google chrome 控制台中，我收到如下错误：

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' 位于 extension/css 的本地目录中...

我正在通过 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{background:url(images/overlay.png) 重复 0 0;}

如何将这个目录声明给 chrome 的扩展，知道这是本地目录而不是远程目录？

【问题讨论】：

标签： css google-chrome-extension colorbox

【解决方案1】：

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

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

您可能需要将您的图片作为 web_accessible_resource 添加到清单中，如下所示：

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

【讨论】：

我编辑了我的问题，无论如何我认为你已经找到了问题......我现在正在尝试更新你的解决方案，如果可行，我接受你的回答。马上回来。