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

问题描述

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

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

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

我正在将该 html 标记正确插入网站，但自然无法加载该 logo.png 图像.

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

任何关于如何修改 manifest.json 的想法?

Any ideas on how to modify manifest.json?

推荐答案

导致此问题的可能原因有两个.

There are two possible causes for the problem.

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

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.

"manifest_version": 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:

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

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

解决问题，将资源加入白名单，即清单文件中的web_accessible_resources":

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

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

更新:chrome.extension.getURL('logo.png')

自 Chrome 58 起已弃用.请使用 runtime.getURL.

Deprecated since Chrome 58. Please use runtime.getURL.

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