将选项添加到内容脚本上的html <select>
将选项添加到内容脚本上的html <select>
提问于 2021-01-13 20:45:42
努比在这里..。想要弄清楚一些事情。我正在做这个chrome扩展，我在页面上注入了一些html，下一步将是读取所有页面，找到一些文本，并将其作为选项添加到我注入的选择输入字段中。这是我清单的一部分：
"content_scripts" : [
{
"run_at": "document_end",
"js" : [
"js/main.js"
],
"css" : [
"css/main.css"
],
"matches" : ["https://streamyard.com/*"]
}
这是我的内容脚本：
var isHtmlDeployed = false;
var x=0;
//read the html file
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("GET", chrome.extension.getURL('../includes/sceneSettings.html'), true);
xhr.send();
fillLayoutCombo();
//Inject the html file
function handleStateChange(){
if (xhr.readyState=4 && xhr.responseText !='' &xhr.status==200 && isHtmlDeployed==false){
var newHtml = document.createElement('div');
newHtml.innerHTML = xhr.responseText;
document.body.appendChild (newHtml);
isHtmlDeployed = true;
}
}
//add options
function fillLayoutCombo(){
for(var i=0;i<=9;i++){
var opt = document.createElement('option');
opt.value = 'Solo Layout';
opt.innerHTML = 'Solo Layout';
console.log('select[id="cboSceneType'+i+'"]');
select = document.querySelector('[id="cboSceneType'+i+'"]');
select.appendChild(opt);
}
}
我不明白为什么当我进入fillLayoutCombo()函数时，我注入的html仍然没有加载，所以我最终选择= document.querySelector('id="cboSceneType'+i+'"')；为null并得到一个错误。即使我的清单说脚本应该在页面加载结束时运行。我能做些什么来解决这种情况(在写的时候，我才意识到'document_end‘什么也没做，毕竟html只会在脚本运行时被注入，所以我的异步xmlhttprequest有问题吗？如何解决？)
感谢您的帮助。
Stack Overflow用户
发布于 2021-01-13 21:14:24
只是为了让人们加入到解决方案中。我只是将调用fillLayoutCombo作为handleStateChange的最后一步。问题解决了
谢谢你们！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65702267
复制相关文章
相似问题
腾讯云开发者
