当注入javascript代码覆盖DOM中存在的代码时,会出现问题

A issue when inject a javascript code that OVERRIDES the one existing in DOM?

本文关键字:代码 问题 存在 javascript 注入 覆盖 DOM      更新时间:2023-09-26

我读过这个问题是否有可能注入一个javascript代码覆盖一个存在于DOM?解决方案在大多数情况下都很有效,但有时,似乎页面中的JavaScript代码将首先运行,然后是content_scripts。

这将使' overrides '有时失败。

我的测试代码如下:
//manifest.json
"content_scripts": [
{
    "matches": ["http://*/*"],
    "js": ["js_injector.js"],
    "run_at": "document_start"
}
//js_injector.js
function injectJs(link) {
var scr = document.createElement('script');
scr.type="text/javascript";
scr.src=link;
document.documentElement.appendChild(scr);
}
injectJs(chrome.extension.getURL('my.js'));
//my.js
console.log("in my.js");
function foo() {
    console.log("in my.js foo");
}
//test.html (view this page in chrome)
<html>
<script type="text/javascript">
    console.log("I am here 1110");
    foo()
    console.log("I am here 1111");
</script>
</html>

通常,我会得到以下日志:

in my.js my.js:114
I am here 1110 test.html:4
in my.js foo my.js:116
I am here 1111 test.html:6

但有时,会得到以下日志:

I am here 1110 test.html:4
Uncaught ReferenceError: foo is not defined test.html:5
in my.js test.js:114

似乎在页面和内容脚本中运行代码的顺序是随机的?我的目的是让目标页面运行在内容脚本中定义的js api。有人知道怎么修吗?谢谢!

我发现我的注入