René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"How to install livewire-devtools under Chrome?","articleBody":"Hello,\r\nIn the console of my Livewire/livewire 2 / laravel 7  app I got error :\r\n```\r\nlogin?email=admin%40mail.com\u0026password=111111:60 Uncaught TypeError: window.livewire.devTools is not a function\r\n    at login?email=admin%40mail.com\u0026password=111111:60\r\n(anonymous) @ login?email=admin%40mail.com\u0026password=111111:60\r\nlivewire-turbolinks.js:31 Uncaught TypeError: Livewire.hook is not a function\r\n\r\n```\r\nI loaded and installed package from https://github.com/beyondcode/livewire-devtools\r\nand selected it under chrome://extensions/\r\nbut I see erros buttons red: https://prnt.sc/vqgk51\r\n\r\nand clicking on it I see error:\r\n```\r\nError in event handler: ReferenceError: suffix is not defined\r\nContext\r\n_generated_background_page.html\r\nStack Trace\r\nbuild/background.js:1 (anonymous function)\r\n\r\n\r\n!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\u0026\u0026e.__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=\u003e{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\u0026\u0026o[n].backend\u0026\u0026function(e,n,t){function s(n){if(\"log\"===n.event)return console.log(\"tab \"+e,n.payload);console.log(\"devtools -\u003e backend\",n),t.postMessage(n)}function c(o){if(\"log\"===o.event)return console.log(\"tab \"+e,o.payload);console.log(\"backend -\u003e 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)=\u003e{n.tab\u0026\u0026e.livewireDetected\u0026\u0026(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})=\u003e{t=e}),chrome.contextMenus.onClicked.addListener((e,n)=\u003e{chrome.runtime.sendMessage({vueContextMenu:{id:e.menuItemId}})})}});\r\n\r\n```\r\nI reopened Chrome and reloaded Kubutu.\r\n\r\n\r\nLooking at branch https://github.com/beyondcode/livewire-devtools/issues/6\r\nI found some hints how it can be fixed:\r\n1) In file package.json I added \r\n```\r\n    \"devDependencies\": {\r\n        \"eslint\": \"^7.9.0\"\r\n    },\r\n\r\n```\r\neslint line and run \r\n```\r\nnpm install\r\nnpm run watch-poll\r\n\r\n```with success\r\n\r\n2) In my project I found 3 files : \r\n\r\n- /vendor/livewire/livewire/dist/manifest.json\r\n- /public/mix-manifest.json\r\n- /public/vendor/livewire/manifest.json\r\n- \r\n\r\nbut all these 3 files are autogenerated I do not know which file have I to edit as I read :\r\n```\r\n{\r\n  ...\r\n  \"permissions\": [\r\n    \"http://*/*\",\r\n    \"https://*/*\",\r\n+   \"contextMenus\"\r\n  ],\r\n  ...\r\n}\r\ncontextMenus is missed in manifest.json\r\n\r\n```\r\n\r\nWhat can be the issue and how to fix it ?\r\n\r\nThanks!\r\n","author":{"url":"https://github.com/sergeynilov","@type":"Person","name":"sergeynilov"},"datePublished":"2020-12-02T13:20:09.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/10/livewire-devtools/issues/10"}