在chrome扩展中使用content.js为按钮添加图像

olhwl3o2  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(502)

这个问题在这里已经有了答案

我正在尝试在js文件中为chrome扩展名添加innerhtml元素中的图像(1个答案)
9小时前关门。
我正在尝试使用添加按钮到网页 content.js 在chrome extensions中,但最终没有加载源图像。这是我的 content.js 代码:

var confirmButton = document.createElement('div');
    confirmButton.innerHTML = '<button><img src="../images/logo_balloon.png" /></button>';
    document.body.appendChild(confirmButton);

当我选中开发人员模式并检查按钮时,将鼠标悬停在图像源上后,会出现以下链接: https://www.example.com/images/logo_balloon.png 我创建了一个html文件,并复制了上面的代码和图片。我哪里出错了?你能帮我吗?

euoag5mw

euoag5mw1#

要将应用程序/扩展安装目录中的相对路径转换为完全限定的url,可以使用

const url = chrome.runtime.getURL('./your-relative-path-here');

但在这种情况下,您可能需要在清单文件中将此资产标记为可访问的web资源(请参阅此处的详细信息)。
另一个选择(我认为是最简单的一个)是将图像转换为base64。网上有很多编码器

<img src="data:image/png;base64,aBVORw..." />

相关问题