Question

加载的页面html包含一个js函数：

<html>
....
<body>
  <script>
  function test(){
    alert("I'm master");
   //here is the page original funciton
  }
  </script>
</body>
</html>

我想写一个chrome扩展加载我的自定义js文件替换当前页面js function test()，例如：

new function name =>  
function test() {
    alert("I'm a new function come my chrome extension ");
}

我该怎么办？

Answer 1

内联脚本会立即由Chrome执行，您无法阻止它们运行。我们无法在解析之前修改html：chrome extension - modifying HTTP response。

唯一的机会是该函数仅被声明，但页面脚本不会立即调用。在这种情况下，存在一种工作解决方案。

声明一个内容脚本，它将使用新的函数声明注入<script>元素：

的manifest.json

"content_scripts": [{
    "matches": ["http://somedomain.com/blabla*"],
    "js": ["content.js"]
}],

content.js

document.body.appendChild(document.createElement('script')).text =
    getFunctionCode(function() {
        function test() {
            alert("I'm a new function from my chrome extension");
        }
    });

function getFunctionCode(fn) {
    return fn.toString().match(/\{([\s\S]*?)\}$/)[1];
}

另请参阅：a great answer about injecting page-level scripts。

文件加载完成后，有什么方法可以替换文件js功能？

1 个答案: