Как открыть всплывающее окно browserAction из всплывающего окна pageAction?

Question

Фон

Я пишу веб-расширение для тегов закладок, а затем перехожу к этим закладкам по этим тегам. (Примечание: изначально я хотел прочитать нативные теги, но на самом деле это не доступно API веб-расширений, поэтому вместо этого я собираюсь использовать storage.local для хранения этой информации). Я новичок в разработке веб-расширений.

Я использую превосходное adambullmer / vue -cli-plugin-browser-extension для создания расширения с использованием Vue.

Issue

Я буду настраивать всплывающее окно действий браузера для управления закладками и тегами. Я также буду настраивать всплывающее окно действий для добавления тегов (и / или закладок) текущей активной страницы. Из всплывающего окна действия страницы я пытаюсь добавить удобную кнопку, чтобы открыть всплывающее окно действий браузера (для управления тегами и закладками).

Однако, нажимая кнопку, я получаю сообщение об ошибке «Ошибка: неверно» типы аргументов для browserAction.openPopup. "

Фрагменты кода

src/page-action-popup/App.vue:

<template>
  <div class="bg-gray-100 h-full w-full">
    <button
      class="m-2 py-1 px-3 bg-gray-500 rounded-full"
      @click.prevent="openBrowserActionPopup"
    >
      Open a browser action (Vue event handler)
    </button>
    <button
      ref="browserActionButtonEventListener"
      class="m-2 py-1 px-3 bg-gray-500 rounded-full"
    >
      Open a browser action (native DOM event listener on DOM element)
    </button>
    <button
      ref="browserActionButtonProperty"
      class="m-2 py-1 px-3 bg-gray-500 rounded-full"
    >
      Open a browser action (onclick property on DOM element)
    </button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openBrowserActionPopup() {
      console.log('trying to open browser action popup');
      browser.browserAction.openPopup();
    }
  },
  mounted() {
    this.$refs.browserActionButtonEventListener.addEventListener('click', this.openBrowserActionPopup);
    this.$refs.browserActionButtonProperty.onclick = this.openBrowserActionPopup;
    console.log(this.$refs.browserActionButtonEventListener);
  },
}
</script>

src/manifest.json:

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "homepage_url": "https://github.com/tigregalis/nav-by-tag",
  "developer": {
    "name": "tigregalis",
    "url": "https://github.com/tigregalis"
  },
  "description": "An extension for tagging bookmarks and navigating by them",
  "default_locale": "en",
  "permissions": [
    "<all_urls>",
    "*://*/*",
    "bookmarks",
    "tabs",
    "storage"
  ],
  "icons": {
    "16": "icons/logo.svg",
    "48": "icons/logo.svg",
    "128": "icons/logo.svg"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "browser-action-popup.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/logo.svg",
      "38": "icons/logo.svg"
    },
    "theme_icons": [
      {
        "dark": "icons/logo-dark.svg",
        "light": "icons/logo-light.svg",
        "size": 19
      },
      {
        "dark": "icons/logo-dark.svg",
        "light": "icons/logo-light.svg",
        "size": 38
      }
    ]
  },
  "page_action": {
    "default_popup": "page-action-popup.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/logo-light.svg",
      "38": "icons/logo-light.svg"
    },
    "show_matches": ["*://*/*"]
  },
  "options_ui": {
    "page": "options.html",
    "browser_style": true
  }
}

Ресурсы, на которые я смотрел

• MDN:
  • browserAction.openPopup () с указанием " Вы можете вызывать эту функцию только из обработчика для действия пользователя. "
  • Действия пользователя , в котором говорится, что" Действия пользователя включают следующее: [...] Нажатие кнопки в страница в комплекте с расширением. "
  • MDN, по-видимому, не покрывает этот сценарий, ни за, ни против.
• Множество поисков в Google, Mozilla и StackOverflow: несомненно кто-то еще пытался сделать то, что я пытаюсь?

Вещи, которые я пробовал

1. Изначально я использовал стандартное Vue событие, чтобы попытаться вызвать browserAction.openPopup(), что выдает мне ошибку выше.

2. Я пытался наивно добавить функцию обратного вызова в качестве аргумента browserAction.openPopup(), но вместо этого я получаю новую ошибку о количестве аргументов.

Прочитав страницу «Действия пользователя», я попробовал множество различных способов установить обработчик событий для необработанного элемента DOM, см. Фрагмент кода выше для двух из них, и я получаю ту же ошибку