Failed to load the src folder to Chrome browser

[anthony-nyc]

Hi,

Since README doesn't contain how to install on Chrome browser, I just tried to load "src" folder and "public" folder using "Load unpacked" button but I got "failed" error.

Does anyone know how to install this on the browser by selecting the folder in my local folder?

Thank you!

[ttop32]

You can use this extension by downloading from https://chrome.google.com/webstore/detail/mouse-tooltip-translator/hmigninkgibhdckiaphhmbgcghochdjc?hl=en

If you want to build yourself to install

1. Install node js, https://nodejs.org/en/
2. open terminal
3. git clone https://github.com/ttop32/MouseTooltipTranslator.git
4. cd MouseTooltipTranslator
5. npm install
6. npm run build
7. You will see MouseTooltipTranslator/build path
8. From chrome, open this folder as unpacked extension folder

[anthony-nyc]

A question - do we need to install Node JS because this project contains Vue script? I've watched several videos on Chrome extension projects but I've not seen installation of Node JS so far.

Your comment would be greatly appreciated!

[anthony-nyc]

npm install returns 5 vulnerabilities only as shown bold. npm run build this command failed and didn't create /build folder.

Any ideas?

added 762 packages, and audited 763 packages in 2m

120 packages are looking for funding run npm fund for details

5 vulnerabilities (1 low, 1 moderate, 2 high, 1 critical)

To address all issues, run: npm audit fix

Run npm audit for details.

C:\Users\antho\Documents\Development\MouseTooltipTranslator>npm run build

[email protected] build webpack --mode=production --config config/webpack.config.js

production ERROR in ./node_modules/@mdi/font/css/materialdesignicons.css (./node_modules/mini-css-extract-plugin/dist/loader.js??cl onedRuleSet-3[0].rules[0].use[1]!./node_modules/css-loader/dist/cjs.js!./node_modules/@mdi/font/css/materialdesignicons. css) Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError: Module build failed (from ./node_modules/url-loader/dist/cjs.js):

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at getHashDigest (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-utils\lib\getHashD igest.js:46:34) at C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-utils\lib\interpolateName.js:113: 11 at String.replace () at interpolateName (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-utils\lib\interp olateName.js:110:8) at Object.loader (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\file-loader\dist\index.js :29:48) at Object.loader (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\url-loader\dist\index.js: 127:19) at processResult (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\webpack\lib\NormalModule. js:758:19) at C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\webpack\lib\NormalModule.js:860:5 at C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-runner\lib\LoaderRunner.js:400:11 at C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-runner\lib\LoaderRunner.js:252:18 at runSyncOrAsync (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-runner\lib\Loader Runner.js:156:3) at iterateNormalLoaders (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-runner\lib
LoaderRunner.js:251:2) at C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\loader-runner\lib\LoaderRunner.js:224:4 at C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\webpack\lib\NormalModule.js:834:15 at eval (eval at create (C:\Users\antho\Documents\Development\MouseTooltipTranslator\node_modules\webpack\node_modul es\tapable\lib\HookCodeFactory.js:33:10), :12:1) at processTicksAndRejections (node:internal/process/task_queues:82:21) at runNextTicks (node:internal/process/task_queues:64:3) at process.processImmediate (node:internal/timers:442:9)

2023-01-07 16:45:59: webpack compiled

C:\Users\antho\Documents\Development\MouseTooltipTranslator>dir /ad Volume in drive C is Windows Volume Serial Number is 707C-16DC

Directory of C:\Users\antho\Documents\Development\MouseTooltipTranslator

01/07/2023 04:41 PM <DIR> . 01/07/2023 04:41 PM <DIR> .. 01/05/2023 11:08 PM <DIR> .git 01/05/2023 11:08 PM <DIR> config 01/05/2023 11:08 PM <DIR> doc 01/07/2023 04:42 PM <DIR> node_modules 01/05/2023 11:08 PM <DIR> public 01/05/2023 11:08 PM <DIR> src 0 File(s) 0 bytes 8 Dir(s) 218,322,259,968 bytes free

C:\Users\antho\Documents\Development\MouseTooltipTranslator>

[ttop32]

I changed package dependency for new node js try git clone again to follow step again npm install npm run watch (for developing) or npm run build (for deploy)

I use node js beacuase of importing other user script (ex vue)

[anthony-nyc]

This time, after cloning it again, npm install returned errors as below.

C:\Users\antho\Documents\Development>cd MouseTooltipTranslator

