search

adambullmer / vue-cli-plugin-browser-extension

Browser extension development plugin for vue-cli 3.0
GNU Lesser General Public License v3.0
427 stars 76 forks source link

Got a Uncaught EvalError: when using the production build of my extension #100

Closed bosaengineering closed 4 years ago

bosaengineering commented 4 years ago

Describe the bug using Kocal/vue-web-extension

After building the production version of my extension, I attempted to load it unpacked. When I do this, I get the following error:

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

It points to the following lines in the code:

File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 61 col 13631 in [anonymous] File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 61 col 13928 in Object.a40a File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1 col 110 in n File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1264 col 2266 in Module. File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1264 col 7114 in Module.fe77 File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1 col 110 in n File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1 col 3194 in Object.1 File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1 col 110 in n File chrome-extension://lkpjgcmldikmmafidjhfbiagckdjbfij/js/background.js line 1 col 908 in [anonymous]

When I load the development code (created by npm serve) I do not get this error.

I have a suspicion that it could be related to using Vue in development vs production Vue but I can't confirm.

To Reproduce

  1. build code with npm build
  2. unzip production code and load as unpacked on chrome://extensions
  3. unpacked extension should load with the Eval error
  4. For access to the UI, open a google doc. Content script should inject and UI should appear.
  5. Click on "Sign up with Google" button. Note that it does not work due to eval error.

Expected behavior

  1. build code with npm build
  2. unzip production code and load as unpacked on chrome://extensions
  3. unpacked extension should load without Eval error
  4. For access to the UI, open a google doc. Content script should inject and UI should appear.
  5. Click on "Sign up with Google" button. The Oauth2 sign up should appear.

Screenshots

Screen Shot 2020-10-14 at 11 52 28 AM

Reproducible Example If possible, add a link to a repository/branch where the issue is currently happening.

Name Version
vue-cli-plugin-browser-extension latest
Operating System macOS 10.13.6
Node 12.18.3
NPM/Yarn 6.14.6
vue-cli -
vue-cli-service ~4.5.0
browser Chrome version 86.0.4240.80

Additional context

adambullmer commented 4 years ago

This appears to be because one of your dependencies uses eval which, in a production extension isn't allowed. https://github.com/s-yadav/jsonQ/blob/master/jsonQ.js#L893

bosaengineering commented 4 years ago

@adambullmer ah makes sense. Thank you so much. I was able to replace that with a custom function.