How to install livewire-devtools under Chrome?

Start by reproducing the extension errors and inspect build/background.js, package.json, and the generated manifest files listed in the report. Compare the setup with the referenced livewire-devtools issue 6 and trace how the extension is built and loaded. Done means the correct manifest/build issue is identified and the extension loads without the reported errors while Livewire hooks work.

Hello,
In the console of my Livewire/livewire 2 / laravel 7 app I got error :

login?email=admin%40mail.com&password=111111:60 Uncaught TypeError: window.livewire.devTools is not a function
    at login?email=admin%40mail.com&password=111111:60
(anonymous) @ login?email=admin%40mail.com&password=111111:60
livewire-turbolinks.js:31 Uncaught TypeError: Livewire.hook is not a function

I loaded and installed package from https://github.com/beyondcode/livewire-devtools
and selected it under chrome://extensions/
but I see erros buttons red: https://prnt.sc/vqgk51

and clicking on it I see error:

Error in event handler: ReferenceError: suffix is not defined
Context
_generated_background_page.html
Stack Trace
build/background.js:1 (anonymous function)


!function(e){var n={};function o(t){if(n[t])return n[t].exports;var s=n[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,o),s.l=!0,s.exports}o.m=e,o.c=n,o.d=function(e,n,t){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="",o(o.s=659)}({659:function(e,n){const o={};let t;chrome.runtime.onConnect.addListener(e=>{let n,t;!function(e){return+e+""===e}(e.name)?(n=e.sender.tab.id,t="backend"):(n=e.name,t="devtools",function(e){chrome.tabs.executeScript(e,{file:"/build/proxy.js"},function(n){n?console.log("injected proxy to tab "+e):o[e].devtools.postMessage("proxy-fail")})}(+e.name)),o[n]||(o[n]={devtools:null,backend:null}),o[n][t]=e,o[n].devtools&&o[n].backend&&function(e,n,t){function s(n){if("log"===n.event)return console.log("tab "+e,n.payload);console.log("devtools -> backend",n),t.postMessage(n)}function c(o){if("log"===o.event)return console.log("tab "+e,o.payload);console.log("backend -> devtools",o),n.postMessage(o)}function r(){console.log("tab "+e+" disconnected."),n.onMessage.removeListener(s),t.onMessage.removeListener(c),n.disconnect(),t.disconnect(),o[e]=null}n.onMessage.addListener(s),t.onMessage.addListener(c),n.onDisconnect.addListener(r),t.onDisconnect.addListener(r),console.log("tab "+e+" connected.")}(n,o[n].devtools,o[n].backend)}),chrome.runtime.onMessage.addListener((e,n)=>{n.tab&&e.livewireDetected&&(chrome.browserAction.setIcon({tabId:n.tab.id,path:{16:"icons/1.png",48:"icons/48.png",128:"icons/128.png"}}),chrome.browserAction.setPopup({tabId:n.tab.id,popup:e.devtoolsEnabled?`popups/enabled${suffix}.html`:`popups/disabled${suffix}.html`}))}),chrome.tabs.onActivated.addListener(({tabId:e})=>{t=e}),chrome.contextMenus.onClicked.addListener((e,n)=>{chrome.runtime.sendMessage({vueContextMenu:{id:e.menuItemId}})})}});

I reopened Chrome and reloaded Kubutu.

Looking at branch https://github.com/beyondcode/livewire-devtools/issues/6
I found some hints how it can be fixed:

1. In file package.json I added

    "devDependencies": {
        "eslint": "^7.9.0"
    },

eslint line and run

npm install
npm run watch-poll

```with success

2) In my project I found 3 files : 

- /vendor/livewire/livewire/dist/manifest.json
- /public/mix-manifest.json
- /public/vendor/livewire/manifest.json
- 

but all these 3 files are autogenerated I do not know which file have I to edit as I read :

{
...
"permissions": [
"http:///",
"https:///",

• "contextMenus"
  ],
  ...
  }
  contextMenus is missed in manifest.json

What can be the issue and how to fix it ?

Thanks!