Browse Source

init web extension w/ kocal/vue-web-extension

tags/0.1.0
Sam 6 months ago
parent
commit
b03d8884ca

+ 14
- 0
.babelrc View File

@@ -0,0 +1,14 @@
{
"plugins": [
"@babel/plugin-proposal-optional-chaining"
],
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers": ["> 0.25%", "not ie 11", "not op_mini all"]
}
}]
]
}

+ 32
- 0
.eslintrc.js View File

@@ -0,0 +1,32 @@
// https://eslint.org/docs/user-guide/configuring
// File taken from https://github.com/vuejs-templates/webpack/blob/1.3.1/template/.eslintrc.js, thanks.

module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
},
env: {
browser: true,
webextensions: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard',
// https://prettier.io/docs/en/index.html
'plugin:prettier/recommended',
],
// required to lint *.vue files
plugins: ['vue'],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
}

+ 5
- 0
.gitignore View File

@@ -0,0 +1,5 @@
/.idea
/node_modules
/*.log
/dist
/dist-zip

+ 9
- 0
.prettierrc View File

@@ -0,0 +1,9 @@
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true
}

+ 66
- 0
package.json View File

@@ -0,0 +1,66 @@
{
"name": "rdltr-extension",
"version": "0.1.0",
"description": "rdltr web extension",
"engines": {
"node": ">=10"
},
"scripts": {
"lint": "eslint --ext .js,.vue src",
"prettier": "prettier \"src/**/*.{js,vue}\"",
"prettier:write": "npm run prettier -- --write",
"build": "cross-env NODE_ENV=production webpack --hide-modules",
"build:dev": "cross-env NODE_ENV=development webpack --hide-modules",
"build-zip": "node scripts/build-zip.js",
"watch": "npm run build -- --watch",
"watch:dev": "cross-env HMR=true npm run build:dev -- --watch"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"dependencies": {
"axios": "^0.19.0",
"vue": "^2.6.10",
"webextension-polyfill": "^0.3.1"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/runtime-corejs3": "^7.4.0",
"archiver": "^3.0.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.2",
"copy-webpack-plugin": "^5.1.1",
"core-js": "^3.0.1",
"cross-env": "^5.2.0",
"css-loader": "^3.4.0",
"ejs": "^2.6.1",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.0.1",
"file-loader": "^5.0.2",
"husky": "^2.4.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.9.3",
"prettier": "^1.17.1",
"pretty-quick": "^1.8.0",
"sass-loader": "^7.1.0",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.6.10",
"web-ext-types": "^2.1.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.3.10",
"webpack-extension-reloader": "^1.1.0"
}
}

+ 53
- 0
scripts/build-zip.js View File

@@ -0,0 +1,53 @@
#!/usr/bin/env node

const fs = require('fs')
const path = require('path')
const archiver = require('archiver')

const DEST_DIR = path.join(__dirname, '../dist')
const DEST_ZIP_DIR = path.join(__dirname, '../dist-zip')

const extractExtensionData = () => {
const extPackageJson = require('../package.json')

return {
name: extPackageJson.name,
version: extPackageJson.version,
}
}

const makeDestZipDirIfNotExists = () => {
if (!fs.existsSync(DEST_ZIP_DIR)) {
fs.mkdirSync(DEST_ZIP_DIR)
}
}

const buildZip = (src, dist, zipFilename) => {
console.info(`Building ${zipFilename}...`)

const archive = archiver('zip', { zlib: { level: 9 } })
const stream = fs.createWriteStream(path.join(dist, zipFilename))

return new Promise((resolve, reject) => {
archive
.directory(src, false)
.on('error', err => reject(err))
.pipe(stream)

stream.on('close', () => resolve())
archive.finalize()
})
}

const main = () => {
const { name, version } = extractExtensionData()
const zipFilename = `${name}-v${version}.zip`

makeDestZipDirIfNotExists()

buildZip(DEST_DIR, DEST_ZIP_DIR, zipFilename)
.then(() => console.info('OK'))
.catch(console.err)
}

main()

+ 2
- 0
src/background.js View File

@@ -0,0 +1,2 @@
global.browser = require('webextension-polyfill')
alert('Hello world!')

BIN
src/icons/icon.xcf View File


