我正在创建一个Chrome扩展程序，可以打开一个包含简单HTML的弹出式窗口。我无法访问此弹出式DOM。
是否可以操作弹出DOM？
示例：
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({"url": "popup.html", "type": "popup"}, function(wd){
console.log(wd);
wd.document.getElementById("txtField").value = "asd";
})
});
popup.html
<html>
<head></head>
<body>
<input type="text" id="txtField" />
</body>
</html>
当我运行此代码时，它会显示＆＃34;无法读取属性＆＃39; getElementById＆＃39;未定义＆＃34;。
答案 0 :(得分：1)
<script> 通常，您应该在 popup.html 中加载了<script>标记的JavaScript中进行DOM操作，就像浏览器操作弹出窗口或选项页面一样。例如，来自 popup.js 文件中的JavaScript，并包含在 popup.html 中，如：
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<input type="text" id="txtField" />
</body>
</html>
如果您想要访问弹出窗口的Window，则需要使用chrome.extension.getViews()获取该视图。当执行chrome.windows.create()的回调，或者调用chrome.windows.onCreated监听器（或windows.onFocusChanged）时，窗口实际上并不存在这一事实，这很复杂。执行chrome.windows.create()回调）。似乎没有一个事件会在新的弹出窗口实际存在时通知您，或者您可以获得它的视图。
因此，您使用<script>代码在HTML中包含的JavaScript文件中使用代码会更好 。
如果您仍然希望操纵打开的窗口的DOM，则必须进行轮询，直到找到它的视图。以下将做你想要的：
background.js ：
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({"url": "popup.html", "type": "popup"}, function(wd){
waitForWindowId(winObject.id,50,20,function(view){
console.log(view);
view.document.getElementById("txtField").value = "asd";
});
})
});
function waitForWindowId(id,delay,maxTries,callback) {
let where = 'watchForWindow';
if(maxTries--<=0){
//Fail softly. You may want to do something else on failure to find the new window.
return;
}
//This type of window is a type:'tab', not type:'popup'.
if(!chrome.extension.getViews({windowId:id}).some(view=>{
if(typeof callback === 'function'){
callback(view);
}
return true;
})){
//Did not find the view for window ID. Keep trying
setTimeout(waitForWindowId,delay,id,delay,maxTries,callback);
}
}
答案 1 :(得分：1)
chrome.windows.create(
{
url:'https://site.ru',
type: 'popup',
state: 'maximized',
},
function(window) {
chrome.tabs.executeScript(window.tabs[0].id, {
file: '/back/inject.js',
});
}
);