Google Chrome 扩展 - 无法使用 CSS 加载本地图像

问题描述 投票：0回答：12

我有一个简单的 Chrome 扩展程序，它使用内容脚本功能来修改网站。更具体地说，是该网站的 

background-image
。

由于某种原因，我似乎无法使用本地图像，即使它们包含在扩展中。

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

就是这样，最简单的 CSS...但是行不通。浏览器无法加载图像。

css google-chrome-extension background-image
12个回答
278
投票

Chrome 具有 i18n 支持，可以在 CSS 中引用您的扩展。我将图像保存在扩展程序的图像文件夹中，因此在 CSS 中引用资源，如下所示：

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

您的图片网址应类似于 

chrome-extension://<EXTENSION_ID>/image.jpg

你最好通过 javascript 替换 css。来自文档：

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

这个问题有很多较旧的答案和解决方案。

截至 2015 年 8 月（使用 Chrome 45 和 Manifest 版本 2），当前在 Chrome Extensions 中链接到本地图像的“最佳实践”是以下方法。

1) 使用扩展程序图像文件夹的相对路径链接到 CSS 中的资源：

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

2) 将单个资产添加到扩展程序的 manifest.json 文件的 web_accessible_resources 部分：

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

注意：此方法适用于少量文件，但对于许多文件来说扩展性不佳。

相反，更好的方法是利用 Chrome 对“匹配模式”的支持将给定目录中的所有文件列入白名单： { "name": "Example Chrome Extension", "version": "0.1", "manifest_version": 2, ... "web_accessible_resources": [ "images/*" ] } 

使用此方法将允许您使用本机支持的方法快速、轻松地使用 Chrome 扩展的 CSS 文件中的图像。

25
投票
转换

为base64： 然后将数据直接放入你的CSS中，例如：

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

虽然这
可能不是您在定期开发网页时想要使用的方法

，但由于构建 Chrome 扩展程序的一些限制，它是一个很好的选择。

22
投票

使用 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"
     ]
}




附注您的 manifest.json 可能与此不同。

    





      

      
      
      

      

        

          

            

              
9
投票

              
            

          

        

        
扩展环境（应用程序页面，弹出页面，背景页面，选项页面）
以及content_scripts CSS文件。

在 .less 文件中，我总是在开头设置一个变量：



@extensionId : ~"__MSG_@@extension_id__";




然后，如果你想像图像一样引用扩展本地资源，请使用：



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


    



      

      
      
      

      

        

          

            

              
9
投票

              
            

          

        

        



“图像/pattern.png”



你可以使用



“图片/*”

    





      

      
      
      

      

        

          

            

              
4
投票

              
            

          

        

        
文档
，扩展中的每个文件也可以通过绝对 URL 访问，如下所示：


  
chrome-扩展://
<extensionID>
/
<pathToFile>



注意 
<extensionID>
 是分机系统为每个分机生成的唯一标识符。您可以通过访问 URL 
chrome://extensions
 查看所有已加载扩展程序的 ID。 <pathToFile> 是扩展程序顶部文件夹下的文件位置；它与相对 URL 相同。


...



更改 CSS 中的背景图像：




  
#id
 { 背景图像：
  url("
chrome-extension://<extensionID>/<pathToFile>
"); } 



通过 JavaScript 更改 CSS 中的背景图片：




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



通过 jQuery 更改 CSS 中的背景图片：




  
$("
#id
").css("背景图片",
  “url('chrome-extension://
<extensionID>
/
<pathToFile>
')”);

    





      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
预定义消息






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





    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        




    chrome.extension.getUrl()
  1.  -> 
    chrome.runtime.getUrl()
    “web_accessible_resources”->“web_accessible_resources.resources”
    2. 

  2. 填写“web_accessible_resources.matches”
    3. 

  3. 

    4. 2、3这样：


"web_accessible_resources": [{
  "resources": ["images/logo.png"],
  "matches": ["<all_urls>"],
}],



参考：




    https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#web-accessible-resources
  • 

    
    • 




      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


这是我使用清单 v.3 的解决方案：


//Get the url from some file within your extension's folder and store it on a global variable
var url = chrome.runtime.getURL('my_extension/img/Icon.svg');

//Take off the last part from the url string
url = url.replace('img/Icon.svg', '');



现在将每个 img 标签上的 src 属性替换为自定义属性，并保留文件路径的值，如下所示：


<img ref-file="img/IconStop.svg" alt="">



加载 html 后运行此函数：


loadImgs = function () {
    $("img[ref-file]").each(function() {
        var ref_file = $(this).attr('ref-file');
        url = url + ref_file;
        $(this).attr('src', url);
    });
}


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
/public/images/logo.png
 中，我的组件存储在 /src/components/shared/logo.vue 中
<template>
  <img :src="logoURL" alt="Logo" />
</template>
<script>
export default {
    computed: {
        logoURL() {
            return chrome.runtime.getURL("images/logo.png");
        }
    }
}
</script>



manifest.json

{
  "manifest_version": 3
}


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.