Google Chrome扩展程序相对路径

Question

我正在开发一个谷歌Chrome扩展程序,我遇到了相对路径问题.如果我给出图像的相对路径并在某个页面中打开插件,它将在网站的路径而不是扩展名中查找该图像.

有任何想法吗？

Answer 1

如果您在扩展页面(背景,弹出窗口,信息栏等)中使用CSS,那么您可以使用斜杠(/)的相对路径:

background-image:url("/sprites.png");

以上应该有用,每个人都使用它.但是,如果您将其用于内容脚本并且您可以对任何css执行相同操作,则需要使用预定义消息,如:

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

如果要以编程方式设置它,可以使用chrome.extension.getURL语法,如下所示:

var url = chrome.extension.getURL('sprites.png');

这些是您可以引用特定网址/图片的方式.

此外,如本回答所述,如果将图像资源放在目录中,则无法在网页DOM中自动访问这些文件.开发人员应使用manifest.json文件中的"web_accessible_resources"设置指定可以加载页面的资源:

Answer 2

@ mohamed的回答对我有用,但我花了一段时间把它放在一起.我已经回答了其他问题,但这里的解决方案对我有用.

我的解决方案

使用Menifest v2,您需要添加web_accessible_resources到文件中,然后将其chrome-extension://__MSG_@@extension_id__/images/pattern.png用作css文件中的URL.

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可能看起来与这个不同.