我正在学习如何创建Chrome扩展程序.我刚开始开发一个来捕捉YouTube活动.我想将它与YouTube Flash播放器一起使用(稍后我将尝试使其与HTML5兼容).
manifest.json的:
{
"name": "MyExtension",
"version": "1.0",
"description": "Gotta catch Youtube events!",
"permissions": ["tabs", "http://*/*"],
"content_scripts" : [{
"matches" : [ "www.youtube.com/*"],
"js" : ["myScript.js"]
}]
}
myScript.js:
function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");
问题是控制台给了我"开始!" ,但没有"状态改变!" 当我播放/暂停YouTube视频时.
将此代码放入控制台时,它可以正常工作.我究竟做错了什么？
javascript google-chrome youtube-api google-chrome-extension content-script
我想在将一些div或输入添加到html时执行一个函数.这可能吗？
例如,添加文本输入,然后应该调用该函数.
change() 函数工作并检测表单元素的变化,但有没有办法检测DOM元素的内容何时被更改？
除非#content是表单元素,否则这不起作用
$("#content").change( function(){
// do something
});
我希望在执行以下操作时触发:
$("#content").html('something');
此外html()或append()功能没有回调.
有什么建议？
我正在编写Chrome扩展程序,并<div>在popup.html文件中单击按钮后尝试覆盖当前网页.
当我document.body.insertBefore从popup.html中访问该方法时,它会覆盖<div>弹出窗口而不是当前网页.
我是否必须在background.html和popup.html之间使用消息传递才能访问网页的DOM？我想在popup.html中做所有事情,并且如果可能的话也使用jQuery.
我有兴趣使用MutationObserver检测是否在HTML页面中的任何位置添加了某个HTML元素.例如,我会说我想检测是否<li>在DOM中的任何地方添加了任何内容.
MutationObserver到目前为止,我看到的所有示例只检测节点是否添加到特定容器中.例如:
一些HTML
<body>
...
<ul id='my-list'></ul>
...
</body>
MutationObserver 定义
var container = document.querySelector('ul#my-list');
var observer = new MutationObserver(function(mutations){
// Do something here
});
observer.observe(container, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
所以在这个例子中,MutationObserver设置为观察一个非常确定的容器(ul#my-list)以查看是否有任何<li>附加到它的容器.
这是一个问题,如果我想不那么具体,并注意<li>整个HTML身体,如下所示:
var container = document.querySelector('body');
我知道它适用于我为自己设置的基本示例......但是不建议这样做吗？这会导致性能不佳吗？如果是这样,我将如何检测和衡量性能问题？
我想也许有一个原因,所有的MutationObserver例子都是如此具体的目标容器......但我不确定.
我需要一种有效的机制来检测DOM的变化.最好是跨浏览器,但如果有任何有效的方法不是跨浏览器,我可以使用故障安全的跨浏览器方法实现这些.
特别是,我需要检测会影响页面上文本的更改,因此需要任何新的,删除或修改的元素或对内部文本(innerHTML)的更改.
我无法控制正在进行的更改(它们可能是由于第三方javascript包含等),因此无法从这个角度进行处理 - 我需要以某种方式"监视"更改.
目前我实施了一个"quick'n'dirty"方法,body.innerHTML.length每隔一段时间检查一次.这当然不会检测导致返回相同长度的变化,但在这种情况下"足够好" - 这种情况发生的可能性非常小,并且在此项目中,未能检测到更改将不会导致丢失的数据.
问题body.innerHTML.length是它很贵.在快速浏览器上可能需要1到5毫秒,这可能会让事情陷入困境 - 我也在处理大量的iframe,而且这些都会增加.我很确定这样做的代价是昂贵的,因为innerHTML文本不是由浏览器静态存储的,并且每次读取时都需要从DOM计算.
我正在寻找的答案类型是从"精确"(例如事件)到"足够好"的任何东西 - 或许像innerHTML.length方法一样"quick'n'dirty",但执行速度更快.
编辑:我还应该指出,虽然检测已经修改过的精确元素会"很好",但这并不是绝对必要的 - 只要有任何改变这一事实就足够了.希望这能够扩大人们的反应.我将调查突变事件,但我仍然需要IE支持的后备,所以任何笨拙的,创造性的,非常方形的想法将是非常受欢迎的.
HTML5包含一个"变异观察者"概念,用于监控浏览器DOM的变化.
你的观察者回调将传递看起来很像DOM树片段的数据.我不知道它们究竟是这个还是它们是如何工作的.
但是当您编写代码以与无法控制的第三方网站进行交互时(例如使用Greasemonkey脚本或Google Chrome用户脚本),您必须检查传入的元素树以查找与您相关的信息.
对于选择器来说,这比使用任何DOM更简单,而不是手动遍历树,尤其是跨浏览器代码.
有没有办法使用jQuery选择器将数据传递给HTML5变异观察者回调？
jquery html5 greasemonkey jquery-selectors mutation-observers
当元素附加到DOM时,是否可以添加某种事件/处理程序？
.click(),. change(),. keyup()等等......
我需要在附加元素后立即获取元素的高度,然后将高度设置为另一个元素
我正在使用jQuery JavaScript库.我喜欢的事件监听器准备好上$(document)时DOM设置将触发.
(非常类似于.onload但没有外部源)
我会发现它非常有用,如果有一个事件监听器与此行为非常相似,但在元素完全加载时触发.(fe:图片,文字内容极长的Div,如此)
我很欣赏jQuery或JavaScript方法.
我正在写一个chrome扩展,我想要获取页面上存在的所有图像,但是一些图像会在一段时间后加载(可能是通过ajax),一旦DOM空闲,我就无法获取.有没有办法在页面加载后跟踪DOM更改？