Vite Terser and rollup-plugin-obfuscator Error: Cannot create property 'content_scripts'

[emircanerkul]

Build tool

Vite

Where do you see the problem?

• [ ] In the browser
• [X] In the terminal

Describe the bug

I can't run obfuscator with crxjs. Gives an error while trying to obfuscate content_scripts

[crx:manifest-post] Cannot create property 'content_scripts' on number '391'

Reproduction

{ "javascript-obfuscator": "^4.0.0", "rollup-plugin-obfuscator": "^0.2.2", "terser": "^5.15.0", }

import obfuscator from 'rollup-plugin-obfuscator';

export  default defineConfig(({ command, mode, ssrBuild }) => {
  if (mode == 'production') {
    return {
      plugins: [
        solidPlugin(),
        crx({ manifest }),
      ],
      build: {
        rollupOptions: {
          output: {
            plugins: [ // <-- use plugins inside output to not merge chunks on one file
              obfuscator({
                fileOptions: {
                  // options
                }
              })
            ]
          }
        },
        terserOptions: {
          compress: {
            defaults: false,
          }
        },
        minify: 'terser',
        target: 'esnext',
      }
    };
  }

Logs

> vite build

vite v3.1.0 building for production...
✓ 14 modules transformed.
The "transform" hook used by the output plugin rollup-plugin-obfuscator is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
The "transform" hook used by the output plugin rollup-plugin-obfuscator is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
[crx:manifest-post] Cannot create property 'content_scripts' on number '391'
error during build:
TypeError: Cannot create property 'content_scripts' on number '391'
    at Object.generateBundle (/Users/erkul/Projects/practice-vocabulary/node_modules/@crxjs/vite-plugin/dist/index.cjs:2948:35)
    at file:///Users/erkul/Projects/practice-vocabulary/node_modules/rollup/dist/es/shared/rollup.js:22710:40

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 140.09 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 15.6.1
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14 
    vite: ^3.1.0 => 3.1.0

Severity

blocking an upgrade

[jacksteamdev]

@emircanerkul Unfortunately, obfuscation is a policy violation in the Chrome Web Store. 😬 They will reject/take down extensions that use it.

Minification is allowed 👍 and Vite includes this by default.

[emircanerkul]

Whaaat 😄 @jacksteamdev So how do others protect their front-end client code? I'm developing some tools but entirely client-side. JS handles all functionality I do not need 3rd API to make my extension work and depend on it.

It's the source code of the google translate extension:

I think It's also seems enough but not sure.. They can easily bypass and hack the extension and licensing mechanism.

Any suggestion?

[filipw01]

Hey @emircanerkul

A general thing about obfuscation is that it is not a way to secure anything, it can make things harder to fuss with but not secure it

So how do others protect their front-end client code?

Protect what exactly and from who? Depending on the answer it means that you either need a server or no obfuscation required

They can easily bypass and hack the extension and licensing mechanism.

Do you mean that users of the extension can set something like hasProLicence = true and circumvent your licensing mechanism? I think chrome store already has something for licensing, but I haven't used it so I'm not sure https://developer.chrome.com/docs/webstore/webstore_api/licenses/

As Jack mentioned, you can't publish an extension with obfuscated code so that's a no go. Google does that to limit the amount of malicious code in their store. The example that you sent seems to be just minified which is allowed

[emircanerkul]

Thank you for the link @filipw01 I'll check if it's just a license management tool (because I already had one) or something that has a feature to make source code hidden (IDK how would be possible because after the one-time purchase they must share code again) might be there is a feature inside chrome that works like PHP ioncube (binary level) and with some kind cryptological security. (I don't think so 😃 but I'm searching)

Yes, I just planned to use obfuscation to make my extension as much as possible to make it difficult to override licensing & duplicating, and resharing problems by any other bad guys. Unfortunately, the only option to make secure (uncopiable) seems for these kinds of saas apps is using third-party backend functionality. But I also want to make an offline app which it's not possible.

I really want lots of things 😄

[emircanerkul]

I'm closing this issue because there is not much outcome while considering chrome store-centric extension development.