未捕获的类型错误：无法读取未定义的属性（读取“onClicked”）

Question

我正在尝试将我的 chrome 纯 JS 扩展迁移到 vuejs 版本。我所有的 pureJS 版本都工作正常。

但是使用 vuejs 我在加载扩展时出现无法理解的错误。

这是我的 manifest.json 和 vue.config.js ： Manifest ：

{
  "manifest_version": 2,
  "name": "__MSG_appName__",
  "version": "2.1.0",
  "homepage_url": "https://*****.*********/",
  "description": "****** Vuejs",
  "default_locale": "fr",
  "permissions": [
    "activeTab",
    "<all_urls>",
    "*://*/*",
    "storage"
  ],
  "icons": {
    "48": "icons/icon-48.png",
    "64": "icons/icon-64.png",
    "128": "icons/icon-128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_appName__",
    "default_icon": {
      "48": "icons/icon-48.png",
      "64": "icons/icon-64.png"
    }
  }
}

vue.config.js ：

module.exports = {
  pages: {
    popup: {
      template: "public/browser-extension.html",
      entry: "./src/popup/main.js",
      title: "Popup",
    },
  },
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: "src/background.js",
        },
        contentScripts: {
          entries: {
            "content-script": [
              "src/content_scripts/contentScript.js",
              "src/content_scripts/config.js",
              "src/content_scripts/capture.js",
            ],
          },
        },
        permissions: [
          "<all_urls>",
          "activeTab",
          "contextMenus",
          "notifications",
          "storage",
          "identity",
        ],
        browser_action: {},
      },
    },
  },
};

项目正在编译，没有任何问题。然后我通过指向 /dist 文件夹在浏览器上加载我的扩展。然后我收到错误Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')并且我的扩展显示空白弹出窗口。这是导致错误的代码部分：

browser.contextMenus.onClicked.addListener(async (info, tab) => {

当然，我尝试使用“chrome”而不是“浏览器”，但没有成功......

任何帮助，将不胜感激。先感谢您。

Answer 1

我遇到了同样的问题，发现您需要添加"action": {}到您的manifest.json。

{
  "manifest_version": 2,
  "name": "__MSG_appName__",
  "version": "2.1.0",
  "homepage_url": "https://*****.*********/",
  "description": "****** Vuejs",
  "default_locale": "fr",
  "action": {},
  "permissions": [
    "activeTab",
    "<all_urls>",
    "*://*/*",
    "storage"
  ],
  "icons": {
    "48": "icons/icon-48.png",
    "64": "icons/icon-64.png",
    "128": "icons/icon-128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_appName__",
    "default_icon": {
      "48": "icons/icon-48.png",
      "64": "icons/icon-64.png"
    }
  }
}

Answer 2

我将代码替换为

browser.browserAction.onClicked.addListener(async (info, tab) => {

它有效。