Click Chrome extension icon to execute scripts on active tab

background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {
      tabId: tab.id,
    },
    files: ["content.js"],
  });
});

content.js

// modify page content here...

manifest.json

{
  "manifest_version": 3,
  "name": "Foo",
  "version": "0.1",
  "description": "Blabla...",
  "action": {
    "default_icon": {
      "16": "images/icon16.png",
      "32": "images/icon32.png"
    },
    "default_title": "Foo"
  },
  "permissions": ["activeTab", "scripting", "tabs"],
  "host_permissions": [
    "*://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

Important note for anyone like me who tries this in the future: make sure that your background.js folder is in the same file as your manifest, otherwise the manifest is unable to access it. In general have all files in the same file as the manifest. Thanks for the code though, saved our lives at this hackathon