JS 功能不再适用

Question

大家好。

我目前正在尝试为 Chrome 浏览器开发扩展程序，但遇到了问题。

我的扩展可以工作，但是集成的 JS 功能只能在页面加载或刷新时工作。 但是在浏览的时候，当返回页面或者文字要修改的时候，JS功能就不再适用了：cry:

这是一个更好地解释我自己的例子；） 功能是用另一个文本替换文本：

ma​​nifest.json：

{
    "content_scripts": [ {
        "js": [ "content.js", "init.js" ],
        "matches": [ "http://battlelog.battlefield.com/*" ],
        "run_at": "document_end"
    } ],
    "name": "My Extension",
    "author" : "Tesla",
    "version": "1.0",
    "description": "DESCRIPTION COMING !",
    "key": "MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBALuyMQ/qwguwISXI8lDNIyQQyuQHQIqLRTekDDomL/UlEv2pWvUKtbnj3yMvNsXu/4KGzKZvcDmCD1W2mEXjk8vrm7rEt3AqXsWooSuqRlWJ3vqiB5/mtA+Hac2whiUSqylC5FJH6LbWNjYAAcHyVxif83GRWfxwPVHFiyQTt5hDAgMBAAECgYEAqYwNRZOKNYSkbL1YJiUn2SxSGily47Nqkxhc8yoLqCYVQY352+AQyBpPNjkwARwjMoUR2EZR2aDiuUp3wqoQllRzLHR61jjUtg+0X5RSgQlIbB/GFVns9/7DqXRBcY5RTmMQZ9H53UrIIfZ9fdwZyQ4yOAc2rv14YnwjjZlU/gECQQD6cjUJv7Ps891z2e0lHE2XALIdpaRa4Q5Isx6GairJKlzv722zK2/ftECE1VV+rElwtEw+teCRI7K8Cawx60iHAkEAv9u/9Fz7ZM7j5bgYSkZx043K+PT8yqNTQKtwpwSRDShje8iQkzW9HjLjxlC6qc8uN0sE+H48TaHslCJ/pQntZQJBAM8sDG3NFASuUoGUQ5TQTerc23qk3EmFJHDFIzojttMD5S9hy0hMZVYTYM/BPeD0mifOLcguYd8OPbtI8RW2QR8CQBb9UQIKBkGtHNfQ+HAmAsuzyOeOC6CIc5hjMquAu5TVCx6xCMnq/Y9Zz7tavxNL9SDBB4ZzMeyng364p4zyJJUCQG2GRV0BiZfcxhT7/YV+E+t037pV/NisdXomDgCbSBpkN/gls0wI/6MkhlrU6YmfaZ/hG2QtGs7VCKRJ8fI36Nw=",
    "minimum_chrome_version": "14.0"
}

content.js：

var head = document.getElementsByTagName("head")[0];

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = chrome.extension.getURL('main.js');
head.appendChild(script);

var css = document.createElement('link');
css.type = 'text/css';
css.rel = 'stylesheet';
css.href = chrome.extension.getURL('main.css');
head.appendChild(css);

ma​​in.js：

var modif = {
  change: 'Text-Change'
};

var original = {
  change: /Leaderboards/gm,
};

$(document).ready(function() {
    $('.base-middle').each(function() {
        var $p = $(this);
        var html = $p.html();
            $p.html(html.replace(original.change, modif.change));  
    });
});

函数必须编辑文本：

排行榜

在

文本更改

在这个页面上：http://battlelog.battlefield.com/bf3/leaderboard/

无需每次都刷新页面。

如果有人可以帮助我？ 谢谢 ;） 特斯拉

编辑/ 我在此消息后发布了回复

Answer 1

正如我在评论中提到的，您处理 AJAX 驱动的页面使事情变得相当棘手（任何人关于如何处理 ajax 网站的任何建议都将不胜感激）。
我注意到该页面的一件事是在它获取页面内容并将它们呈现到它执行的页面Surface.Renderer.invokeUsedComponents 这样您就可以劫持该功能，然后如果 window.location 等于您要修改的 url，则重做您的 mod。 一个关于如何劫持该函数的简单示例如下所示......

(function(old){
Surface.Renderer.invokeUsedComponents = function(a){
    //  Check window.location and if it matches then do something
    alert(a);
    old.apply(Surface.Renderer, arguments);
}   
})(Surface.Renderer.invokeUsedComponents)

请注意，我没有进行大量测试，如果他们更改了他们的 api，它可能会破坏您的扩展......
祝你好运！

编辑
我忘了提到您需要将该代码注入页面并让它与扩展程序通信。
这是一些应该可以工作的代码（我没有测试它，只是修改了一些我已经拥有的代码）......

// http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication
var comDiv = document.createElement('div');
comDiv.setAttribute("id", "stateChangeDiv");
document.documentElement.appendChild(comDiv);

script = function(old) {
    // Create the event that the content script listens for
    var stateChangeEvent = document.createEvent('Event');
    stateChangeEvent.initEvent('stateChangeEvent', true, true);

    // overide the function that gets called after the page is updated
    Surface.Renderer.invokeUsedComponents = function(a) {

        var hiddenDiv = document.getElementById('stateChangeDiv');
        hiddenDiv.dispatchEvent(stateChangeEvent);
        //console.debug(c);
        old.apply(Surface.Renderer, arguments);
    }

}

function override(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')(Surface.Renderer.invokeUsedComponents);';
    document.documentElement.appendChild(script); // run the script
    document.documentElement.removeChild(script); // clean up
}

override(script);

document.getElementById('stateChangeDiv').addEventListener('stateChangeEvent', function() {
// This will get executed everytime Surface.Renderer.invokeUsedComponents does on the page
    alert('page updated, check your window.location and do something');

});