如何直接从本地文件在任意现有页面运行JavaScript代码？

Firefox 专属方案 #

• 调试器直接加载执行本地脚本
  1. 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到「调试器」面板
  2. 点击面板顶部的「打开文件」按钮（或按Ctrl+O），选中本地目标JS文件
  3. 文件加载完成后，右键点击脚本标签，选择「在控制台运行」—— 此方式仅执行代码逻辑，不会在控制台输出完整代码，彻底避免冻结
• 通过用户脚本管理器加载
  1. 安装Tampermonkey扩展
  2. 创建新用户脚本，在脚本头部的@require指令中添加本地文件路径，格式为file:///本地JS文件绝对路径（Windows路径需将反斜杠转为正斜杠，例如file:///D:/scripts/large-code.js）
  3. 保存脚本后刷新目标页面，扩展会自动加载并执行本地代码，全程不经过控制台输出

通用浏览器方案（支持Chrome、Edge等） #

• 本地服务器加载法
  1. 在JS文件所在目录搭建临时静态服务器：
     • Python 3环境：执行 python -m http.server 8000
     • Node.js环境：先全局安装http-server（npm install -g http-server），再执行 http-server -p 8000
  2. 打开目标页面控制台，运行以下代码加载脚本：

     const script = document.createElement('script');
     script.src = 'http://localhost:8000/目标JS文件名.js';
     script.onload = () => console.log('脚本加载完成');
     document.head.appendChild(script);
     

     此方式通过HTTP请求加载代码，控制台仅输出加载完成提示，不会打印完整代码
• 书签栏脚本快速加载
  1. 创建新书签，将以下代码设为书签URL：

     javascript:(function(){const s=document.createElement('script');s.src='http://localhost:8000/目标JS文件名.js';document.head.appendChild(s);})();
     

  2. 确保本地服务器处于运行状态，点击书签即可自动加载执行本地脚本，无需手动操作控制台

注意事项 #

• Firefox使用file://协议加载本地文件时，需调整浏览器设置：在地址栏输入about:config，搜索privacy.file_unique_origin并设为false，否则会触发跨域限制
• 本地服务器方案需确保JS文件路径正确，服务器运行在文件所在目录

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