如何使用 Google Chrome 扩展向图像添加 HTML 链接？答案

【问题标题】：How can I add to an image an HTML link using Google Chrome extension?如何使用 Google Chrome 扩展向图像添加 HTML 链接？
【发布时间】：2012-05-06 08:25:15
【问题描述】：

我已使用我的 Google Chrome 扩展程序在特定域上的所有页面中使用 CSS 将图像插入到 div 中。用户不断要求我将图像链接到域的主页。我不知道该怎么做。

图片位于页面的右上角。基本上我只需要注入 html

<a href="domain.com">[IMAGE]</a>

其中 [IMAGE] 是图像。

我不认为我可以用 CSS 做到这一点，所以我不知道该怎么做。

更新：

我需要将它附加到当前元素，而不是创建新元素。

【问题讨论】：

你用的是什么扩展？

标签： html css google-chrome-extension inject

【解决方案1】：

您可以添加一个注入正确 html 的 js 文件，而不仅仅是使用 css 文件。

你的 js 可能是这样的：

var node = document.createElement("a");
node.setAttribute('href',"http://canop.org");
var img = document.createElement("img");
img.setAttribute('src', "http://canop.org/chrall/screens/screen_01.png");
node.appendChild(img);
document.body.insertBefore(node, document.body.firstChild);

这是一个演示 js 的小提琴：http://jsfiddle.net/dystroy/sftAX/

【讨论】：

我需要将它定位在页面上并为其编写css。
想通了。 img.setAttribute('id', "img-link"); 然后根据需要为 #img-link 做 css。
等待我如何将 HTML 放在页面上的某个位置，与其他 HTML 元素相关？此方法只将其放在顶部。
我需要将它附加到 current 元素，而不是创建新元素。
如果你想把它放在其他地方，你必须根据你的需要调整代码。将“document.body”更改为您要添加的节点。