我正在创建一个 Chrome 扩展,并尝试在 gMail 撰写框的“发送”按钮旁边包含一个小文本。
我正在使用 MutationObserver 来了解撰写框窗口何时出现。我通过观察具有类 no 的元素来执行此操作,因为撰写框元素是作为此元素(类 no)的子元素创建的。
当用户单击撰写按钮并出现撰写框窗口时,我使用 .after() 方法在发送按钮旁边放置一个元素。 SEND 按钮类名称是 .gU.Up。
这些是 gMail 的真实类名,也很奇怪。
下面是我使用的代码:
var composeObserver = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
mutation.addedNodes.forEach(function(node){
$(".gU.Up").after("<td> <div> Hi </div> </td>");
});
});
});
var composeBox = document.querySelectorAll(".no")[2];
var config = {childList: true};
composeObserver.observe(composeBox,config);
问题是我不断收到以下错误:
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'
有人可以帮忙吗?我已经尝试了很多事情,也在这里查看了其他答案,但仍然无法摆脱这个错误。
这是我的manifest.json 文件:
{
"manifest_version": 2,
"name": "Gmail Extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon19.png",
"default_title": "Sales Analytics Sellulose"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://mail.google.com/*"],
"js": ["jquery-3.1.1.js", "insQ.min.js", "gmail_cs.js"]
}
],
"web_accessible_resources":[
"compose_icon.png",
"sellulosebar_icon.png"
]
}
附言我已经尝试过 insertionquery 库,但它有一些缺点。它不会让我具体说明特定元素的变化。我还没有尝试 mutationsummary 库,但由于它使用了 MutationObserver,我认为这个问题会持续存在。
添加自评论:
的确,选择器没有给我一个节点。我检查了控制台,它给出了一个对象。我还检查了控制台,它正在选择我想要观察的适当元素。
但是,当我为所选元素添加 console.log 时,它显示为未定义。这意味着,关于在节点出现之前执行的代码,您可能是正确的。你能告诉我如何确保延迟发生吗? “setTimeout”会起作用吗?在 MutationObserver 的情况下它是如何工作的?
最佳答案
正如我在评论中提到的,Xan 给出了一个答案,该错误清楚地表明 document.querySelectorAll(".no")[2] 的结果未计算为 Node .
从您在评论中提供的信息来看,问题很明显是您要观察的节点在您的代码执行时不存在。有很多方法可以延迟代码的执行,直到该节点可用。一些可能性是:
使用 setTimeout 循环进行轮询,直到您检测到要放置 MutationObserver 的元素可用:
function addObserverIfDesiredNodeAvailable() {
var composeBox = document.querySelectorAll(".no")[2];
if(!composeBox) {
//The node we need does not exist yet.
//Wait 500ms and try again
window.setTimeout(addObserverIfDesiredNodeAvailable,500);
return;
}
var config = {childList: true};
composeObserver.observe(composeBox,config);
}
addObserverIfDesiredNodeAvailable();
这将在 DOM 中存在后相对较短的时间内找到合适的节点。此方法的可行性取决于插入目标节点后多长时间您需要将观察者放置在其上。显然,您可以根据需要调整轮询尝试之间的延迟。
关于javascript - 在 'MutationObserver' : parameter 1 is not of type 'Node' 上“观察”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40398054/
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
我已经从我的命令行中获得了一切,所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时,我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗?我正在使用OSX并安装了rvm。 最佳答案 或者,您可以只使用“require”,它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节,但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关,我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中,但到目前为止,我还看不出我输入的内容与教程中的内容有什么区别。到目前为止,建议是在函数定义中添加或删除参数user,但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai
如何使此根路径转到:“/dashboard”而不仅仅是http://example.com?root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b