How to create a chrome extension that can manipulate a specific page?

Question

I am just starting into developing a chrome extension, where i would want to manipulate the DOM on a specific website, i have read a few tutorials, but there are not that many that are up to date regarding this topic and with manifest v3. What i want to achive now, is just a simple console log from the foreground, or even changing the background color for google would be fine.

Manifest.json

{
  "name": "Extension",
  "description": "Extension description",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "./background.js"
  },
  "action": {
    "default_popup": "./popup.html"
  },
  "permissions": ["tabs", "https://google.com", "scripting"]
}

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (tab.url.indexOf("opensea.io") > -1) {
    chrome.scripting.executeScript({
      target: {tabId: tab.id, allFrames: true},
      files: ["./foreground.js"],
    });
  }
});

foreground.js

console.log('active');

I'am kinda confused how to do this properly, one tutorial says this, the other says an other way, but both of them doesn't seem to work so far. The error is that it cannot access the contents of the url.