BIN
src/icons/icon_128.png View File


BIN
src/icons/icon_48.png View File


+ 21
- 0
src/manifest.json View File

@@ -0,0 +1,21 @@
{
"name": "rdltr-extension",
"description": "rdltr web extension",
"version": "0.1.0",
"manifest_version": 2,
"icons": {
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"browser_action": {
"default_title": "rdltr-extension",
"default_popup": "popup/popup.html"
},
"background": {
"scripts": ["background.js"]
},
"options_ui": {
"page": "options/options.html",
"chrome_style": true
}
}

+ 17
- 0
src/options/App.vue View File

@@ -0,0 +1,17 @@
<template>
<div>
<p>Hello world!</p>
</div>
</template>

<script>
export default {
name: 'App',
}
</script>

<style scoped>
p {
font-size: 20px;
}
</style>

+ 15
- 0
src/options/options.html View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>rdltr-extension - Options</title>
<link rel="stylesheet" href="options.css" />
<% if (NODE_ENV === 'development') { %>
<!-- Load some resources only in development environment -->
<% } %>
</head>
<body>
<div id="app"></div>
<script src="options.js"></script>
</body>
</html>

+ 10
- 0
src/options/options.js View File

@@ -0,0 +1,10 @@
import Vue from 'vue'
import App from './App'

global.browser = require('webextension-polyfill')

/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App),
})

+ 19
- 0
src/popup/App.vue View File

@@ -0,0 +1,19 @@
<template>
<div>
<p>Hello world!</p>
</div>
</template>

<script>
export default {
data() {
return {}
},
}
</script>

<style lang="scss" scoped>
p {
font-size: 20px;
}
</style>

+ 15
- 0
src/popup/popup.html View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="popup.css" />
<% if (NODE_ENV === 'development') { %>
<!-- Load some resources only in development environment -->
<% } %>
</head>
<body>
<div id="app"></div>
<script src="popup.js"></script>
</body>
</html>

+ 12
- 0
src/popup/popup.js View File

@@ -0,0 +1,12 @@
import Vue from 'vue'
import App from './App'

global.browser = require('webextension-polyfill')
Vue.prototype.$browser = global.browser

/* eslint-disable no-new */
new Vue({
el: '#app',

render: h => h(App),
})

+ 135
- 0
webpack.config.js View File

@@ -0,0 +1,135 @@
const path = require('path')
const webpack = require('webpack')
const ejs = require('ejs')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const ExtensionReloader = require('webpack-extension-reloader')
const { VueLoaderPlugin } = require('vue-loader')
const { version } = require('./package.json')

const config = {
mode: process.env.NODE_ENV,
context: path.join(__dirname, 'src'),
entry: {
background: './background.js',
'popup/popup': './popup/popup.js',
'options/options': './options/options.js',
},
output: {
path: __dirname + '/dist',
filename: '[name].js',
},
resolve: {
extensions: ['.js', '.vue'],
},
module: {
rules: [
{
test: /\.vue$/,
loaders: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.sass$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader?indentedSyntax',
],
},
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/images/',
emitFile: false,
},
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/fonts/',
emitFile: false,
},
},
],
},
plugins: [
new webpack.DefinePlugin({
global: 'window',
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new CopyPlugin([
{ from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
{
from: 'popup/popup.html',
to: 'popup/popup.html',
transform: transformHtml,
},
{
from: 'options/options.html',
to: 'options/options.html',
transform: transformHtml,
},
{
from: 'manifest.json',
to: 'manifest.json',
transform: content => {
const jsonContent = JSON.parse(content)
jsonContent.version = version

if (config.mode === 'development') {
jsonContent['content_security_policy'] =
"script-src 'self' 'unsafe-eval'; object-src 'self'"
}

return JSON.stringify(jsonContent, null, 2)
},
},
]),
],
}

if (config.mode === 'production') {
config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
])
}

if (process.env.HMR === 'true') {
config.plugins = (config.plugins || []).concat([
new ExtensionReloader({
manifest: __dirname + '/src/manifest.json',
}),
])
}

function transformHtml(content) {
return ejs.render(content.toString(), {
...process.env,
})
}

module.exports = config

+ 6329
- 0
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save