时间戳

首页 > 解决方案 > 在 chrome 扩展中使用 content.js 为按钮添加图像

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

问题描述

我正在尝试content.js在 Chrome 扩展程序中使用向网页添加一个按钮，但我最终没有加载源图像。这是我的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 文件并复制了上面的代码，图像出现在那里。我在哪里犯错？你能帮我吗？

标签： javascripthtmlgoogle-chrome-extension

解决方案

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

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

但在这种情况下，您可能需要将此资产标记为清单文件中的 Web 可访问资源（请参阅此处的详细信息）。

另一种选择（我认为最简单的选择）是将图像转换为 Base64。在线提供大量编码器

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

推荐阅读