使用AppleScript在Brave设置页运行JS时无法获取Shadow DOM元素

问题背景 #

我有两个冲突的浏览器扩展，一个仅需在200个工作站点运行，另一个要在剩余800个站点运行。但Brave不支持为扩展设置黑名单，仅提供全启用、全禁用、指定站点启用三种选项，因此必须批量将站点添加到对应扩展的白名单中。

试过几种方法均行不通：

• 系统设置UI不支持批量添加站点；
• 手动编辑Secure Preferences文件（唯一存储该设置的文件），直接导致扩展被Brave移除；
• 尝试用AppleScript运行JavaScript自动点击「Add a page」按钮批量添加，但始终找不到Shadow DOM中的目标元素，代码返回missing value。

尝试的代码 #

tell application "Brave Browser"
    if not (exists window 1) then reopen
    activate
    tell window 1 to tell active tab
        execute javascript "document.querySelector('extensions-manager').shadowRoot.querySelector('cr-view-manager').shadowRoot.querySelector('extensions-item-list').shadowRoot.querySelector('extensions-detail-view').shadowRoot.querySelector('extensions-runtime-host-permissions').shadowRoot.querySelector('#add-host')"
    end tell
end tell

目标页面URL为brave://extensions/?id={你的扩展ID}，目标按钮处于多层Shadow DOM嵌套结构中。

问题原因 #

1. Shadow DOM路径错误：硬编码的层级链完全依赖页面DOM的固定结构，但Brave扩展页面可能因版本更新、加载顺序变化，导致节点层级或名称与你写的不一致，直接找不到元素；
2. 未考虑页面加载时机：脚本执行时，扩展详情页的Shadow DOM元素可能还未完全渲染，此时调用querySelector自然返回missing value；
3. 硬编码层级容错率极低：这种链式查询只要中间某一层结构变动，整个查询就会失效。

修正方案 #

方案1：用递归遍历Shadow DOM查找元素 #

不用硬写固定层级，通过递归函数遍历所有Shadow DOM节点，直接根据元素ID查找，同时加入页面加载等待：

tell application "Brave Browser"
    if not (exists window 1) then reopen
    activate
    tell window 1 to tell active tab
        -- 跳转到扩展详情页（确保在目标页面）
        set URL to "brave://extensions/?id=你的扩展ID"
        -- 等待页面完全加载
        delay 3
        -- 执行递归查找Shadow DOM元素的JS
        execute javascript "
function findElementInShadowDOM(selector) {
  function search(node) {
    // 先在当前节点查找
    const elem = node.querySelector(selector);
    if (elem) return elem;
    // 遍历所有子元素的shadowRoot
    const shadowRoots = Array.from(node.querySelectorAll('*'))
      .map(el => el.shadowRoot)
      .filter(root => root !== null);
    // 递归查找每个shadowRoot
    for (const root of shadowRoots) {
      const found = search(root);
      if (found) return found;
    }
    return null;
  }
  return search(document);
}
// 查找#add-host元素，找到后直接调用click()
const addBtn = findElementInShadowDOM('#add-host');
addBtn ? addBtn.click() : console.log('未找到目标按钮');
"
    end tell
end tell

方案2：跳过UI直接修改扩展权限（更高效） #

手动修改配置文件会被Brave重置，但可以用Chrome DevTools Protocol（CDP）直接调用接口批量添加权限：

1. 关闭所有Brave窗口，终端执行命令启动带远程调试的Brave：

   open -a "Brave Browser" --args --remote-debugging-port=9222
   

2. 用Node.js脚本或CDP工具，发送browserExtension.setPermission命令批量传入站点列表即可（具体可参考Chrome CDP文档）。

额外提示 #

• 可先手动定位元素验证逻辑：打开扩展详情页，右键「Add a page」按钮→检查，在开发者工具中逐步查看Shadow DOM的正确路径；
• 批量添加站点时，需遵循Brave的权限格式要求，比如使用*://*.example.com/*这类通配符形式，不能仅写example.com。

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