C:\Users\antho\Documents\Development\MouseTooltipTranslator>npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vespaiach/[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/axios npm ERR! axios@"^0.21.4" from the root project npm ERR! axios@"^0.21.4" from [email protected] npm ERR! node_modules/nodepapago npm ERR! nodepapago@"^3.1.1" from the root project npm ERR! 1 more (size-plugin) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer axios@">=0.26.0" from @vespaiach/[email protected] npm ERR! node_modules/@vespaiach/axios-fetch-adapter npm ERR! @vespaiach/axios-fetch-adapter@"^0.3.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/axios npm ERR! peer axios@">=0.26.0" from @vespaiach/[email protected] npm ERR! node_modules/@vespaiach/axios-fetch-adapter npm ERR! @vespaiach/axios-fetch-adapter@"^0.3.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\antho\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\antho\AppData\Local\npm-cache_logs\2023-01-08T01_32_12_714Z-debug-0.log

C:\Users\antho\Documents\Development\MouseTooltipTranslator>node --version v18.13.0

C:\Users\antho\Documents\Development\MouseTooltipTranslator>

[anthony-nyc]

C:\Users\antho\Documents\Development\MouseTooltipTranslator>npm run build

[email protected] build webpack --mode=production --config config/webpack.config.js

'webpack' is not recognized as an internal or external command, operable program or batch file.

C:\Users\antho\Documents\Development\MouseTooltipTranslator>

[ttop32]

Sry, I messed up I update git repo again. Can you try again?

[anthony-nyc]

npm run build works fine and "load unpacked" worked too. But "Error" button came up. It should have only two buttons - Details and Remove but it has three buttons. I clicked "service worker" link below in bold and see the error message "Unchecked runtime.lastError: Cannot create item with duplicate id save" in DevTool window.

Mouse Tooltip Translator 0.1.59 Mouse Tooltip Translator translate mouseover text using google translate ID: fjkcfohldelppdmmmgoiplbbfimpnbih Inspect views service worker

C:\Users\antho\Documents\Development\MouseTooltipTranslator>npm run build

[email protected] build webpack --mode=production --config config/webpack.config.js

production

                background.js ⏤  239 kB (+5.46 kB)
             contentScript.js ⏤  47.6 kB
                    popup.css ⏤  568 kB
                   popup.html ⏤  315 B
                     popup.js ⏤  212 kB
      bootstrapcustom.min.css ⏤  26.7 kB
           pdfjs/build/pdf.js ⏤  58.9 kB
    pdfjs/build/pdf.worker.js ⏤  229 kB
        pdfjs/web/debugger.js ⏤  3.05 kB
         pdfjs/web/viewer.css ⏤  10.5 kB
        pdfjs/web/viewer.html ⏤  4.3 kB
          pdfjs/web/viewer.js ⏤  56.8 kB
                 pdfInject.js ⏤  635 B
      tesseract/worker.min.js ⏤  40 kB
                     ocr.html ⏤  108 B
                       ocr.js ⏤  8.11 kB
   pdfjs/build/pdf.sandbox.js ⏤  263 kB

tesseract/tesseract-core.wasm.js ⏤ 1.8 MB selection.js ⏤ 0 B setting.js ⏤ 0 B

2023-01-07 21:34:06: webpack compiled

C:\Users\antho\Documents\Development\MouseTooltipTranslator>dir /ad

[ttop32]

Thank you for error report I fixed the problem https://github.com/ttop32/MouseTooltipTranslator/commit/9f129cbc22fcdf351dc7d24bce84611655f28952

[anthony-nyc]

Thanks for the quick response. Successfully loaded and confirmed it works.

Thank you so much!

[anthony-nyc]

Reporting an error:

TypeError: Cannot read properties of undefined (reading 'useTooltip') Context popup.html Stack Trace popup.js:2 (Xt) popup.js:2 (Ut) popup.js:2 (Yt) popup.js:2 (t._render) popup.js:2 (i) popup.js:2 (yn.get) popup.js:2 (yn) popup.js:2 (anonymous function) popup.js:2 (An.$mount) popup.js:2 (An.$mount) popup.js:2 (init) popup.js:2 (anonymous function) popup.js:2 (d) popup.js:2 (Gr.nodeOps) popup.js:2 (t._update) popup.js:2 (i) popup.js:2 (yn.get) popup.js:2 (yn) popup.js:2 (anonymous function) popup.js:2 (An.$mount) popup.js:2 (An.$mount) popup.js:2 (t._init) popup.js:2 (An) popup.js:2 (anonymous function) popup.js:2 (anonymous function) popup.js:2 (anonymous function) 1 2 3 /*! For license information please see popup.js.LICENSE.txt */

[ttop32]

Thanks https://github.com/ttop32/MouseTooltipTranslator/commit/4cb51391f51f3cc9fb90da1232e322878883c824