在Chrome扩展中插入图像 [英] Insert an image in chrome extension

问题描述

我想知道如何在Chrome扩展程序中插入图片。

$ b

 < img id =imagesrc =logo.png/> 
  

我将该html标记正确地插入网站，但自然无法加载该徽标。 PNG图像。

关于如何修改manifest.json的任何想法？ 有两种可能的原因。

1. 您正在使用 src =注入图片logo.png。插入的图片元素成为页面的一部分，因此浏览器不会尝试从扩展名加载图片。
   
   要解决此问题，请使用 chrome.extension.getURL（'logo.png'）; 来获取资源的绝对URL。

在清单文件中启用了chrome / extensions / manifestVersion.htmlrel =noreferrer> manifest_version：2 。这会默认禁用所有资源以供外部使用。发生此错误时，控制台中会显示以下消息：

不允许加载本地资源：chrome：//gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

要解决此问题，请将资源添加到白名单，即 web_accessible_resources 在清单文件中：



  ...，
web_accessible_resources：[logo.png] 
} 
  

I want to know how to insert an image in a Chrome extension.

<img id="image" src="logo.png" />

I'm inserting that html tag correctly into a website, but naturally can't load that logo.png image.

Any ideas on how to modify manifest.json?

解决方案

There are two possible causes for the problem.

1. You're injecting an image with src="logo.png". The inserted image element becomes a part of the page, so the browser does not try to load the image from the extension.
   To fix this problem, use chrome.extension.getURL('logo.png'); to get the absolute URL of the resource.

2. "manifest_version": 2 is enabled in the manifest file. That disables all resources for external use, by default. When this error occurs, the following message appears in the console:

   Not allowed to load local resource: chrome://gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

   To solve the problem, add the resource to a whitelist, namely "web_accessible_resources" in the manifest file:

     ...,
     "web_accessible_resources": ["logo.png"]
   }
   

这篇关于在Chrome扩展中插入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！