Question

我正在编写一个Chrome扩展程序，我想在YouTube编辑页面添加标签。特别是不止一个。我可以将标记文本作为字符串插入，每个标记用逗号分隔。要让YouTube使用此逗号分隔的字符串并将其正确拆分为标记，标记插入空间需要接收密钥或更改事件。

我已经看过很多关于触发关键事件的堆栈溢出帖子，但是没有任何代码建议似乎对我有效。

不幸的是，由于某种原因，当我尝试触发事件时，我使用以下代码收到错误：

document.getElementsByClassName("video-settings-add-tag")[0].focus();
document.getElementsByClassName("video-settings-add-tag")[0].keyup();

错误状态“Uncaught TypeError：undefined不是函数”;焦点代码有效，所以我肯定是针对正确的元素。

这很奇怪，因为其他事件（实际上并不是我需要的）会起作用，即焦点，模糊和点击。 YouTube将事件监听器绑定到video-settings-add-tag元素，我需要触发该元素才能将字符串拆分为标记。

任何人都知道为什么这不起作用？

P.S。我也尝试定义更改事件以查看是否可行，并且此代码没有抛出错误但也没有做任何事情：

var event = new KeyboardEvent('change');
document.getElementsByClassName("video-settings-add-tag")[0].dispatchEvent(event);
document.getElementsByClassName("video-settings-add-tag")[0].change;

感谢您的反馈。

Answer 1

我之前碰到过这样的事情，我的内容脚本无法访问在页面中定义的对象和函数，并抛出类似的“Uncaught TypeError：undefined is not a function”错误，但我真的需要访问页面上的方法和属性，因为我不想重新实现它们。

它与Chrome沙箱内容脚本的方式有关，方法是将其称为“安全DOM”。更多信息here

您可以通过以在页面上定义内容的方式设置内容脚本来解决此问题，而不是在内容脚本上下文中执行。像这样：

// Here's where all my page-extension logic takes place:
doTheThing = function() {
    //all my logics
}

//add logic to window. Injecting the script inline grants it
//access to all objects on the window, including page scripts.
var script = document.createElement('script');
script.type = "text/javascript";
script.textContent = '(' + doTheThing.toString() + ')();';
document.body.appendChild(script);

如果您需要访问后台脚本，这种方法会使事情变得非常复杂，但是这种情况仍然可以通过更多的工作来完成。希望这有帮助！

就以编程方式触发事件而言，我认为您将jQuery对象可用的函数与本机DOM对象可用的函数混淆。请记住，jQuery存储本机DOM事件之外的事件，因此如果YouTube正在创建jQuery事件，则需要从jQuery对象调用相应的函数：

$('.video-settings-add-tag')[0].keyup();

如果事件已注册到本机DOM对象，您将需要创建一个事件对象并将其分派：

var ch = document.createEvent('HTMLEvents');
ch.initEvent('keyup', 13, true);
document.getElementsByClassName("video-settings-add-tag")[0].dispatchEvent(ch);

Chrome扩展程序添加了YouTube标签

1 个答案: