Vue.js 如何从pageAction弹出窗口中打开browserAction弹出窗口？ 背景

我正在编写一个web扩展来标记书签，然后通过这些标记导航到这些书签。（旁注：最初我想读取本机标记，但实际上它没有暴露在web扩展API中，因此我将使用

storage.local

保存该信息）。我不熟悉web扩展开发

我正在使用优秀的Vue构建扩展

问题 我将设置一个浏览器操作弹出窗口来管理书签和标签。我还将设置一个页面操作弹出窗口，向当前活动页面添加标签（和/或书签）。在页面操作弹出窗口中，我试图添加一个方便按钮来打开浏览器操作弹出窗口（管理标签和书签）

但是，当单击按钮时，出现错误“error:browserAction.openPopup的参数类型不正确”

代码片段

src/page action popup/App.vue

：

打开浏览器操作（Vue事件处理程序）
打开浏览器操作（DOM元素上的本机DOM事件侦听器）
打开浏览器操作（DOM元素上的onclick属性）
导出默认值{
名称：“应用程序”，
方法：{
openBrowserActionPopup（）{
log（'尝试打开浏览器操作弹出窗口'）；
browser.browserAction.openPopup（）；
}
},
安装的（）{
this.$refs.browserActionButtonEventListener.addEventListener（'click'，this.openBrowserActionPopup'）；
this.$refs.browserActionButtonProperty.onclick=this.openBrowserActionPopup；
log（此.$refs.browserActionButtonEventListener）；
},
}

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
  }
}

{
“清单版本”：2，
“名称”：“\uuuu MSG\uextname\uuuuuuu”，
“主页地址”：https://github.com/tigregalis/nav-by-tag",
“开发商”：{
“名称”：“蒂格里加里斯”，
“url”：”https://github.com/tigregalis"
},
“说明”：“用于标记书签并通过书签导航的扩展”，
“默认语言环境”：“en”，
“权限”：[
“其中说明”只能从处理程序内部为用户操作调用此函数。“
其中指出“用户操作包括以下内容：[…]单击与扩展捆绑在一起的页面中的按钮。”
MDN似乎不包括此场景，无论是针对还是反对

大量的谷歌、Mozilla和StackOverflow搜索：肯定有其他人尝试过我所尝试的吗

我尝试过的事情
最初，我使用一个标准的Vue事件尝试调用
browserAction.openPopup（）
，这给了我上面的错误

我天真地尝试将回调函数作为参数添加到
browserAction.openPopup（）
，但是我得到了一个关于参数计数的新错误


阅读了用户操作页面后，我尝试了许多不同的方法在原始DOM元素上设置事件处理程序，其中两种方法请参见上面的代码片段，我得到了相同的错误
我遇到了类似的问题，因为我必须检查async是否在任何选项卡（
browser.tabs.query
）中打开了特定的url，以便导航到该选项卡或打开弹出窗口。问题是在异步调用之后，回调不再是输入处理程序

解决方案：
将弹出窗口设置为浏览器操作并生成脚本（必须是单独的文件）。在这里，您可以进行异步调用和
window.close（）
如果发生其他情况。
1）扩展不能同时具有页面操作和浏览器操作，manifestV3将在未来将它们合并为一个操作API 2）openPopup在Chrome中仍处于试验阶段，因为它存在“属性问题”“每一个crbug，所以它在稳定的版本中都不存在。@wOxxOm是这样吗？你有相关链接吗？我已经在Firefox中测试过了，它肯定可以显示页面操作和浏览器操作的按钮和弹出窗口（在Release和Developer中测试过）.Chrome应该在两者都指定时显示。我们可以看到如何始终只检索一种类型，在其他函数中也可以看到相同的类型。有关统一的努力，请参见。@wOxxOm当您说统一时，这是Firefox和Chrome的统一，还是页面操作和浏览器操作的统一，还是两者的统一？您知道这是将来所有平台都会被弃用吗？