electron+vue项目添加vue-devTools Unrecognized manifest key ‘browser_action‘. Permission ‘contextMenus‘

补充：2023 年 Chrome 插件已经全面要求升级到 MV3版本，所以下面的 manifest:2 vue-devtool工具在升级了新版 electron 后会出现警告，目前我看 vue-devtool还没有MV3 版本，等有了之后，大家可以把这个插件下载下来放到报错的路径下即可；

多年后补充：electron-vue 这个在windows上如果能用外网的情况，electron选择8.0版本能顺利安装vue-devtools工具

对于mac m1来说，必须升级到electron 13.0+版本，否则无法打包

electron对插件的支持有局限

下面的问题是插件有三个manifest版本了，最新的是manifest:2，报错是因为browser_action是manifest:2版本，1版本已经很古老了，都是代码的过时导致的

新版本的异常处理参考：Electron-Vue 异常处理方案 M1 和 Window10_森叶的博客-CSDN博客

手动clone项目vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
然后切换到master分支，默认的是dev分支：
git checkout master
进入vue-devtools根目录：

npm install
...
npm run build

然后将build生成的shells目录中的chrome目录拷贝出来，这个就是build生成的vue-devtools插件
浏览器安装容易，直接打开插件管理，切换开发模式，加载已解压插件，选择刚刚的chrome目录就行了。但是electron项目中安装会有点麻烦：
找到background.js文件，找到这段代码：

app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS);
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

这个是默认安装vue-devtools部分，不过因为网络问题，安装不上：

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

所以要修改一下：

app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      // await installExtension(VUEJS_DEVTOOLS);
      // 新增的：安装vue-devtools
      const { session } = require("electron");
      const path = require("path");
      session.defaultSession.loadExtension(
        path.resolve(__dirname, "../../devTools/chrome")  //这个是刚刚build好的插件目录
      ); 
//这个是刚开始找的方法不行，换上边的方法
// BrowserWindow.addDevToolsExtension(path.resolve(__dirname, "../../devTools/chrome")  );
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

session的使用方法
https://www.electronjs.org/docs/api/session#sesloadextensionpath

这个还没好，又提示了个问题：

(node:9068) ExtensionLoadWarning: Warnings loading extension at D:\work\docker\projects\devTools\chrome: Unrecognized manifest key 'browser_action'. Permission 'contextMenus' is unknown or URL pattern is malformed.

这个问题参考了下边的解决方法：

解决：
在dev-tools/chrome/manifest.json 删掉相应的字段