如何使用原生JavaScript通过window.open打开注入自定义JS的外部网页

1. 新窗口地址与当前页面同源的场景 #

这种场景可以直接实现注入需求，你可以拿到新窗口的window和document对象，直接插入自定义脚本即可，示例代码如下：

// 打开同源页面，可替换为你自己站点下的页面路径
const newWindow = window.open("/your-page-path", "_blank", "width=400,height=400")
// 监听新窗口加载完成事件，避免注入失败
newWindow.onload = () => {
  // 创建要注入的脚本节点
  const injectScript = newWindow.document.createElement('script')
  // 填写自定义脚本内容
  injectScript.textContent = `
    alert('自定义代码注入成功');
    // 此处可添加任意你要执行的自定义逻辑
  `
  // 把脚本插入新窗口的文档中
  newWindow.document.body.appendChild(injectScript)
}

2. 新窗口地址是跨域外部站点的场景 #

这种场景下没有纯原生前端的可行实现方案，原因是浏览器的同源策略安全限制：当新窗口加载的域名、协议、端口任意一项和父页面不一致时，父页面会被禁止访问新窗口的所有DOM、window属性，自然也无法插入自定义脚本。这是浏览器的默认安全机制，目的是防止恶意站点篡改其他正规站点的页面内容、窃取用户敏感数据，没有绕过方法。
如果要实现跨域站点的代码注入，仅当你对目标外部站点有开发控制权时，可以在目标站点内预先编写接收postMessage消息的逻辑，父页面通过postMessage传递执行指令，目标站点收到指令后自行运行对应代码，但是该方案需要目标站点配合，无法单方面完成注入。

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