使用不带Greasemonkey的Javascript，通过Firefox扩展动态更改网页内容

Change content of a webpage dynamically with a Firefox extension using Javascript without Greasemonkey

本文关键字：扩展 Firefox 动态 网页内容 通过 Greasemonkey Javascript      更新时间：2023-09-26

我想更改网页的内容，以放置根据网页而更改的元素。

例如，我想显示一个div元素，其文本为"You are onhttp://www.google.com"当用户在网站上时http://www.google.com但是当用户转到http://www.yahoo.comdiv应该更改并显示"You are onhttp://www.yahoo.com".

我想找的是一个例子（我希望不是第一个想到这种把戏的人）。

这里有一种在页面上获取内容的方法，显示当前URL。这不是一个合适的方法，但它会带来一些明显的变化。

这些步骤将从上面提到的helloworld示例开始，并对其进行修改以在网页上注入一些文本。

获取原始文件

  1. 将扩展文件本地保存在您的计算机上
  2. 将XPI文件重命名为starter.zip
  3. 将starter.zip的内容复制到一个新文件夹"showUrl"中，这样您就可以编辑这些文件
  4. 在文本编辑器中打开browserOverlay.js（在showUrl/content/中）

插入新代码

  1. 菜单项"工具"|"Hello World！"|你好，世界！将触发此方法：

    XULSchoolChrome。BrowserOverlay={/***对用户说"你好"。*/sayHello:函数（aEvent）{//代码从这里开始。

  2. 将此代码添加到"sayHello"功能

    sayHello:函数（aEvent）{尝试{//gBrowser是一个全局值var document=gBrowser.contentDocument；
        var doc_bodies = document.getElementsByTagName('body');
    var doc_body = doc_bodies[0];
    var first_element = doc_body.firstChild;
    var url_div = gBrowser.contentDocument.createElement('div');
    url_div.id = 'added-by-firefox-extension';
    url_div.innerHTML = document.URL;
    // add the url at the top of the document body
    doc_body.insertBefore( url_div, first_element );
    // add the url at the end of the document body
    doc_body.appendChild( url_div );
}
catch(e)
{
    alert(e);
}

  3. 压缩showUrl 的内容

  4. 将zip文件的扩展名更改为xpi
  5. 将xpi文件拖放到firefox上
  6. 导航到网页
  7. 打开菜单项"工具"|"Hello World！"|你好，世界

对我来说，主要的痛点是弄清楚如何使用gBrowser访问网页。

您正在寻找一个名为Greasemonkey的现有Firefox插件（在java脚本爱好者中非常流行）。它使您能够通过用户脚本通过java脚本动态更改网页内容。

上已有大量用户脚本可用http://userscripts.org/为了你的目的。向它们学习，并对其进行修改以供您使用。

您的问题过于宽泛。为了开始开发Firefox扩展，您需要执行许多步骤。这里有大量的文档和示例可以帮助您入门：https://developer.mozilla.org/en/extensions

您应该学习XUL（以及带绑定的XBL）来附加XUL DOM节点。您不应该将HTML节点附加到HTML文档中。请参阅扩展部分，了解如何构建扩展。

您可以这样做：

从两个隐藏div开始：第一个将有一个js条件（例如onChange），该条件将用网站的URL（在js加载之后）编写。然后js更改innerHTML（或者仅更改类，如果您使用css使标签可见），该类将包含第一个div的值

很简单：）

相关文章：