如何在Chrome扩展中调用页面原生page_action函数且无需点击隐藏按钮？

结论 #

可以实现从Chrome扩展中触发页面全局的page_action函数，核心是要绕过Chrome扩展内容脚本与页面JavaScript的执行上下文隔离限制。

实现原理 #

Chrome扩展的内容脚本（content script）和页面自身的JavaScript运行在完全独立的上下文环境中，内容脚本无法直接访问页面定义的全局函数，你之前尝试直接调用、修改扩展自身CSP的方案无效，就是因为没有突破这个隔离限制。
我们可以通过向页面DOM注入可执行脚本的方式，让代码运行在页面原始上下文，就能直接调用页面全局的page_action函数。

具体实现代码 #

基础注入方案（无严格CSP限制场景） #

在你的内容脚本中加入如下代码：

// 封装调用方法
function triggerPageAction(actionId) {
  // 创建脚本标签
  const injectScript = document.createElement('script');
  // 写要在页面上下文执行的逻辑
  injectScript.textContent = `
    if (typeof page_action === 'function') {
      page_action('${actionId.replace(/'/g, "\\'")}');
    }
  `;
  // 插入DOM执行
  document.documentElement.appendChild(injectScript);
  // 执行完立即清理
  injectScript.remove();
}

// 调用示例，传入你需要的参数即可
triggerPageAction('1');

兼容页面严格CSP的方案 #

如果目标页面的CSP禁止内联脚本执行，上述方案会被拦截，可改用Blob URL方式注入：

function triggerPageAction(actionId) {
  const actionIdEscaped = actionId.replace(/'/g, "\\'");
  const scriptContent = `
    if (typeof page_action === 'function') {
      page_action('${actionIdEscaped}');
    }
  `;
  // 转为Blob资源
  const scriptBlob = new Blob([scriptContent], { type: 'text/javascript' });
  const blobUrl = URL.createObjectURL(scriptBlob);
  
  const injectScript = document.createElement('script');
  injectScript.src = blobUrl;
  document.documentElement.appendChild(injectScript);
  
  // 执行后清理资源
  injectScript.onload = () => {
    injectScript.remove();
    URL.revokeObjectURL(blobUrl);
  };
}

注意事项 #

• 调用前要确保页面的https://website.cdn.com/my_script.js已经加载完成，否则page_action未定义会导致调用失败，可根据实际场景增加加载状态判断、延时重试逻辑。
• 如果传入page_action的参数是动态获取的非固定值，必须做好特殊字符转义，避免出现脚本注入漏洞。
• 你之前修改的content_security_policy配置作用于扩展自身的页面（如popup、后台页面），和调用页面全局函数的场景无关，不需要保留该配置。

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