Chrome says my content script isn't UTF-8

Question

Receiving the error Could not load file 'worker.js' for content script. It isn't UTF-8 encoded.

> file -I chrome/worker.js
chrome/worker.js: text/plain; charset=utf-8

With to-utf8-unix

> to-utf8-unix chrome/worker.js                                      
chrome/worker.js
----------------
Detected charset:
UTF-8
Confidence of charset detection:
100
Result:
Conversion not needed.
----------------

I also tried converting the file with Sublime Text back and forth without any luck.

manifest:

  "content_scripts": [{
      "matches": ["http://foo.com/*"],
      "js": ["worker.js"]
  }],

The file in question: https://www.dropbox.com/s/kcv23ooh06wlxg3/worker.js?dl=1

It is a compiled javascript file spit out from clojurescript with cljsbuild:

               {:id "chrome-worker"
                :source-paths ["src/chrome/worker"],
                :compiler {:output-to "chrome/worker.js",
                           :optimizations :simple,
                           :pretty-print false}}
               ]}

Other files (options page, background) are compiled the same way and don't generate this error. I tried getting rid of weird characters like Emojis but that didn't fix the problem.

Your js file is very large and contains too much unformatted js code. Try to clean it up. — Aefits, Apr 23 '18 at 11:10
Might be a bug in this version of Chrome. Try Chrome Canary or an older portable Chrome. — wOxxOm, Apr 23 '18 at 11:20
@elegant-user it doesn't matter if code is minified. Pretty printed has the same problem — patchrail, Apr 23 '18 at 12:59

score 8 · Answer 1 · answered Apr 23 '18 at 13:30

It turns out this is a problem within the google closure compiler that clojurescript uses to generate javascript - https://github.com/google/closure-compiler/issues/1704

A workaround is to set compilation to "US-ASCII"

:closure-output-charset "US-ASCII"

Thanks a to to pesterhazy from the clojurians slack for helping with this!

score 8 · Answer 2 · answered Oct 23 '19 at 18:19

8

In case you are using Webpack you can solve it by replacing the default minifier Uglify with Terser, which won´t produce those encoding issues.

in your webpack.conf.js add

const TerserPlugin = require('terser-webpack-plugin');

// add this into your config object
optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 6,
          output: { 
             ascii_only: true 
          },
        },
      }),
    ],
  },

answered Oct 23 '19 at 18:19

Marian Klühspies

15,824
16
93
136

1

Using this throws an error while building as - Failed to compile. Cannot read properties of undefined (reading 'javascript') – Rohan Keskar18 Nov 30 '21 at 05:55
This worked for me. But I don't know why. Why does Ugliy produce encoding issues? – clamentjohn Nov 08 '22 at 02:47

score 2 · Answer 3 · answered Jul 30 '21 at 22:51

2

In case anyone has this issue with Parcel, just add a .terserrc file with this content.

{
 "ecma": 6,
 "output": {
   "ascii_only": true
  }
}

This is an adaptation of @marian-klühspies response https://stackoverflow.com/a/58528858/2920671

answered Jul 30 '21 at 22:51

marcomow

324
2
12

score 1 · Answer 4 · answered Mar 02 '21 at 14:19

Had this error get thrown after editing working source code in WordPad. When I saved the file in WordPad, the encoding was lost. To fix it, open the same file in NotePad, Save as, and specify "UTF-8" in the Encoding drop down menu next to the save button.

Chrome says my content script isn't UTF-8

4 Answers4

Linked