Vue chrome extension - page_action не открывается всплывающее окно. html

Question

У меня проблемы с использованием page_action для расширения chrome. Я использую шаблон vue cli для создания базы расширения, и он отлично работает, если я использую отдельную вкладку или действие браузера со всплывающим окном. Я пытаюсь использовать действие страницы, чтобы ограничить расширение только веб-сайтом ceratin. Как я читал из документации, действие страницы имеет всплывающее окно, подобное действию браузера, и, если я хорошо понимаю, я могу определить его в моем файле манифеста, и он должен открываться, когда я нажимаю на значок расширения.

What происходит так: если я нажму на значок расширения на веб-сайте, где я хочу запустить это расширение, мой файл popup.html не будет открыт, я могу увидеть только всплывающее окно расширения chrome по умолчанию, как вы можете видеть из снимок экрана.

всплывающий экран по умолчанию

Это содержимое моего файла манифеста, я использую webRequest, поэтому фоновый скрипт должен быть постоянным:

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "homepage_url": "http://localhost:8080/",
  "description": "A Vue Browser Extension",
  "default_locale": "en",
  "permissions": [
    "https://www.exampleurl.com/*",
    "https://*.exampleurl.net/*",
    "webRequest"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/19.png",
      "38": "icons/38.png"
    }
  }
}

И это то, что у меня сейчас внутри моего фона. js файл:

var streamUrl

browser.runtime.onInstalled.addListener( () => {
  browser.declarativeContent.onPageChanged.removeRules(undefined, () => {
    browser.declarativeContent.onPageChanged.addRules([{
      conditions: [new browser.declarativeContent.PageStateMatcher({
          pageUrl: {hostEquals: 'www.exampleurl.com/*', schemes: ['https']},
      })],
      actions: [new browser.declarativeContent.ShowPageAction()]
    }])
  })
})

browser.webRequest.onCompleted.addListener( (details) => {
  console.log(details)
  streamUrl = details.url
},{
  urls: ["https://*.exampleurl.net/*"],
  types: ["xmlhttprequest"]
},["responseHeaders"])

console.log(streamUrl)

browser.runtime.onMessage.addListener( (message) => {
  console.log(message)
  if( message.type === 'ready' ){
    browser.runtime.sendMessage({url: streamUrl})
  }
})

Есть ли какое-нибудь исправление для этого? Я что-то упускаю?