如何在Chrome浏览器扩展加载前运行JS实现自动点击「展开阅读」按钮？

算力阿峰

2026-10-7

该需求完全可以实现，核心是通过Chrome扩展的内容脚本（content script）提前注入到页面，在原有高亮逻辑执行前完成自动点击「展开阅读」按钮的操作，待完整内容加载渲染后再执行原本的高亮逻辑即可。

实现思路

Chrome扩展支持自定义内容脚本的注入时机，你可以把自动点击展开按钮的逻辑作为独立的内容脚本，设置为document_start阶段运行，优先级高于你原本的高亮脚本。脚本运行后会监听页面DOM的加载变化，只要检测到匹配规则的展开按钮就自动触发点击，等完整内容渲染完成后，再执行原有高亮逻辑即可拿到全量文本。

具体操作步骤

第一步：调整扩展的manifest.json配置，新增自动展开脚本并设置运行优先级
目前主流Chrome扩展均使用Manifest V3版本，配置示例如下：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可按需缩小匹配范围，比如仅对Quora生效可填"*://*.quora.com/*"
      "js": ["auto-expand.js"],
      "run_at": "document_start" // 页面加载最早期注入，保证优先执行
    },
    {
      "matches": ["<all_urls>"],
      "js": ["your-highlight.js"], // 替换为你原有高亮逻辑的脚本文件名
      "run_at": "document_idle" // 等页面交互完成、内容加载完毕后再执行高亮
    }
  ],
  "permissions": ["activeTab"]
}

第二步：编写auto-expand.js自动展开逻辑，支持多站点适配
逻辑核心是通过MutationObserver监听页面DOM变化，动态识别展开按钮并自动点击，避免重复触发，代码示例如下：

// 配置不同站点的展开按钮匹配规则，可按需新增规则
const expandRules = [
  // Quora站点展开按钮类名规则
  { type: 'class', value: 'q-text qu-cursor--pointer qu-hover--textDecoration--underline' },
  // 通用中文展开按钮文本规则
  { type: 'text', value: '展开阅读' },
  // 通用英文展开按钮文本规则
  { type: 'text', value: 'Read more' },
  // 其他站点规则可按格式往下加
  { type: 'class', value: 'read-more-btn' },
  { type: 'class', value: 'expand-content-btn' }
]

// 监听DOM节点变化，动态检测展开按钮
const observer = new MutationObserver((mutations) => {
  expandRules.forEach(rule => {
    let buttons = []
    if (rule.type === 'class') {
      const classSelector = rule.value.split(' ').map(item => `.${item}`).join('')
      buttons = document.querySelectorAll(classSelector)
    } else if (rule.type === 'text') {
      const allClickableElements = document.querySelectorAll('button, span, div[role="button"]')
      buttons = Array.from(allClickableElements).filter(el => el.textContent.trim() === rule.value)
    }
    buttons.forEach(btn => {
      // 标记已点击的按钮，避免重复触发点击
      if (!btn.dataset.hasExpanded) {
        btn.click()
        btn.dataset.hasExpanded = '1'
      }
    })
  })
})

// 启动监听整个文档的DOM变化
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
})

// 页面加载完成3秒后停止监听，减少不必要的性能消耗
window.addEventListener('load', () => {
  setTimeout(() => observer.disconnect(), 3000)
})

第三步：适配特殊站点的按钮规则
部分站点的展开按钮有自定义的类名、文本或者属性，你可以通过浏览器F12开发者工具的元素选择器定位到展开按钮，把对应的类名或者文本按规则添加到expandRules数组即可。

注意事项

部分站点的展开内容需要调用后端接口返回，点击按钮后可以给原有高亮逻辑加100-300ms的延迟执行，保证内容完全加载到页面中
建议按需缩小matches的匹配范围，仅在你需要的站点运行自动展开逻辑，避免对其他站点造成不必要的干扰
原有高亮逻辑的代码不需要做任何修改，仅调整manifest的脚本执行顺序即可兼容现有功能

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