Как передать данные из vue в content.js в расширение chrome?

Question

[Сергей Бурдужа]

Всем привет.
Создал расширение на базе vue.js
Вот manifest 3

{
  "manifest_version": 3,
  "name": "Fill Form",
  "description": "Fill Form with data from local storage",
  "version": "1.1",
  "author": "Sergiu Burduja",
  "action": {
    "default_popup": "index.html",
    "default_icon": "icons/icon-32.png"
  },
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "scripting",
    "storage",
    "alarms",
    "notifications",
    "downloads"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "js": ["src/js/content.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "background": {
    "service_worker": "src/js/background.js"
  },
  "commands": {
    "tabs-to-buffer": {
      "suggested_key": {
        "default": "Ctrl+Shift+Up",
        "mac": "Command+Shift+Up"
      },
      "description": "Open app"
    }
  }
}

В App.vue при клике на кнопку хочу отправить данные в content.js

chrome.runtime.sendMessage({type: 'getData'}, (response: any) => {
    console.log(response, "response");
    // Use the response data to update your Vue app.
  });

И в content.js получить и отправить обратно.

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 if (message.type === 'getData') {
   const data = {title: "text"};
   sendResponse(data);
 }
});

Открываю обе консолей, одно из браузера, и второе от расширения(правый клик на окно отркытого расширения)

Именно chrome.runtime.onMessage не срабатывает, так как другой тестовый код из content.js отображается.

Заранее благодарен.