npm 包 webpack-webextension-runtime-plugin 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用 webpack 进行打包处理，而 webpack-webextension-runtime-plugin 则是一个特定于浏览器扩展开发的 webpack 插件。它可以在 webpack 打包时，根据浏览器扩展的要求，生成适合浏览器扩展开发的代码。本文将介绍这个 npm 包如何在前端开发中使用，并提供详细的学习和指导意义。

什么是 webpack-webextension-runtime-plugin

webpack-webextension-runtime-plugin 是一个 webpack 插件，用于简化浏览器扩展开发的打包工作。该插件集成了 Webextensions API，并按照浏览器扩展的要求生成代码。

Webextensions API 是谷歌浏览器、火狐浏览器、Edge 浏览器等浏览器共用的扩展 API，因此我们能够使用该插件生成适合多种浏览器的扩展代码。

安装 webpack-webextension-runtime-plugin

在使用 webpack-webextension-runtime-plugin 之前，需要先安装 webpack 和 webpack-cli，然后执行以下命令来安装 webpack-webextension-runtime-plugin：

npm install --save-dev webpack-webextension-runtime-plugin

使用 webpack-webextension-runtime-plugin

为了正确使用 webpack-webextension-runtime-plugin，我们需要创建一个名为 webextension 的对象，它包含了以下属性：

name：浏览器扩展的名称；
version：浏览器扩展的版本号；
background：后台页面的入口文件；
content_scripts：内容脚本的数组；
browser_action：浏览器图标点击时的回调函数；
options_page：选项页面的入口文件；
permissions：扩展需要的权限。

以下是一个 webextension 对象的示例：

const path = require('path');

const webextension = {
  name: 'My Extension',
  version: '1.0.0',
  background: {
    pages: [
      {
        name: 'background',
        entry: path.resolve(__dirname, './src/background.js')
      }
    ]
  },
  content_scripts: [
    {
      name: 'content',
      matches: ['<all_urls>'],
      entry: path.resolve(__dirname, './src/content.js')
    }
  ],
  browser_action: {
    default_popup: path.resolve(__dirname, './src/popup.html')
  },
  options_page: path.resolve(__dirname, './src/options.html'),
  permissions: ['activeTab']
};

接下来，在 webpack 配置文件中引入依赖，并在插件列表中添加 webpack-webextension-runtime-plugin：

const path = require('path');
const WebExtensionPlugin = require('webpack-webextension-runtime-plugin');

const webextension = {
  // ...
};

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new WebExtensionPlugin({ webextension })
  ]
};

多语言支持

对于需要支持多语言的扩展，需要在 webextension 对象中添加 i18n 属性。例如：

const webextension = {
  // ...
  i18n: {
    locales: ['en', 'ko'],
    defaultLocale: 'en',
    messages: {
      en: {
        hello: 'Hello, world!'
      },
      ko: {
        hello: '안녕하세요, 세계!'
      }
    }
  }
};

创建一个名为 _locales 的文件夹，然后创建多语言文件后缀为 .json，例如：en.json 和 ko.json，将翻译内容添加到相关文件中：

// en.json
{
  "hello": "Hello, world!"
}

// ko.json
{
  "hello": "안녕하세요, 세계!"
}

在脚本中使用 chrome.i18n.getMessage 方法获取多语言文本。例如：

console.log(chrome.i18n.getMessage('hello'));

使用 Manifest 清单

如果希望根据 Manifest 清单文件（manifest.json）生成 webextension 对象，可以使用 WebExtensionManifest 插件。需要首先安装 webpack-webextension-manifest-plugin：

npm install --save-dev webpack-webextension-manifest-plugin

接下来，在 webpack 配置文件中引入插件：

const WebExtensionManifest = require('webpack-webextension-manifest-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new WebExtensionManifest({
      config: {
        manifestPath: path.resolve(__dirname, './manifest.json')
      }
    }),
    new WebExtensionPlugin({
      // 生成的 webextension 对象
    })
  ]
};

通过这种方式，可以从 manifest.json 中生成 webextension 对象，并使用该对象作为 webpack-webextension-runtime-plugin 的入参。

实例代码

以下是一个完整的 webpack 配置文件示例：

const path = require('path');
const WebExtensionPlugin = require('webpack-webextension-runtime-plugin');
const WebExtensionManifestPlugin = require('webpack-webextension-manifest-plugin');

const webextension = {
  name: 'My Extension',
  version: '1.0.0',
  background: {
    pages: [
      {
        name: 'background',
        entry: path.resolve(__dirname, './src/background.js')
      }
    ]
  },
  content_scripts: [
    {
      name: 'content',
      matches: ['<all_urls>'],
      entry: path.resolve(__dirname, './src/content.js')
    }
  ],
  browser_action: {
    default_popup: path.resolve(__dirname, './src/popup.html')
  },
  options_page: path.resolve(__dirname, './src/options.html'),
  permissions: ['activeTab'],
  i18n: {
    locales: ['en', 'ko'],
    defaultLocale: 'en',
    messages: {
      en: {
        hello: 'Hello, world!'
      },
      ko: {
        hello: '안녕하세요, 세계!'
      }
    }
  }
};

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new WebExtensionManifestPlugin({
      config: {
        manifestPath: path.resolve(__dirname, './manifest.json')
      }
    }),
    new WebExtensionPlugin({ webextension })
  ]
};

总结

webpack-webextension-runtime-plugin 简化了浏览器扩展开发的环境配置和打包工作。在本文中，我们学习了如何使用 webpack-webextension-runtime-plugin 生成浏览器扩展所需的代码，并详细地了解了如何集成多语言支持和使用 Manifest 清单文件。希望这篇文章能够对您的浏览器扩展开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53bdc