使用没有 Greasemonkey 的 Javascript 使用 Firefox 扩展动态更改网页内容答案

【问题标题】：Change content of a webpage dynamically with a Firefox extension using Javascript without Greasemonkey使用没有 Greasemonkey 的 Javascript 使用 Firefox 扩展动态更改网页内容
【发布时间】：2013-08-02 00:44:04
【问题描述】：

我想更改网页的内容以放置一个根据网页而变化的元素。

例如当用户在网站http://www.google.com 上时，我想显示一个带有文本“你在http://www.google.com”的 div 元素，但是当用户转到http://www.yahoo.com 时，div 应该更改并显示“你在http://www.yahoo.com"。

我正在寻找的是某种开始的例子（我希望不是第一个想到这种技巧的人）。

【问题讨论】：

地址栏不是已经显示这个信息了吗？
@Richard H 是的，我只是把这个例子作为一个非常简单的起点。
你想找到/创建一个 Firefox 扩展，它会这样做吗？或者您想要示例 javascript 代码，您可以使用 Firebug 将其插入到页面源中？或者你想要一些本地网络服务器/代理，它会接受你的 URL，加载相应的页面，更新它并为你显示？
@zmila 我想创建一个，但如果现有一个足够简单（我是新手），那就太好了。

标签： javascript firefox webpage

【解决方案1】：

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

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

获取原始文件

将extension file 本地保存在您的计算机上。
将 XPI 文件重命名为 starter.zip
将 starter.zip 的内容复制到新文件夹“showUrl”中，以便您编辑文件。
在文本编辑器中打开 browserOverlay.js（在 showUrl/content/ 中）

插入新代码

菜单项工具 |你好世界！ |你好世界！会触发这个方法：
XULSchoolChrome.BrowserOverlay = { /** * 向用户说“你好”。 */ 说你好：函数（aEvent）{ // 代码从这里开始。

将此代码添加到“sayHello”函数中

说你好：函数（aEvent）{ 尝试 { // gBrowser 是一个全局值 var 文档 = 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);
}

压缩showUrl的内容
将 zip 文件的扩展名更改为 xpi
将 xpi 文件拖放到 firefox 上
导航到网页
打开菜单项工具 |你好世界！ |世界你好！

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

【讨论】：

【解决方案2】：

您正在寻找一个名为 Greasemonkey 的现有 Firefox 插件（在 java 脚本极客中非常流行）。它使您可以通过userscripts通过java脚本动态更改网页内容。

http://userscripts.org/ 已经有很多用户脚本可供您使用。向他们学习并修改它以供您使用。

【讨论】：

感谢您的回答，但我正在寻找一个独立的扩展程序，因此我无法使用 Greasemonkey。

【解决方案3】：

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

【讨论】：

我已经知道如何创建扩展。我正在寻找的是一些代码示例，显示如何访问网页的内容，更改网页的内容而不将页面变成本地页面（有点像诺顿或 Avast 的 Google 链接旁边显示的小图标网络声誉）。
@Bruno：第一个 Google 结果：developer.mozilla.org/en/…

【解决方案4】：

您应该学习 XUL（以及 XBL 和 binding）来附加 XUL-DOM-Nodes。您不应将 HTML 节点附加到 HTML 文档。请参阅Extensions-section 了解如何构建扩展。

【讨论】：

我正在学习 XUL 教程，但是当我使用 Firefox 尝试我的代码时，我得到“远程 XUL，此页面使用的技术支持已被放弃”。
您不能使用 file:// 或相对路径。您必须使用 chrome://。您可以通过 chrome.manifest 文件将文件附加到 chrome。在您的 firefox-profile-folder (cmd: %APPDATA%) 中打开您的 extensions-folder，您会找到示例（如果您安装了扩展）。
查看以下示例：developer.mozilla.org/en/XUL_School/…。在那里你可以下载一个非常简单的例子。

【解决方案5】：

你可以这样做：

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

这很简单:)

【讨论】：

这仍然是最好的方法吗？