在用开发者工具修改前端js代码时，如何让所有加载此js的页面都生效

Question

是这样的，我在写一个刷课视频脚本，每个视频课程都是会新打开一个页面加载，每个页面加载的js脚本都是一样的
我在调试的时候override修改了一个js文件，只对当前页面生效，在打开一个新页面的时候又没用了，因为每个页面都是一个不同的课程;

如何能对所有页面都生效呢，因为现在每打开一个视频课程页面都会弹出一个对话框，确认是否继续学习，我修改的也很简单，只是模拟点击，自动实现确认
或者有别的更好的方法？
在此请教，感谢大家解答

 $.ajax(
                        {
                            url: "/student/course!ajaxVideoList.action?userCourse.id=" + userCourseId,
                            success: function(data){
                            if (data == 1)
                                open("/student/course!playNew.action?userCourse.id=" + userCourseId + "&index=0&random=" + Math.random(), "course_play");
                            else if (data == -1){
                                //SCORM
                                open("/student/course!scormList.action?userCourse.id=" + userCourseId + "&random=" + Math.random(), "course_play");
                            }
                            else {
                                showVideoList(data);
                            }},
                            async: false,
                            dataType: 'text'
                        }
                        );
                        

Answer 1

中午好🌞🌞🌞
本答案参考通义千问

在你的场景中，每个视频课程页面都会加载相同的 JavaScript 文件，并且你希望通过修改这个文件来让所有页面都生效。由于每个课程页面是独立加载的，你需要确保你的修改能够覆盖所有页面的脚本行为。

以下是解决问题的步骤和解决方案：

---

问题分析

1. 每个视频课程页面都会加载相同的 JavaScript 文件。
2. 修改某个页面的脚本（例如通过开发者工具 Override）只能影响该页面，无法跨页面生效。
3. 你需要让所有页面都自动模拟点击“确认”按钮，跳过弹窗。

---

解决方案

1. 使用浏览器扩展

最直接的方法是开发一个浏览器扩展，拦截所有加载的脚本，并注入自定义逻辑。以下是具体步骤：

1. 创建扩展目录结构：

   my-extension/
   ├── manifest.json
   ├── content.js
   └── popup.html
   

2. 编写 manifest.json：

   {
     "manifest_version": 3,
     "name": "Auto Confirm Script",
     "version": "1.0",
     "description": "Automatically confirm dialogs on video course pages.",
     "permissions": [
       "scripting",
       "tabs"
     ],
     "host_permissions": ["<all_urls>"],
     "content_scripts": [
       {
         "matches": ["*://*.example.com/*"], // 替换为你的目标域名
         "js": ["content.js"]
       }
     ]
   }
   

3. 编写 content.js：

   // 拦截弹窗并模拟点击“确认”
   window.addEventListener('beforeunload', function(event) {
       event.preventDefault(); // 阻止默认弹窗
       event.returnValue = ''; // 返回空字符串以触发弹窗
   });
   
   // 如果有其他需要修改的逻辑，可以在这里注入
   

4. 加载扩展：

   • 打开 Chrome 浏览器的扩展管理页面 (chrome://extensions)。
   • 启用“开发者模式”。
   • 点击“加载已解压的扩展程序”，选择 my-extension 目录。
   • 扩展加载后，所有目标页面都会自动应用你的脚本逻辑。

---

2. 修改服务器端脚本

如果你有权限访问服务器端的 JavaScript 文件，可以直接在服务器端修改代码。例如：

1. 找到并修改 open 函数的调用： 在你的代码中，open 函数被用来跳转到新的页面。你可以直接修改服务器端的脚本，使其不再弹出确认对话框。

   修改后的代码可能如下：

   $.ajax({
       url: "/student/course!ajaxVideoList.action?userCourse.id=" + userCourseId,
       success: function(data) {
           if (data == 1) {
               window.location.href = "/student/course!playNew.action?userCourse.id=" + userCourseId + "&index=0&random=" + Math.random();
           } else if (data == -1) {
               window.location.href = "/student/course!scormList.action?userCourse.id=" + userCourseId + "&random=" + Math.random();
           } else {
               showVideoList(data);
           }
       },
       async: false,
       dataType: 'text'
   });
   

2. 部署更改： 将修改后的代码部署到服务器上，所有页面都会自动生效。

---

3. 使用 Greasemonkey/Tampermonkey 脚本

如果你没有权限修改服务器端代码，可以使用用户脚本工具（如 Tampermonkey）来注入自定义逻辑。

1. 安装 Tampermonkey 扩展。

2. 创建一个新的脚本，内容如下：

   // ==UserScript==
   // @name         Auto Confirm Dialogs
   // @namespace    http://tampermonkey.net/
   // @version      1.0
   // @description  Automatically confirm dialogs on video course pages.
   // @author       Your Name
   // @match        *://*.example.com/* // 替换为你的目标域名
   // @grant        none
   // ==/UserScript==
   
   (function() {
       'use strict';
   
       // 拦截弹窗并模拟点击“确认”
       window.addEventListener('beforeunload', function(event) {
           event.preventDefault(); // 阻止默认弹窗
           event.returnValue = ''; // 返回空字符串以触发弹窗
       });
   
       // 修改 AJAX 请求的回调函数
       const originalAjax = $.ajax;
       $.ajax = function(options) {
           options.success = function(data) {
               if (data == 1) {
                   window.location.href = "/student/course!playNew.action?userCourse.id=" + userCourseId + "&index=0&random=" + Math.random();
               } else if (data == -1) {
                   window.location.href = "/student/course!scormList.action?userCourse.id=" + userCourseId + "&random=" + Math.random();
               } else {
                   showVideoList(data);
               }
           };
           return originalAjax.apply(this, arguments);
       };
   })();
   

3. 安装脚本后，所有目标页面都会自动应用你的修改。

---

总结

根据你的需求和权限，可以选择以下方案：

1. 浏览器扩展：适合不修改服务器代码的情况。
2. 服务器端修改：直接修改脚本逻辑，适用于有权限的情况。
3. 用户脚本工具：无需安装扩展即可快速注入逻辑。

推荐优先尝试 浏览器扩展 或 用户脚本工具，因为它们不需要服务器端权限，操作更灵活。