Chrome扩展中本地jQuery的$(document).on('load')失效问题排查

你的Chrome扩展无法更新example.com的h1标题，核心存在两个关键问题：

1. 错误的事件监听逻辑 #

jQuery中$(document).on("load")不会触发预期的事件。load事件需绑定到window对象，或者更高效的是使用DOM就绪事件（$(function(){...})）——它会在DOM结构加载完成后立即执行，无需等待所有资源加载完毕，更适合DOM元素操作场景。

2. 不匹配的元素选择器 #

example.com的h1标题直接位于<body>下，并未嵌套在<div>中。你使用的document.querySelector("div h1")无法匹配到目标元素，因此不会产生任何效果。

修复后的print_hello.js代码 #

function print_hello() {
    document.querySelector("h1").innerText = "Hello!";
}

// 使用DOM就绪事件触发函数
$(print_hello);
// 等价写法：
// $(function() {
//     print_hello();
// });

额外验证步骤 #

1. 确认内容脚本注入状态：打开example.com的开发者工具，切换到Sources标签，在左侧面板的Content scripts下查看是否存在print_hello.js。
2. 调试函数执行：可在print_hello函数内添加console.log("函数已执行")，确认函数是否被正常调用。

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