当用户点击扩展图标时如何注入内容脚本[重复]

Question

我想在用户单击我的 chrome 扩展程序图标或单击 chrome 扩展程序弹出窗口内的按钮后，将自定义代码注入网页。我已经在 **loom **（屏幕录像机）中看到了这个功能，当用户点击 loom 图标时，它会显示一个用于加载的弹出窗口，然后将自己的自定义代码注入用户的网页

我也想做这样的事情，但不知道具体怎么做，

我试试这个：-

清单.json

{
    "manifest_version": 3,
    "name": "My Extension",
    "version": "1.0",
    "description": "Description of my extension",
    "permissions": ["activeTab"],
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content.js"]
        }
      ],
      "background": {
        "service_worker": "background.js"
      }
    
  }

背景.js

chrome.action.onClicked.addListener(async function(tab) {
    chrome.tabs.executeScript({
        file: "content.js"
      });
  });

content.js

  const overlayButton = document.createElement("button");
  overlayButton.innerText = "Record";
  
  // Add a click event listener to the button
  overlayButton.addEventListener("click", function() {
    // Code to handle button click event
  });
  
  // Add the overlay button to the page
  document.body.appendChild(overlayButton);

但是我在 chrome 扩展中遇到了这个错误：-

我不太确定在用户网页中注入我自己的代码的最佳做法是什么。另外我应该怎么做而不写 .innerHTML 和里面的整个 html

谢谢:)