Chrome 扩展添加 youtube 标签

Question

我正在编写一个 chrome 扩展，我想将标签添加到 YouTube 编辑页面，特别是不止一个。我可以将标签文本作为字符串插入，每个标签用逗号分隔。为了让 YouTube 采用这个逗号分隔的字符串并将其正确拆分为标签，标签插入空间需要接收 keyup 或 change 事件。

我查看了很多关于触发关键事件的堆栈溢出帖子，但建议的代码似乎都不适合我。

不幸的是，当我尝试触发事件时，使用以下代码时出现错误：

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

错误状态为“Uncaught TypeError: undefined is not a function”；焦点代码有效，所以我肯定针对正确的元素。

这很奇怪，因为其他事件（实际上并没有做我需要的）确实有效，即聚焦、模糊和点击。 YouTube 具有绑定到 video-settings-add-tag 元素的事件侦听器，我需要触发该元素以使其将字符串拆分为标签。

有人知道为什么这不起作用吗？

附：我还尝试定义更改事件以查看是否可行，并且此代码没有引发错误，但也没有做任何事情：

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

感谢您的任何反馈。

Answer 1

我之前遇到过类似的情况，我的内容脚本无法访问与页面一起提供的脚本中定义的对象和函数，并抛出了类似的“未捕获的 TypeError：未定义不是函数”错误，但我真的需要访问页面上的方法和属性，因为我不想重新实现它们。

这与 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);