标签 chrome 下的文章

JavaScript 页面加载与卸载相关事件

适用范围事件触发时机适用场景特性/注意点
windowload页面所有资源（HTML、图片、样式等）加载完成需要确保所有资源加载后再执行逻辑比 DOMContentLoaded 晚，等待资源加载
beforeunload页面即将卸载时（导航到新页面或关闭标签）提示用户保存数据或防止意外离开可显示离开确认对话框，设置 event.returnValue
unload页面完全卸载时（文档和资源从内存中清除）清理资源（如 WebSocket 连接、定时器等）现代浏览器限制较多，无法异步执行逻辑
focus/blur页面获得或失去焦点时触发检测用户切换到其他窗口或标签页可结合 document.hidden 检测可见性变化
documentDOMContentLoadedHTML 完全解析完成，资源（图片、样式表等）未必加载完成操作 DOM 元素，不依赖资源加载比 load 更早触发，常用于脚本初始化
readystatechangedocument.readyState 改变时触发，包括 loading、interactive、complete监控页面加载状态适合实时监控文档解析和加载的不同阶段
visibilitychange页面的可见性状态改变（如切换标签、最小化窗口）检测页面切换状态，节省资源或暂停功能状态通过 document.hidden 或 visibilityState 获取
Chrome 插件 Content Scriptrun_at: "document_start"页面开始加载时（HTML 解析前）插入代码以修改页面的初始状态不适合操作 DOM，适合拦截初始 HTML
run_at: "document_end"HTML 完全解析完成（等同于 DOMContentLoaded）操作已解析的 DOM，初始化插件逻辑脚本逻辑不会等待资源加载
run_at: "document_idle"HTML 解析完成，大部分资源已加载（页面处于空闲时运行）插件的默认运行时机，适用于大部分场景保证 DOM 和大部分资源已准备好
window 或特定元素error资源加载失败时（如图片、脚本、样式表）捕获资源加载错误或执行失败的脚本可在 window 或特定元素（如图片）上监听


// 监听 URL 变化
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;
let lastUrl = window.location.href;

function handleUrlChange() {
  if (lastUrl !== window.location.href) {
    console.log("URL 发生变化:", window.location.href);
    window.location.reload();
  }
}

// 重写 pushState 和 replaceState 以监听 URL 改变
history.pushState = function (...args) {
  originalPushState.apply(history, args);
  handleUrlChange();
};

history.replaceState = function (...args) {
  originalReplaceState.apply(history, args);
  handleUrlChange();
};

// 监听浏览器的 popstate 事件（即用户通过浏览器的后退/前进按钮改变 URL）
window.addEventListener("popstate", handleUrlChange);

权限

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],

background.js

// 监听所有网络请求
chrome.webRequest.onBeforeSendHeaders.addListener(
  function (details) {
    console.log("Request URL:", details.url);
    console.log("Request Headers:", details.requestHeaders);
    
    // 返回无修改的headers
    return { requestHeaders: details.requestHeaders };
  },
  { urls: ["<all_urls>"] }, // 你可以将它限定为某些域名
  ["requestHeaders"],
);

// 监听响应
chrome.webRequest.onHeadersReceived.addListener(
  function (details) {
    // console.log("Response Headers for URL:", details.url);
    // console.log("Response Headers:", details.responseHeaders);
  },
  { urls: ["<all_urls>"] },
  ["responseHeaders"],
);

const inputElement = document.getElementById('declarePrice-0');

// 创建一个新的事件对象并赋值新的值
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
nativeInputValueSetter.call(inputElement, '100.00'); // 设定新的值

// 创建并触发 'input' 事件
const inputEvent = new Event('input', { bubbles: true });
inputElement.dispatchEvent(inputEvent); // 触发 React 的 onChange
  1. 1
  2. 2