如何从Chrome扩展向主页面控制台执行JavaScript并输出内容？

我知道Stack Overflow上有不少解决方案，但试过都没成。我想通过Chrome扩展在当前页面的控制台打印Hello World，但主控制台完全没输出。下面是我目前的实现代码：

扩展HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Saitama Techno</title>
    </head>
    <body>
        <h1>Welcome to Saitama Techno</h1>
        <button id="mybutton">Click me</button>
        <script src="myscript.js"></script>
    </body>
</html>

JavaScript代码（原实现） #

function btnclicked(){
    console.log("Hello from extension");
    chrome.extension.getBackgroundPage().console.log('hello to main console');
}
document.getElementById("mybutton").addEventListener("click", btnclicked);

manifest.json代码 #

{
    "name": "Saitama Techno scraping",
    "version": "1.0.0",
    "description": "webscraping duuuuuuude",
    "manifest_version": 3,
    "author": "Enes Telli",
    "action": {
        "default_popup": "index.html",
        "default_title": "Saitama Techno"
    },
    "permissions": ["https://*/*",
    "http://*/*", "storage", "tabs", "declarativeContent", "activeTab", "scripting"]
}

popup脚本和当前网页的上下文是完全隔离的，你用的chrome.extension.getBackgroundPage().console.log只会把日志输出到扩展后台页面的控制台，而非当前网页的控制台。要在当前页面控制台输出内容，必须用Manifest V3的scriptingAPI向页面注入脚本。

修改后的JavaScript代码 #

function btnclicked() {
  // 这条日志会输出在popup自己的控制台（右键扩展图标→检查弹出窗口可查看）
  console.log("Hello from extension");
  // 获取当前激活的标签页，注入脚本到页面上下文
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      // 要在页面控制台执行的函数
      func: () => {
        console.log("Hello World");
      }
    });
  });
}
document.getElementById("mybutton").addEventListener("click", btnclicked);

额外说明 #

1. 你的manifest.json已经包含了scripting和activeTab权限，无需额外修改；Manifest V3中http://*/*和https://*/*权限可以移除，activeTab已足够临时访问当前页面。
2. 点击按钮后，打开当前网页的控制台（F12），就能看到"Hello World"的输出。
3. popup中的console.log日志，需要右键扩展图标选择「检查弹出窗口」才能查看对应的控制台。

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