Chrome 说我的内容脚本不是 UTF-8

Question

收到错误 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

使用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.
----------------

我还尝试使用 Sublime Text 来回转换文件，但没有任何运气。

显现：

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

有问题的文件：https : //www.dropbox.com/s/kcv23ooh06wlxg3/worker.js?dl=1

它是从 clojurescript 中使用 cljsbuild 生成的编译后的 javascript 文件：

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

其他文件（选项页面、背景）以相同方式编译，不会产生此错误。我试图摆脱像表情符号这样的奇怪字符，但这并没有解决问题。

Answer 1

事实证明，这是 clojurescript 用于生成 javascript 的 google 闭包编译器中的一个问题 - https://github.com/google/closure-compiler/issues/1704

解决方法是将编译设置为“US-ASCII”

:closure-output-charset "US-ASCII"

感谢来自 clojurians slack 的pesterhazy 帮助解决这个问题！

Answer 2

如果你正在使用的WebPack您可以通过更换默认minifier解决它丑化与更简洁，它不需额外产生的编码问题。

在你的webpack.conf.js添加

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 
          },
        },
      }),
    ],
  },