Trying to inject html into the current page the user is on but getting unexpected parameter error building chrome extension

document.getElementById("genScoresBtn").onclick = function() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.scripting.executeScript(
        {
          target: { tabId: tabs[0].id },
          files: ['content.js']
        },
        function() {
          chrome.scripting.executeScript(
            {
              target: { tabId: tabs[0].id },
              function: 'addScores'
            }
          );
        }
      );
    });
};

I am building a chrome extension and I currently am trying to build out a feature where you click a button in the popup.html where it injects html into the current webpage the user is looking at. When I try to click the button I get this error:

ror handling response: TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter ‘injection’: Error at property ‘function’: Invalid type: expected function, found string.

Here is my manifest json file:

{
  "manifest_version": 3,
  "name": "Linkedly",
  "version": "1.0.0",
  "description": "Linkedly is a chrome extension that helps you find the most relevant LinkedIn profiles for your target companies.",
  "permissions": ["activeTab","tabs", "scripting"],
  "icons": {
    "128": "images/chainlogo.png"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}