跨域场景下通过JavaScript控制外部网页的方案咨询

我想实现用户通过麦克风控制外部网页，但目前JavaScript代码因为同源策略限制，没法访问外部网页的元素。我知道iframe嵌入会有这个问题，但能不能通过新开标签页的方式实现控制？

我已经用Python+Selenium在本地实现了相同功能：程序可以打开浏览器窗口，获取网页元素、点击按钮、输入文本。我明白同源策略的限制，但为什么网页端做不到同样的事？有没有解决思路或替代方案？

补充代码 #

无法运行的app.jsx（同源策略限制） #

function InsertNumber(number){
var iframe = document.getElementById("dartcounter");
var elmnt = 
iframe.contentWindow.document.getElementById("score");
console.log(elmnt)
//elmnt.innerHTML = "number";
}
export default function App() {
const [number, setNumber] = useState();

return (
    <div>
        <iframe id="dartcounter" src="https://dartcounter.net/en/game/match" width={1300} height={700}></iframe>
        <button onClick={() => InsertNumber(5)}>ID</button>
   </div >
)
}

本地可运行的main.py #

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome('/Users/danielusselmann/Downloads/chromedriver')
driver.get("https://www.dartcounter.net/de")
elem = driver.find_element(By.XPATH,'//button[contains(.,"Rückgängig")]')
elem.click()

网页端和Selenium的核心差异 #

Selenium是浏览器自动化工具，它直接操控整个浏览器实例，不属于网页内的JavaScript执行环境，完全不受同源策略约束——本质是模拟用户手动操作浏览器，权限远高于网页端JS。而网页端的JS（不管是iframe还是新开标签页）都受浏览器同源策略严格限制，只有当两个页面的协议、域名、端口完全一致时，才能互相访问DOM。

新开标签页能否实现控制？ #

不行。新开的外部网页标签页和你的控制页面属于不同源，网页端JS无法跨标签页访问其他源的页面DOM，浏览器会直接拦截这类操作。

可行的解决思路 #

• 浏览器扩展实现：浏览器扩展拥有更高权限，只要在manifest.json中配置目标网站的权限（比如"host_permissions": ["https://dartcounter.net/*"]），就能直接访问目标网页DOM。可以通过内容脚本注入目标页面，同时在扩展中集成麦克风语音识别，将语音指令转换成DOM操作，还能和你的控制页面通过消息通信交互。
• Selenium封装桌面应用：基于已有的Selenium代码，将其打包成桌面应用（比如用PyInstaller把Python脚本打包成可执行文件，或结合Electron实现带界面的应用）。在Python中集成语音识别库（如SpeechRecognition），把麦克风输入的语音指令转换成Selenium的操作指令，实现控制。
• 调用目标网站开放API：查看dartcounter.net的官方文档，确认是否有公开的控制类API（比如修改分数、触发按钮的接口）。如果有，直接通过API调用实现功能，完全绕开DOM操作，也就不存在同源问题。
• 代理服务器中转（不推荐）：搭建代理服务器，把目标网页内容代理到你的域名下，让iframe加载代理后的同源页面。但这种方式需要处理跨域资源、Cookie同步等问题，还可能触犯目标网站的版权或反爬规则，风险较高。

内容的提问来源于stack exchange，提问作者D.U