Chrome扩展打开新窗口后如何滚动至最右侧 scrollLeft属性失效解决方案

核心原因 #

你的代码运行在原页面的执行上下文，默认只能操作原页面的DOM，即使拿到新窗口实例，若新窗口页面和原上下文跨域，原页面也无权操作新窗口DOM；就算是同源场景，也需要等待新窗口资源加载完成后再执行滚动逻辑才会生效。

解决方案 #

场景1：弹出的目标页面和当前上下文同源/你可直接修改目标页面代码 #

直接监听新窗口的加载完成事件，操作新窗口自身的DOM即可，修改后代码如下：

let smallInterval = setInterval(()=>{
    let emailAddress = document.querySelector("body > workspace-layout > workspace")
    ?.shadowRoot.querySelector("input");
    if(emailAddress){
        let obj = {
            email: emailAddress.value,
        };
        console.log(obj.email);

        const MyUrl ="https://test.com"
        let newWindow2 = window.open(MyUrl , "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=3000,width=50,height=200");
        
        // 新增：监听新窗口加载完成事件
        newWindow2.addEventListener('load', () => {
            // 操作新窗口的根元素/body的scrollLeft
            const maxScrollWidth = newWindow2.document.documentElement.scrollWidth - newWindow2.document.documentElement.clientWidth
            newWindow2.document.documentElement.scrollLeft = maxScrollWidth
            newWindow2.document.body.scrollLeft = maxScrollWidth
            // 如果页面横向滚动容器是自定义元素，替换上面的根元素为对应容器DOM即可
        })

        clearInterval(smallInterval);
    }
},1000);

场景2：弹出的是跨域外部站点（Chrome扩展开发的常见场景） #

这种场景原页面无权操作新窗口DOM，需要用Chrome扩展的Content Script机制实现：

1. 修改扩展的manifest.json配置，添加目标站点的注入规则，Manifest V3示例配置如下：

{
  "manifest_version": 3,
  // 其它原有配置保留
  "content_scripts": [
    {
      "matches": ["https://test.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "permissions": ["tabs"]
}

2. 扩展目录下新建content.js文件，写入自动滚动逻辑：

window.addEventListener('load', () => {
  const maxScroll = document.documentElement.scrollWidth - document.documentElement.clientWidth
  document.documentElement.scrollLeft = maxScroll
  document.body.scrollLeft = maxScroll
})

3. 若不需要所有打开的test.com页面都自动滚动，可通过扩展消息通信实现按需触发：
   • 原页面打开新窗口后，获取新窗口对应TabID，调用chrome.tabs.sendMessage发送滚动指令
   • content.js中监听扩展消息，收到指令后再执行滚动逻辑即可

注意事项 #

• 如果目标页面的横向滚动容器不是根元素，需要替换代码中的根元素为对应滚动容器的DOM实例
• 要确保扩展已申请目标站点的访问权限，否则Content Script不会注入生效

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