将Polymer 1 WebApp打包为Chrome扩展：内联JS转外部文件自动方案问询

我之前帮团队处理过Polymer 1转Chrome扩展的需求，刚好踩过这个坑！Chrome扩展的内容安全策略（CSP）严格禁止内联JavaScript，要把Polymer组件里的内联<script>自动提取到单独文件并替换引用，确实有现成的自动化工具可以搞定，下面给你推荐两个最实用的方案：

方案一：Webpack 自动化处理（推荐） #

Webpack配合几个loader就能完美实现批量提取内联脚本的需求，步骤如下：

1. 安装依赖
   首先安装所需的Webpack loader：

npm install --save-dev webpack html-loader extract-loader file-loader

2. 配置Webpack
   在项目根目录创建webpack.config.js，配置规则来处理HTML文件中的内联脚本：

module.exports = {
  entry: './src/**/*.html', // 匹配所有Polymer组件HTML文件
  output: {
    filename: '[name].js',
    path: __dirname + '/dist' // 输出目录，可根据需求修改
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          // 输出处理后的HTML文件
          {
            loader: 'file-loader',
            options: { name: '[name].html' }
          },
          'extract-loader',
          // 处理HTML中的内联脚本并提取为单独JS文件
          {
            loader: 'html-loader',
            options: {
              attrs: ['script:src'],
              minimize: false, // 禁用压缩，避免破坏Polymer的dom-module结构
              scriptLoader: 'file-loader?name=[name]-script.js' // 提取的JS文件名规则
            }
          }
        ]
      }
    ]
  }
};

3. 执行打包
   在package.json的scripts中添加打包命令：

"scripts": {
  "build": "webpack --mode production"
}

然后运行npm run build，所有组件的内联脚本都会被提取到单独的JS文件，原HTML中的<script>标签会自动替换为指向该JS文件的引用。

方案二：Gulp 批量处理 #

如果你的项目更倾向于用Gulp做构建，也可以用专门的插件实现：

1. 安装依赖

npm install --save-dev gulp gulp-split

2. 配置Gulp任务
   创建gulpfile.js：

const gulp = require('gulp');
const split = require('gulp-split');

gulp.task('extract-scripts', () => {
  return gulp.src('./src/*.html')
    .pipe(split({
      dest: 'scripts', // 提取的JS文件存放目录
      filename: (file) => `${file.stem}-script.js` // 生成的JS文件名规则
    }))
    .pipe(gulp.dest('./dist')); // 处理后的HTML输出目录
});

3. 执行任务
   运行gulp extract-scripts即可完成批量提取和替换。

效果验证 #

拿你提供的example-view.html为例，处理后会生成两个文件：

处理后的example-view.html：

<dom-module id="editable-name-tag">
  <template>
    <p>This is <strong>{{owner}}</strong>'s editable-name-tag.</p>
    <input is="iron-input" bind-value="{{owner}}" placeholder="Your name here...">
  </template>
  <script src="example-view-script.js"></script>
</dom-module>

对应的example-view-script.js：

Polymer({
  is: "editable-name-tag",
  properties: {
    owner: {
      type: String,
      value: "Daniel"
    }
  }
});

注意事项 #

• 确保提取后的JS文件路径在Chrome扩展的manifest.json中被正确声明（比如添加到web_accessible_resources，或者确保它们在扩展包的根目录/指定目录下）。
• 对于Polymer 1组件，提取后的JS文件无需额外修改，直接保留原Polymer({...})代码即可正常运行。

内容的提问来源于stack exchange，提问作者Axifive