Chrome浏览器扩展能否读取已加载的Redux应用状态？

可以实现，但要注意Chrome扩展的内容脚本与页面上下文隔离的限制——内容脚本无法直接访问页面全局window对象中的Redux Store，需要通过「注入脚本到页面上下文」的方式间接获取。

具体实现步骤 #

1. 注入脚本到页面上下文
   内容脚本运行在独立的隔离环境，无法直接访问页面的Redux Store，因此需要创建一个<script>标签，将获取状态的代码注入到页面自身的执行上下文里。

   示例代码如下：

   • 内容脚本（content.js）负责注入脚本并监听结果：

     // 创建注入脚本
     const injectScript = document.createElement('script');
     injectScript.textContent = `
       // 运行在页面上下文的代码
       function getReduxState() {
         // 情况1：应用将Store挂载到window（常见于开发环境或部分生产应用）
         if (window.__REDUX_STORE__) {
           return window.__REDUX_STORE__.getState();
         }
         // 情况2：从React根组件中获取Store（适用于使用React-Redux的应用）
         const rootEl = document.getElementById('root');
         if (rootEl?._internalRoot?.memoizedState?.element?._owner?.stateNode?.store) {
           return rootEl._internalRoot.memoizedState.element._owner.stateNode.store.getState();
         }
         return null;
       }
     
       // 监听来自内容脚本的请求，返回Redux状态
       window.addEventListener('message', (e) => {
         if (e.data.type === 'REQUEST_REDUX_STATE') {
           const state = getReduxState();
           window.postMessage({ type: 'REDUX_STATE_RESULT', payload: state }, '*');
         }
       });
     `;
     document.documentElement.appendChild(injectScript);
     injectScript.remove();
     
     // 向页面上下文发送状态请求
     window.postMessage({ type: 'REQUEST_REDUX_STATE' }, '*');
     
     // 接收页面返回的状态
     window.addEventListener('message', (e) => {
       if (e.source === window && e.data.type === 'REDUX_STATE_RESULT') {
         console.log('获取到的Redux状态:', e.data.payload);
         // 可将状态传递给扩展后台脚本或弹窗
         // chrome.runtime.sendMessage({ type: 'REDUX_STATE', data: e.data.payload });
       }
     });
     

2. 适配不同应用的Store位置
   不同应用的Redux Store挂载方式可能不同：

   • 部分应用会将Store直接挂在window上（如window.store或window.__REDUX_STORE__）
   • 使用React-Redux的应用，可通过React根组件的内部属性定位Store（但该方式依赖React的内部实现，可能随版本变化失效）
   • 若应用开启了React DevTools，也可通过window.__REACT_DEVTOOLS_GLOBAL_HOOK__间接查找Store，但稳定性较差

3. 扩展权限配置
   在manifest.json中配置内容脚本的目标页面匹配规则：

   {
     "manifest_version": 3,
     "content_scripts": [
       {
         "matches": ["https://目标应用域名/*"],
         "js": ["content.js"]
       }
     ]
   }
   

注意事项 #

• 安全验证：处理postMessage时要验证消息来源和类型，避免接收恶意消息
• CSP限制：若目标应用启用了严格的内容安全策略（CSP），直接注入inline脚本可能被阻止，此时可将注入代码放在扩展的独立JS文件中，通过injectScript.src = chrome.runtime.getURL('inject.js')加载（需在manifest.json中声明web_accessible_resources）
• 兼容性：Store的获取逻辑依赖目标应用的实现方式，没有通用的万能方案，需要针对目标应用做适配

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