非自有域名外部网站JavaScript脚本运行及跨页加载方法咨询

嘿，我来帮你搞定这两个实用的脚本运行问题，都是咱们在外部网站上自定义脚本时经常碰到的场景～

1. 无需控制台粘贴就能运行脚本的方法 #

当然有！这里给你列几个最常用的方案，从简单到进阶都有：

• 用户脚本管理器（最推荐）
  装个像Tampermonkey或者Violentmonkey的浏览器扩展，这是专门用来在指定网站自动运行自定义脚本的工具。步骤很简单：

  1. 安装对应扩展后，点击扩展图标新建脚本
  2. 在脚本头部的注释里设置@match规则，比如// @match https://*.google.com/* // @match https://stackoverflow.com/*，指定要运行脚本的域名
  3. 把你的JavaScript代码写在注释下面，保存后，只要打开匹配的网站，脚本就会自动运行，完全不用手动操作

• 书签脚本（Bookmarklet，适合临时使用）
  把你的脚本压缩成一行（可以用在线压缩工具处理，注意别破坏逻辑），然后做成浏览器书签：

  1. 新建书签，把URL改成：javascript:(function(){/* 这里放你压缩后的脚本代码 */})();
  2. 之后只要打开目标网站，点击这个书签，脚本就会立刻运行，适合临时测试或者偶尔用的场景

• 自定义浏览器扩展（适合需要特殊权限的场景）
  如果你的脚本需要更多浏览器权限（比如访问本地存储、跨域请求之类的），可以打包成一个极简的Chrome/Edge扩展：

  1. 新建一个文件夹，里面放manifest.json（配置权限和匹配域名）和你的脚本文件
  2. 在浏览器的扩展管理里开启“开发者模式”，加载已解压的扩展，之后匹配的网站就会自动加载你的脚本

2. 让脚本在新打开的页面也自动运行 #

这个得分场景来处理，最省心的还是用上面说的用户脚本管理器，它本身就支持跨页面自动运行，再配合几个配置就能完美解决：

• 全局匹配域名
  在用户脚本的头部注释里，把@match规则设得足够宽泛，比如如果你要在Google和Stack Overflow的所有子页面运行，就写：

  // @match https://*.google.com/*
  // @match https://stackoverflow.com/*
  // @match https://*.stackoverflow.com/*
  

  这样不管是从旧页面跳转还是新开标签页，只要是匹配的域名，脚本都会自动加载

• 设置脚本运行时机
  加上@run-at参数来控制脚本运行的时机，比如：

  // @run-at document-start
  

  这个会在页面刚开始加载就运行脚本，适合需要提前注入逻辑的场景；如果需要等页面DOM加载完再运行，就用// @run-at document-end

• 处理单页应用（SPA）的无刷新跳转
  有些网站是单页应用，点击按钮不会刷新页面，只是更新内容。这种情况可以在脚本里监听页面路由变化，比如：

  // 监听history变化
  window.addEventListener('popstate', function() {
    // 这里重新执行你的脚本逻辑
    yourScriptFunction();
  });
  
  // 或者用MutationObserver监听页面内容变化
  const observer = new MutationObserver(function(mutations) {
    if (mutations.some(m => m.addedNodes.length)) {
      yourScriptFunction();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

如果是用书签脚本的话，就没法自动在新页面运行了，得手动点击书签；所以还是用户脚本管理器是最优解～

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