Chrome 扩展添加 YouTube 标签

Question

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

我看过很多关于触发关键事件的 Stack Overflow 帖子，但没有任何代码建议似乎对我有用。

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

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 元素的事件监听器，我需要触发它才能将字符串拆分为标签。

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

P.S。我还尝试定义 change 事件以查看它是否可行并且此代码没有引发错误但也没有执行任何操作：

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 沙盒内容脚本的方式有关 "safe 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 标签

Chrome Extension add YouTube tags

javascript

google-chrome-extension

dom-events