在Google Chrome浏览器中能否自行创建自定义event listener？

以下两种方案都可以满足你修改站点外观的练习需求，不需要复杂配置，适合JS入门阶段使用：

临时测试方案（刷新后失效，适合快速调试效果） #

不需要安装任何扩展，直接用Chrome自带的开发者工具即可实现：

• 打开目标站点后，按下F12或者Ctrl+Shift+I（Mac设备为Cmd+Opt+I）唤起DevTools面板
• 切换到*控制台（Console）*栏目，直接编写JS代码绑定事件即可

举个实际示例：给页面绑定点击事件，点击任意位置自动切换页面背景色，代码如下：

document.addEventListener('click', () => {
  const randomColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`
  document.body.style.backgroundColor = randomColor
})

• 输入代码后按下回车即可生效，你可以直接在页面上测试交互效果。如果要绑定其他交互事件，把代码中的click替换为对应事件名即可，常用的有scroll（滚动）、mouseover（鼠标悬浮）、keydown（键盘按下）等。

持久生效方案（刷新/重新打开站点仍可生效） #

如果需要每次打开对应站点都自动触发你写的事件逻辑，可以使用用户脚本实现：

• 先在Chrome扩展商店安装Tampermonkey扩展，安装完成后点击扩展图标选择「添加新脚本」
• 把脚本头部的@match字段修改为你要适配的站点地址，例如要适配所有B站页面就填写*://*.bilibili.com/*
• 在脚本的代码区域编写你的事件监听逻辑即可，示例模板如下：

// ==UserScript==
// @name         自定义站点交互修改脚本
// @match        *://*.你的目标站点域名.com/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';
  // 示例：页面滚动超过100px时把顶部导航栏改为半透明白色
  window.addEventListener('scroll', () => {
    const topNav = document.querySelector('header')
    if(topNav) {
      topNav.style.background = window.scrollY > 100 ? 'rgba(255,255,255,0.9)' : 'transparent'
      topNav.style.backdropFilter = 'blur(10px)'
    }
  })
})();

• 保存脚本后，打开对应站点就会自动加载你写的事件逻辑，不需要每次手动输入。

注意：给第三方站点绑定事件时，需要先确认你选择的DOM元素是站点实际存在的，调试阶段可以在控制台用document.querySelector('你的选择器')打印结果，确认选择器是否正确。

内容的提问来源于stack exchange，提问作者Milad