Chrome extension 谷歌浏览器插件 YouTube 监听地址栏 url 变化
一、前言
最近在开发一个 YouTube 视频 AI 总结的插件，过程中遇到了一个问题，每次用户点击当前页面其它视频时，组件并不会重新挂载，这就导致视频明明都变了，但是总结依旧还是上次的内容，很影响体验。
为此我查阅了不少解决办法，虽然都没用，不限于：
使用 onpopstate 监听路由变化
window.onpopstate = function(event) {console.log('URL changed:', window.location.href);
};
但此 api 只能监听路由前进和回退的变化，如果用户不是通过这两个按钮切换地址，onpopstate 依旧监听不到。
设置定时器，缓存对比当前 url 是否变化
实现过于丑陋直接没考虑，不然做个插件还要偷跑一个定时器一直检测地址，确实难以接受…
最终我在 issue 找到了答案，通过监听 yt-page-data-updated 完美解决了我的问题，实现如下：
// 监听 youtube 视频变化window.addEventListener('yt-page-data-updated', function () {console.log('youtube 视频地址变化啦')});
通过上述代码，比如在 react 组件的 useEffect 监听，只要用户点击页面视频都能完美执行。
以上做个简单的记录，see you…