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

2023-05-16

多年后补充: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 删掉相应的字段

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

electron+vue项目添加vue-devTools Unrecognized manifest key ‘browser_action‘. Permission ‘contextMenus‘ 的相关文章

随机推荐