问题描述

背景

我正在编写一个 Web 扩展来标记书签，然后通过这些标签导航到这些书签。（附注：最初我想阅读本机标签，但这实际上并未暴露给 Web 扩展 API，因此我将使用它storage.local来保存该信息）。我是网络扩展开发的新手。

我正在使用优秀的adambullmer/vue-cli-plugin-browser-extension来使用 Vue 构建扩展。

问题

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

但是，当单击该按钮时，我收到错误“错误：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
  }
}

我看过的资源

医疗器械网络：
- browserAction.openPopup()声明“您只能从处理程序内部调用此函数以执行用户操作。”
- 用户操作指出“用户操作包括以下内容：[...] 单击与扩展程序捆绑的页面中的按钮。”
- MDN 似乎没有涵盖这种情况，无论是赞成还是反对。
大量的 Google、Mozilla 和 StackOverflow 搜索：肯定有人尝试过我正在尝试的事情吗？

我尝试过的事情

最初我使用标准的 Vue 事件来尝试调用browserAction.openPopup()，这给了我上面的错误。
我尝试天真地添加一个回调函数作为参数browserAction.openPopup()，但我得到了一个关于参数计数的新错误。

阅读了用户操作页面后，我尝试了许多不同的方法来在原始 DOM 元素上设置事件处理程序，请参阅上面的代码片段了解其中的两个，我得到了同样的错误

标签： vue.jsgoogle-chrome-extensionfirefox-addonfirefox-addon-webextensions

vue.js - 如何从 pageAction 弹出窗口中打开 browserAction 弹出窗口？

问题描述

背景

问题

代码片段

我看过的资源

我尝试过的事情

解决方案

推荐阅读