在chrome扩展中插入图像

Question

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

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

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

有关如何修改manifest.json的任何想法？

Answer 1

问题有两种可能的原因。

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

清单文件中启用了

2. "manifest_version": 2。默认情况下，这会禁用所有外部使用的资源。发生此错误时，控制台中将显示以下消息：

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

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

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

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

  

自Chrome 58以来已弃用。请使用runtime.getURL。

Answer 2

我找到的唯一实用的解决方案是：

my.html

<img id="icon" src="./icon.png" alt="">

content.js

let icon = document.getElementById("icon);
icon.src = chrome.runtime.getURL("icon.png");

manifest.js

"web_accessible_resources": [{
    "matches": ["<all_urls>"],
    "resources": ["icon.png"]
}

Answer 3

这个解决方案对我有用。

• 在扩展目录中创建一个名为“images”的文件夹。
• 保留该目录中的所有图像文件。
• 在 manifest.json 文件中添加 "web_accessible_resources": ["logo.png"]
• 使用 content.js 中的 src='chromeextension://[ID]/images/logo.png' 访问它