当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

webpack-webextension-plugin

授权协议 View license

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者胥诚

操作系统跨平台

开源组织无

适用人群未知

软件概览

Webpack WebExtension Plugin

Webpack plugin that compiles web-extension manifest.json files and adds smart auto reload.

What does it do?

Autoreload extensions via websockets
Use vendor prefixes in manifest properties
Validates some manifest.json fields

Install

$ npm i webpack-webextension-plugin

Usage

const WebextensionPlugin = require('webpack-webextension-plugin')

const config = {
  plugins: [
    new WebextensionPlugin({
      vendor: 'chrome'
    })
  ]
}

API

new WebextensionPlugin([options])

Add result to webpack plugins to initialize.

options

Type: Object

Any of the options below.

vendor

Type: String
Default: chrome
Any of: chrome, opera, firefox, edge, safari

Used for vendor prefixing in the manifest.json. More infos regarding this can be found below.

port

Type: Integer
Default: 35729

Specify the listening port for the webstocket development server.

autoreload

Type: Boolean
Default: true

Enables auto reload. If not specified will be enabled when using webpacks watch mode.

quiet

Type: Boolean
Default: false

Disable plugin logging.

reconnectTime

Type: Integer
Default: 3000

Specify the reconnect time to the development server from the extension side.

manifestDefaults

Type: Object
Default: {}

Allows you to define defaults for the manifest.json file.

FAQ

How does smart autoreload work?

We create/extend a background page in the extension with a websockets client, that connects to our custom websocket server.As soon as a specific files changes the client checks how to reload the extension:

if manifest.json change → full reload
if manifest.json dependencies change → full reload
if _locales change → full reload
else reload current tab & all extension views

What are vendor prefixed manifest keys?

Vendor prefixed manifest keys allow you to write one manifest.json for multible vendors.

{
  "__chrome__name": "SuperChrome",
  "__firefox__name": "SuperFox",
  "__edge__name": "SuperEdge",
  "__opera__name": "SuperOpera",
  "__safari__name": "SuperSafari"
}

if the vendor is chrome this compiles to:

{
  "name": "SuperChrome",
}

Add keys to multiple vendors by seperating them with | in the prefix

{
  __chrome|opera__name: "SuperBlink"
}

if the vendor is chrome or opera, this compiles to:

{
  "name": "SuperBlink"
}

Why are you not using mozillas web-ext package?

webpack-webextension-plugin should work for every browser in the same way.
web-ext only works with Chrome and Firefox. You should definitely still check it out.

License

This project is free software released under the MIT license.

使用案例

html-webpack-plugin如何配置

html-webpack-plugin插件的作用是让我们打开http://localhost:8080/地址时直接跳转到index.html 因为正常情况下我们打开http://localhost:8080/ 时浏览器会跳转到项目根目录 html-webpack-plugin 的配置如下 1.下载完插件后在配置文件 webppack.config.js 里用require导入并创建一个构造函数(其
friendly-errors-webpack-plugin webpack插件

http://npm.taobao.org/package/friendly-errors-webpack-plugin 能够更好在终端看到webapck运行的警告和错误
webpack4 之html-webpack-plugin

plugin是什么 plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。 plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。举个栗子 const HtmlWebpackPlugin = require('html-webpack-plu
webpack 插件（webpack-dev-server 和 html-webpack-plugin）

webpack插件拓补 webpack 的能力。主要插件有： webpack-dev-server 修改源代码的时候，webpack 会自动进行项目的打包和构建 html-webpack-plugin HTML 插件（类似模块引擎插件）自定义 index.html 页面的内容 webpack-dev-server 安装 npm install webpack-dev-server@3.11.
webpack--插件

一、插件的运行环境 1、插件没有像 loader 那样的独立运行环境（loader-runner） 2、只能在 webpack 里面运行二、插件的基本结构 //插件名称 class MyPlugin { // 插件上的 apply 方法 apply(compiler) { // 插件的 hooks compiler.hooks.done.tap( " My
webpack配置html-webpack-plugin

配置html-webpack-plugin生成预览页面 ① 运行 npm i html-webpack-plugin -D安装生成预览页面的插件 ② 修改webpack.config.json 文件头部区域如下： const path = require('path') const html_webpack_plugin = require('html-webpack-plugin') const
html-webpack-plugin 与 webpack-manifest-plugin 干什么用的

1. html-webpack-plugin 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口 2. webpack-manifest-plugin 生成一个manifest.json
webpack terser-webpack-plugin版本

webpack4中用到terser-webpack-plugin压缩插件，不能使用最新的版本，而是terser-webpack-plugin@4.x版本