有没有一种更快的方法可以在网页中的 url/链接旁边添加图标 - 替代使用“onload”事件？

Question

我正在编写一个 Firefox 插件，它会在网页中的所有 URL 旁边添加小图标。

我现在这样做的方式是：

1. window.addEventListener("load", AddIconsToURLs, false);
2. 在 AddIconsToURLs 函数中： 获取标签名称“a”的所有元素 对于每个“a”元素，附加一个“img”元素。

然而，对于某些网页，图标需要很长时间才能出现，因为“onload”事件需要时间。

有没有更快的方法来实现这一点？ 有没有办法在加载特定链接后立即在链接旁边添加图标，而不是等待所有链接加载，然后在每个链接旁边添加图标？

任何帮助表示赞赏。谢谢。

Answer 1

您想对这些图像做什么？有什么特别的吗？如果只是为了美观，更简单的方法是在插件中加载 CSS 样式表并使用 :after 伪元素：

a:after {
  content: url('chrome://youraddon/skin/imagefile.png');
}

不涉及 JavaScript 处理:)

您可以使用以下方式加载自定义 CSS 文件：

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
          .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
          .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://youraddon/skin/cssfile.css", null, null);

if(!sss.sheetRegistered(uri, sss.AGENT_SHEET)) {
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}

另请参阅 使用样式表服务。

Answer 2

您还可以收听另一个活动：

document.addEventListener("DOMContentLoaded", AddIconsToURLs, false);