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

Question

我正在尝试使用 Chrome 扩展中的 content.js 向网页添加按钮，但我最终没有加载源图像。这是我的 content.js 代码：

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

当我检查开发者模式并检查按钮时，将鼠标悬停在图像源上后会出现以下 link：

https://www.example.com/images/logo_balloon.png

我创建了 HTML 文件并复制了上面的代码，图像出现在那里。我在哪里犯了错误？你能帮我解决一下吗？

Answer 1

为了将 app/extension 安装目录中的相对路径转换为完全限定的 URL，您可以使用

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

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

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

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

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

Adding image for a button using content.js in chrome extensions

html

javascript

google-chrome-extension