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

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')未捕获的类型错误：无法读取未定义的属性（读取“onClicked”）
【发布时间】：2021-10-31 08:31:56
【问题描述】：

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

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

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

{
  "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”而不是“browser”，但没有成功...

任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

听起来您在内容脚本中调用此代码。内容脚本无法访问此 API。你需要在 background.js 中做
@wOxxOm 不，我从 background.js 调用该代码...

标签： javascript vue.js google-chrome-extension firefox-addon-webextensions

【解决方案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"
    }
  }
}

【讨论】：

我在 Manifest v3 上苦苦挣扎，这也为我解决了问题。

【解决方案2】：

我将代码替换为

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

它有效。

【讨论】：