Javascript chrome扩展：页面重新加载后的代码计时问题

我正在尝试编写一个简单的chrome扩展来练习javascript，因为我已经掌握了C语言的基本技能，我也想学习JS。我计划编写的扩展应该只在expedia网站（我的例子是expedia.it）上工作，进行搜索并在输出文件（比如电子表格）中返回特定结果。这是我到目前为止写的：

Manifest.json:

{
"name":"Myextension",
"version":"1.0",
"manifest_version": 2,
"description":"extension sample",
"icons":{ "16":"icon16.png" },
"permissions": [
        "tabs",
        "activeTab",
        "https://ajax.googleapis.com/",
        "http://*/*",
        "https://*/*"
    ],
"content_scripts":[
    {
        "matches":["*://www.expedia.it/*"],
        "js":["script.js"]
    }
    ]
}

function refine(){
document.getElementById("inpHotelMirror").value='refinedsearch';
}
document.getElementById('package-departing').value='date1';
document.getElementById('package-returning').value='date2';
document.getElementById('search-button').click();

script.js:

{
"name":"Myextension",
"version":"1.0",
"manifest_version": 2,
"description":"extension sample",
"icons":{ "16":"icon16.png" },
"permissions": [
        "tabs",
        "activeTab",
        "https://ajax.googleapis.com/",
        "http://*/*",
        "https://*/*"
    ],
"content_scripts":[
    {
        "matches":["*://www.expedia.it/*"],
        "js":["script.js"]
    }
    ]
}

function refine(){
document.getElementById("inpHotelMirror").value='refinedsearch';
}
document.getElementById('package-departing').value='date1';
document.getElementById('package-returning').value='date2';
document.getElementById('search-button').click();

如代码所示，它应该写入输入“date1”和“date2”（在启动扩展之前定义），然后提交表单。在这里之前，一切正常，一切正常，搜索开始。问题是，我想在页面重新加载后启动优化功能，这大约需要10-15秒。为了做到这一点，我尝试了setTimeout、setInterval、window.onload和其他技巧，比如while循环，以使函数在页面加载后写入输入，但这些似乎都不起作用。我已经搜索了很多类似于我的问题，但仍然无法解决这个问题。这是我的代码的问题，我应该更改它，还是网站的问题，阻止类似的脚本

我为自己是个新手而道歉，谢谢你的帮助

编辑：

---

我尝试在第行添加run_，然后用setTimeout调用refine函数。现在扩展不起作用了，第一部分也不起作用了。我还尝试了document_idle版本，现在第一部分又可以工作了，但是第二部分仍然不能工作；在重新加载的页面中注入代码时似乎出现了问题

为什么需要使用setTimeout？你还在等什么？如果脚本是在

document\u end

处注入的，那么您需要的所有DOM都应该可用，其余的只是图像。听起来元素是通过js动态添加的，所以您需要使用MutationObserver。@mr先生，我尝试了document\u end，但没有设置超时，这两种方式都不起作用。@wOxxOm所以我应该通过每次DOM发生变化时调用refine函数来使用MutationObserver，对吗？内容脚本是在页面更改后继续运行，还是再次运行？区别在于页面是使用AJAX动态更改的，还是页面实际重新加载。如果您仅仅通过观察页面的行为无法确定这一点，那么您可以通过添加一些延迟，或者向控制台添加一些日志来测试这一点。根据使用哪种方法将页面更新为结果，所需的内容将有所不同。如果使用AJAX，您的脚本将继续运行（如果执行中有任何延迟）。