如何从Content Script调用已注入网页的JavaScript函数

当然可以实现！不过得先明确一个关键点：Chrome扩展的Content Script和你通过script标签注入的test.js运行在完全隔离的上下文环境里——Content Script有自己独立的window对象，没法直接访问主页面上下文里的函数、变量，所以得通过跨上下文通信的方式来触发调用。下面给你两种实用的实现方案：

方案1：自定义DOM事件通信（推荐，安全合规） #

这是最符合扩展开发规范的方式，不会打破上下文隔离的安全机制：

1. 先修改你的test.js，让它监听一个自定义事件，收到事件后执行doSomething：

// test.js 完整代码
function doSomething(){ 
  console.log('Call the function of embadded js file function'); 
}

// 新增监听自定义事件的代码
document.addEventListener('trigger-do-something', () => {
  doSomething();
});

2. 然后在你的Content Script里，创建并派发这个自定义事件即可触发函数调用：

// Content Script 代码
const triggerEvent = new CustomEvent('trigger-do-something');
document.dispatchEvent(triggerEvent);

方案2：通过临时脚本调用（不推荐，有安全风险） #

如果你只是在测试场景下快速实现，可以把函数挂载到主页面的window上，再通过Content Script创建临时脚本的方式调用，但这种方式会打破上下文隔离，可能被页面恶意脚本利用，所以不建议在正式扩展里使用：

1. 修改test.js，把函数暴露到主页面的window对象：

// test.js 代码
window.doSomething = function(){ 
  console.log('Call the function of embadded js file function'); 
}

2. 在Content Script里创建一个临时的script标签来执行调用：

// Content Script 代码
const tempScript = document.createElement('script');
tempScript.textContent = 'doSomething();';
document.body.appendChild(tempScript);
tempScript.remove(); // 执行完就删掉临时脚本，避免污染DOM

补充说明 #

为啥不能直接调用？因为Chrome为了扩展的安全性，给Content Script做了沙箱隔离——它能读写页面DOM，但和主页面的JavaScript运行环境是完全分开的，两者的window对象不是同一个，所以没法直接访问对方的函数或变量。用DOM事件或者临时脚本的方式，本质是借助DOM这个公共桥梁来完成跨上下文的通信。

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