Chrome扩展从content_scripts注入JavaScript失效问题求助

问题根源 #

Content Script运行在与页面JS环境隔离的独立上下文，两者的全局变量、函数完全不共享。你用innerHTML插入<script>标签的方式，浏览器出于安全机制不会自动执行其中的代码；即便通过其他方式触发执行，函数也会留在Content Script的上下文里，页面无法访问，最终抛出ReferenceError。

正确注入方法 #

直接创建<script>元素并插入页面DOM，让代码运行在页面的原生上下文：

// 在Content Script中执行这段代码
const injectScript = document.createElement('script');
injectScript.textContent = `
alert('First');
function doSome() {
  console.log('doSome 执行成功');
}
// 直接调用函数
doSome();
`;
// 插入到页面的<head>或<body>中
document.head.appendChild(injectScript);
// 可选：插入后移除script元素，避免DOM冗余
injectScript.remove();

这种方式下，alert('First')会直接弹出，doSome()也能正常执行，页面的其他代码也能访问到doSome函数。

为什么之前的方法无效 #

• innerHTML插入script：浏览器会解析标签但不会自动执行脚本，这是内置的XSS防护机制。
• eval()无效：eval()在Content Script的上下文执行，生成的函数属于Content Script的全局环境，和页面的全局环境不互通，页面调用自然找不到。

跨上下文通信（可选） #

如果需要Content Script和注入的页面脚本交互，可通过window.postMessage或Chrome扩展的chrome.runtime.sendMessage实现：

// 注入的页面脚本里发送消息
window.postMessage({ type: 'FROM_PAGE', data: 'hello' }, '*');

// Content Script里监听消息
window.addEventListener('message', (event) => {
  if (event.source === window && event.data.type === 'FROM_PAGE') {
    console.log('收到页面消息:', event.data.data);
  }
});

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