JS功能不再适用

时间:2012-04-13 01:50:13

标签: google-chrome-extension

大家好。

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

我的扩展功能正常,但集成的 JS 功能仅适用于页面加载或刷新时。 但是在浏览时,当您返回页面或文本应该被修改时, JS 功能不再适用:cry:

这是一个更好地解释自己的例子;) 功能是用另一个文本替换文本:

的manifest.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);

main.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/

无需每次刷新页面。

如果有人可以帮助我? 谢谢 ;) 特斯拉

修改/ 我在此消息后发布了回复

1 个答案:

答案 0 :(得分:0)

正如我在评论中所提到的,你处理一个AJAX驱动的页面让事情变得相当棘手(任何人如何处理ajax网站的建议肯定会受到赞赏)。
我注意到该页面的一件事是它获取页面内容并将它们呈现给它执行的页面Surface.Renderer.invokeUsedComponents所以你可以劫持该函数然后重做你的mod如果window.location等于你要修改的url 。
关于如何劫持该功能的一个简单示例......

(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');

});