如何通过点击其他站点的按钮在指定站点运行JavaScript代码

首先明确：这个需求是可实现的，但受浏览器同源策略限制，无法无权限直接操作第三方站点页面，以下是两种常用的可行方案：

方案1：可控制两个站点前端代码/可在两个站点手动运行控制台代码时，用postMessage实现 #

适用场景：两个站点页面都在浏览器中打开，你可以给原有站点提前添加监听逻辑。

实现步骤： #

1. 先在原有指定站点（假设域名是https://site-a.com）的页面运行监听逻辑，你可以直接把这段代码加到你原有要执行的JS前面，每次打开站点后先在控制台运行即可：

window.addEventListener('message', (event) => {
  // 安全校验：仅接受你指定的新站点的消息，避免恶意触发
  if (event.origin !== 'https://site-b.com') return
  // 收到执行信号后运行你的自定义代码
  if (event.data === 'triggerCustomScript') {
    // 这里替换为你原本要在site-a执行的JS代码
    console.log('已触发site-a的自定义脚本执行')
  }
})

2. 在新站点（https://site-b.com）的按钮点击事件中添加消息发送逻辑，需要先拿到原有站点的窗口引用：

document.querySelector('#triggerBtn').addEventListener('click', () => {
  // 窗口引用根据你的场景选择对应获取方式：
  // 1. site-a是当前站点通过window.open打开的标签页：const targetWin = 之前open返回的窗口对象
  // 2. site-a是嵌入在当前页面的iframe：const targetWin = document.querySelector('#siteAIframe').contentWindow
  // 3. site-a是当前页的父页面/跳转来源页：const targetWin = window.opener
  targetWin.postMessage('triggerCustomScript', 'https://site-a.com')
})

方案2：无法修改两个站点的前端代码时，用Chrome扩展实现 #

适用场景：两个都是第三方站点，你没有权限修改站点的线上代码，只能自己本地控制脚本执行。

实现逻辑： #

Chrome扩展可以绕过跨域限制实现跨标签页通信，你可以通过扩展实现以下能力：

• 给新站点注入监听脚本，监听按钮点击事件
• 给原有站点注入你的自定义JS代码，等待触发信号
• 扩展后台服务作为中间层，收到新站点的点击信号后，给指定的原有站点标签页发送执行指令，触发对应JS运行。

核心配置参考： #

在扩展的manifest.json中声明对应权限即可：

{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting", "activeTab"],
  "host_permissions": ["https://site-a.com/*", "https://site-b.com/*"]
}

注意事项 #

• 所有实现都必须符合浏览器安全规范，不存在无权限直接操作第三方站点执行JS的方法，否则属于严重的XSS安全漏洞
• 使用postMessage时必须校验消息来源的origin，避免恶意站点伪造触发信号

内容的提问来源于stack exchange，提问作者ceyhun.me