document.querySelector 总是返回 null
看了其他答案，还是没明白。
出于某种原因，这行代码总是返回 null。
var els = document.querySelector("[id='MTG_INSTR$2']");
我在控制台中检查了 document 的值，所以我很确定这是正确的。
id 深埋在一张桌子里面，这可能是一个问题吗？
编辑 2：如果有帮助，这里是完整的代码。
内容.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "start" ) {
start();
}
}
);
function start(){
var els = document.querySelector("[id='MTG_INSTR$2']");
console.log(els);
alert("started");
}
弹出窗口.html
<!DOCTYPE html>
<html>
<head></head>
<script src="popup.js"></script>
<body>
<input id="button1" type=button value=clickme>
</body></html>
弹出窗口.js
function popup() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
});
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("button1").addEventListener("click", popup);
});
清单文件
{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"manifest_version": 2,
"name": "extensiontest",
"version": "0.2",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup":"popup.html"
},
//"background": {
// "scripts": ["background.js"]
//},
"permissions": [
"tabs"
]
}
编辑：我已经包含了文档结构的屏幕截图。
我怀疑你的 JS 在标记和 css 之前被加载。在这种情况下，您可以尝试使用
<script src="" defer></script>
首先加载内容，然后您的 java 脚本应该可以正常工作。
ID 在 CSS 选择器语法中进行特殊处理，后面跟着#ID，因此您通常需要类似document.querySelector('#MTG_INSTR$2'), 但$不是合法的 ID 组件，因此理想情况下您应该给它一个更好的名称。其他方法有：
document.getElementById('MTG_INSTR$2'); // No need to change ID
也就是说，在测试中，document.querySelector("[id='MTG_INSTR$2']")应该可以工作，因此您可以检查页面上是否有任何内容确实具有该 ID。
| 归档时间： |
|
| 查看次数： |
9331 次 |
| 最近记录： |