使用 FireFox 扩展在本地更改远程网站的 JavaScript？

Question

我正在尝试编写一个浏览器扩展来添加一些功能并重新格式化第三方网站上的一些数据。

我安装了 Firefox 开发者版。然后，我基于Beastify 创建了一个简单的附加扩展。

我编写了一个简单的脚本来监控 span 元素的 innerHTML 何时发生变化，然后进行一些处理。

这段代码有效，但不是我想做的事情：

function fixformat(){
    var value = document.getElementById("value");

    var valueFloat = parseFloat(value.innerHTML);

    if (valueFloat < 1000) valueFloat += 1000;

    value.innerHTML = valueFloat;
}
setInterval(fixformat, 100);

在远程服务器上，它使用以下代码实时更新值：

totValue += _currentValue;
value = document.getElementById("value");
value.innerHTML = totValue;

但我想替换这一行：

value.innerHTML = totValue;

有了这个：

value.innerHTML = totValue + 1000;

这段代码隐藏在一个巨大的远程 javascript 文件中，这是我浏览他们的网站时加载的大约两打 javascript 之一。这个 javascript 文件有大约 4000 行代码。当有新信息可用时，它每 1-15 秒执行一次。

有没有办法以编程方式挂钩到那个远程 javascript 文件？对那行代码做一些简单的搜索和替换，这会让其他一切正常执行吗？

Answer 1

您将使用beforescriptexecute 事件侦听器并更改脚本的.textContent。

https://developer.mozilla.org/en-US/docs/Web/Events/beforescriptexecute

这是一个例子：

document.addEventListener("beforescriptexecute", function(e) {
        src = e.target.src;
        content = e.target.text;

        if (src.search("i18n.js") > -1) {
            // Stop original script
            e.preventDefault();
            e.stopPropagation();
            window.jQuery(e.target).remove();

            var script = document.createElement('script');

            script.textContent = 'script you want';

            (document.head || document.documentElement).appendChild(script);
            script.onload = function() {
                this.parentNode.removeChild(this);
            }
        }
    }
}

Answer 2

好的，我现在放弃了浏览器扩展的想法，因为我可以使用Greasemonkey 脚本做我想做的事。这是我编写的脚本，用于在远程 JavaScript 中创建一个“挂钩”以替换一行代码：

// ==UserScript==
// @name        test load
// @namespace   testing
// @description testing
// @include     https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
// @version     1
// @grant       none
// @run-at document-start
// ==/UserScript==
document.addEventListener("beforescriptexecute", function(e) {
    src = e.target.src;
    content = e.target.text;
    console.log("src: " + src);
    if (src.search("script.js") > -1) {
        var newContent = "";
        $.ajax({
            async: false,
            type: 'GET',
            url: '/script.js',
            success: function(data) { //inject code via search and replace
                newContent=data.replace('totValue += value;', 'totValue += value + 1000;');
            }
        });
        // Stop original script
        e.preventDefault();
        e.stopPropagation();
        window.jQuery(e.target).remove();
        var script = document.createElement('script');
        script.textContent = newContent;
        (document.head || document.documentElement).appendChild(script);
        script.onload = function() {
            this.parentNode.removeChild(this);
        }
    }
});