use vue plugin easy create chrome extension template

Home Page: https://www.npmjs.com/package/vue-cli-plugin-chrome-extension-cli

License: MIT License

JavaScript 90.56% Vue 9.44%

vue vuecli plugin chrome-extension vue3 vue2 typescript javascript template browser-extension

vue-cli-plugin-chrome-extension-cli's Introduction

vue-cli-plugin-chrome-extension-cli

English | 简体中文 | 繁體中文

Start a chrome extension project with Vue-CLI with ease!

support vue2 vue3 TypeScript and JavaScript!

Requirements

vue-cli 5.0.1 or higher

Installation

This plugin is meant for using new project for chrome extensions. Tested on default project of Vue, Vue with TypeScript

Usage?

vue create <project-name>
# Answer some questions
cd <project-name>
vue add chrome-extension-cli
# Answer some questions
# 🎉

File folder

.
├── public
│   ├──  can set image.
├── src/
│   ├── assets
│   │   └── Static assets
│   ├── entry
│   │   ├── options.js
│   │   ├── popup.js
|   |   ├── devtools.js
│   │   ├── content.js
│   │   └── background.js
│   └── view
│   │   ├── popup.vue
│   │   ├── options.vue
|   |   └── devtools.vue
│   ├── manifest.development.json
│   └── manifest.production.json
└── vue.config.js

Run Development mode and Production

Run development mode with npm run build-watch and a dist file will be generated. Install Extension Reloader to reload chrome extensions easily everytime you reload. (take note that when u change manifest.json file, it will not automatically load, you need to click update extension )
Build for production npm run build and zip it and deploy onto chrome store.

prompts.js

Vue CLI prompt is based on inquirer.js api.

Credit

License

MIT

vue-cli-plugin-chrome-extension-cli's People

Contributors

Stargazers

Watchers

vue-cli-plugin-chrome-extension-cli's Issues

Service workers have to be in root directory

I stumbled across this bug last week. As per the official documentation, you cannot have a service worker in a nested directory (which this extension plugin has).

Whilst developing locally you will not run into any problems. It is in production, i.e. when it's published on Chrome Webstore that things don't work as intended. For me, several Chrome APIs did not work as intended, I couldn't for example call chrome.tabs even though I had the permission and such.

The fix is quite simple. In vue.config.js, simply change /js/[name].js to [name].js in the configureWebpack object and re-build your extension.

TypeError: Cannot read property 'forEach' of undefined

When I follow the instruction to create the extension app, the below error occurred:

 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-chrome-extension-cli...

yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 15.09s.
✔  Successfully installed plugin: vue-cli-plugin-chrome-extension-cli


🚀  Invoking generator for vue-cli-plugin-chrome-extension-cli...
 ERROR  TypeError: Cannot read property 'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined
    at module.exports (D:\myproj\autorobot\node_modules\vue-cli-plugin-chrome-extension-cli\generator\index.js:24:14)
    at Generator.initPlugins (C:\Users\tristany\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:150:13)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Generator.generate (C:\Users\tristany\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:168:5)
    at async runGenerator (C:\Users\tristany\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:111:3)
    at async invoke (C:\Users\tristany\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:92:3)

[BUG] Unable to use images

Describe the bug
When html < img > tag is used in popup page, it converts it from:

<img draggable="false" src="../../../assets/images/logo.png" width="100px" height="auto" />

TO:

<img draggable="false" src="/img/logo.png" width="0" height="0" />
in the browser

To Reproduce
Steps to reproduce the behavior:

Use Vue cli create project

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Install chrome-extension-cli Plugin

? Name of the Chrome Extension? chrome-extension-name
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 3
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content

See error something error...

Expected behavior
Image should show as typed in Vue file with attributes like height & width applied to it.

Screenshots

please complete the following information:

Node Version: v16.7.0
OS: Windows
Vue Cli Version: 5.0.8

Additional context
NONE

[BUG] cant import constants from popups.js

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Use Vue cli create project

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Install chrome-extension-cli Plugin

? Name of the Chrome Extension? chrome-extension-name
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 3
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content

See error something error...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

please complete the following information:

Node Version: [16.14.0]
OS: [Mac OS Big Sur]
Vue Cli Version [5.0.1]

Additional context
Add any other context about the problem here.

[BUG] Cannot resolve './src'

Describe the bug
After a fresh install of the vue cli plugin, running any task results in a 'cannot resolve './src' ' error

To Reproduce
Run any task after installing a fresh version of vue cli.

I'm running the latest version of vue cli with vue 2 selected and vue cli chrome extension version 1.1.4

Error
Module not found: Error: Can't resolve './src' in '/Users/shash/Documents/projects/swipekit-extension-test'

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/shash/Documents/projects/swipekit-extension-test'

webpack compiled with 1 error

please complete the following information:

Node Version: [16.13.0]
OS: [Mac OS Montery]

Hot Reload - Feature request

installed the app. amazing and fast.
Please add Hot Reload

Instruction on how to add more content scripts for different matches

Great project! Can you instruct me how to add more content scripts than one? I want one content script to match all sites, and another to match only a specific site. I know how I would do this with a vanilla Chrome Extenstion project, but not with vue.

[BUG] Typescript support ?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Use Vue cli create project

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Install chrome-extension-cli Plugin

? Name of the Chrome Extension? chrome-extension-name
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 3
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content

See error something error...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

please complete the following information:

Node Version: [16.14.0]
OS: [Mac OS Big Sur]
Vue Cli Version [5.0.1]

Additional context
Add any other context about the problem here.

Error: ENOENT: no such file or director : vueIndex/vueundefinedIndex.js'

? Name of the Chrome Extension? zzzzz
? Description for the Chrome Extension? zzz
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 2
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content, options, devtools

🚀  Invoking generator for vue-cli-plugin-chrome-extension-cli...
 ERROR  Error: ENOENT: no such file or directory, stat '/home/xxx/node_modules/vue-cli-plugin-chrome-extension-cli/generator/template/vueIndex/vueundefinedIndex.js'

TypeError: api.afterInvoke is not a function

/node_modules/vue-cli-plugin-chrome-extension-cli/generator/index.js:40
api.afterInvoke(() => {
^

TypeError: api.afterInvoke is not a function
at module.exports (/Users/wzy/easymoney/node_modules/vue-cli-plugin-chrome-extension-cli/generator/index.js:40:7)
at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:103:7
at Array.forEach ()
at new Generator (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:101:13)
at runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:123:21)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:117:3)

Unchecked runtime. lastError: Could not establish connection. Receiving end does not exist.

你好，我在 popup 里面发送消息：

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
      if (callback) callback(response);
    });
  });

然后在 content 接收：

    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
        if (request.cmd == 'test') alert(request.value);
        sendResponse('我收到了你的消息！');
    });

一直会报错：Unchecked runtime. lastError: Could not establish connection. Receiving end does not exist.

排查发现在生成对应的 xx.js 的时候，会在原来的代码外边加一个 (function() { xx } 。我手动去除生成的 (function() { xx } 后调用就正常了。

(function() { xx } 这个是可以配置的吗？能否不生成，会影响一些直接调用 js 方法的场景。

或者是我调用方式不对？

How to add a Vue component within content script?

PLEASE HELP~

DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.

[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)

vue create options

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

chrome-extension-cli options

✔  Successfully installed plugin: vue-cli-plugin-chrome-extension-cli

? Name of the Chrome Extension? chrome-extension-name
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 3
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content

Content css not working in build production

Good day,

My project:

Vue 3
Content
Popup
Typescript
Tailwindcss

I have an /src/index.css with the following

@tailwind base;
@tailwind components;
@tailwind utilities;

and in /entry/content.ts and /entry/popup.ts I import '@/index.css'

When I run yarn build-watch works fine, tailwindcss works with no issues for content and popup.
yarn build-watch does not generate CSS files, they are included inside js files, but yarn build generates CSS files

Problem

But when I run yarn build only popup works.

in the dist folder /dist/popup.html is referenced to <link href="/css/popup.css" rel="stylesheet"> and /dist/content.html is referenced to <link href="/css/content.css" rel="stylesheet"> in their head.

Solution

My solution was to add /css/content.css to the manifest.production.json in content_scripts. since no CSS is generated for yarn build-watch don't add them in manifest.development.json

  "content_scripts": [
    {
      "matches": ["*://*.somewebsite.com/*"],
      "js": ["/js/content.js"],
      "css": ["/css/content.css"], 
      "run_at": "document_end"
    }
  ]

background.service_worker manifest_version 3 error

Hi,
Thank you very much for your contribution to the open source.
But I am in use, after installation, use Chrome to load the local plugin to report the following error:
The "background.scripts" key cannot be used with manifest_version 3. Use the "background.service_worker" key instead.
Could not load manifest.

ENV:
vue-cli4

可以添加Typescript支持吗？

你好，我新建Vue项目默认开启了TS，

当我尝试运行这个工具时候

会出现错误，有一部分原因应该是 ESLint 默认开启强类型检测。

运行完插件后在添加TS支持好像没问题


error: Parsing error: Unexpected token module at src\shims-vue.d.ts:2:9:
  1 | /* eslint-disable */
> 2 | declare module '*.vue' {
    |         ^
  3 |   import type { DefineComponent } from 'vue'
  4 |   const component: DefineComponent<{}, {}, any>
  5 |   export default component

[BUG] Cannot add dev tool panel

After I added devtool.vue and its entry file, but seems it didn't auto gentrate the html and js files in /dist folder

copy inject scripts - feature request

Is it already done?
Feature request:
copy (content script's) page inject JS and CSS to dist folder

[Feature] Support projects created with `npm init vue@3`

Hey @sanyu1225

The project works well and as expected! Is there a plan to support projects created with the recommended npm init vue@3 as opposed to using the older vue create xxx tool.

I tried using this extension on a new project created with npm init vue@3 but the project would not run with the error:

Error: Cannot find module 'vue/compiler-sfc'

Thanks!

How to communicate between background.js and the popup.vue

Hi, hope you are okay i'm using your plugin to develop a chrome extension using Vue.js but i'm new in developing chrome extension and i'm not totally understanding how can i communicate between background.js and the popup.vue

I did this in my background.js

chrome.tabs.onActivated.addListener(() => {
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        const currentURL = tabs[0].url;
        console.log(currentURL);
        chrome.runtime.sendMessage({
            msg: 'url_changed',
            url: currentURL,
        });
    })
});

And in my popup.vue

<template>
  <div class="main_app">
    <navbar />
    <div class="p-6">
      <router-view /> <!-- not working -->
      <license-key @clicked="showNext" v-show="showLicenseKey" />
      <home v-if="website" :website="website" v-show="!showLicenseKey" />
    </div>
  </div>
</template>

<script>
import Navbar from "@/component/navbar";
import LicenseKey from "@/component/license_key";
import Home from "@/component/home";
export default {
  name: 'popupView',
  components: {
    Home,
    Navbar,
    LicenseKey,
  },
  data() {
    return {
      website: null,
      showLicenseKey: true
    }
  },
  mounted() {
    // This is not working 
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        console.log(request, sender, sendResponse)
    });
  },
  created() {
    // This is working 
    chrome.tabs.query({
      'active': true,
      currentWindow: true
    }, this.updateTabInfo.bind(this))
  },
  methods: {
    updateTabInfo(tabs) {
      var currentTab = tabs[0]
      console.log(currentTab);
      this.thing = 'testing';
      this.website = currentTab.url;
      console.log(this.website)
    },
    showNext(value) {
      this.showLicenseKey = value
    }
  }
}

</script>

<style>
.main_app {
  @apply w-72 h-full rounded
}
</style>

And i'm not receiving anything i didn't touch the popup.js except i tried to use VueRouter and it's not working but this is another topic

Can someone tell me what am i doing wrong pls ? Thanks by advance :)

firebase support

In manifest 3 Firebase sdk has be put locally.
has anyone tied it?
I will try it today

i18n Internationalization Support

Hi there! Is there a way to support internationalization? The problem I'm seeing is with the _locales folder which is required for internationalization to work. I believe the issue is that _locales does not get copied to /dist so Chrome does not detected. I have tried creating this folder everywhere but no luck. Thanks!

REF: https://developer.chrome.com/docs/extensions/reference/i18n/

[BUG] The CSP 'script-src:' contains one or more invalid characters & Uncaught EvalError:

Describe the bug
Service worker registration failed
1)

The Content-Security-Policy directive name 'script-src:' contains one or more invalid characters. Only ASCII alphanumeric characters or dashes '-' are allowed in directive names.

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".

MANIFEST 3
VUE 2
VUETIFY 2

To Reproduce
Steps to reproduce the behavior:

Use Vue cli create project

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier /
 Pick additional lint features: Lint on save YES
? Where do you prefer placing config for Babel, ESLint, etc.? NOT SURE
? Save this as a preset for future projects? yes

Install chrome-extension-cli Plugin

? Name of the Chrome Extension?  tester
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.50.12
? manifest_version for the Chrome Extension? 3
? delete Initial file? (src/main.js src/components public/index.html public/favicon) No
? Please select the required components : background, popup, content

See error no erroe

added "vue add vuetify"

run

Screenshots
If applicable, add screenshots to help explain your problem.

please complete the following information:

Node Version: [16.2.0]
OS: linux
Vue Cli Version [5.0.8]

Additional context
Add any other context about the problem here.

Chrome manifest 3 version

Greetings.
Sorry to bother you if it's not difficult I would like to get some answers to the newbie's questions.
environment:

manifest 3 versions
vue 2

The build works fine for production, but it's not clear how to develop.
"npm run serve" does not compile the files, it only starts the server.
"build-watch" doesn't work due to security policies

When working with 3 manifests, will you have to build and update the extension manually every time?
What are two manifests used for?
How to set up the plugin so that during development the cli does not compile files using eval? Or how to bypass this step during plugin development with version 3 manifest?

Thank you

vuetify

I can't do vuetify works. Any tips?

怎么设图标？

打包后，没图标。

ValidationError: CopyPlugin Invalid Options

#@vue/cli 4.5.11
macOS 10.14.6
vue2
create manifest v3
生成的vue.config.js 默认配置运行npm run build报错
用自己注释部分配置没问题
请问是否是vue/cli旧版问题引起的呢

  chainWebpack: (config) => {
    config.plugin('copy').use(require('copy-webpack-plugin'), [
      // [
      //   {
      //     from: path.resolve(`src/manifest.${process.env.NODE_ENV}.json`),
      //     to: `${path.resolve('dist')}/manifest.json`
      //   }
      // ]
      {
        patterns: [
          {
            from: path.resolve(`src/manifest.${process.env.NODE_ENV}.json`),
            to: `${path.resolve('dist')}/manifest.json`
          }
        ]
      }
    ])
  },

error

✔  Building for production...
 ERROR  ValidationError: CopyPlugin Invalid Options

options should be array

ValidationError: CopyPlugin Invalid Options

options should be array

[BUG] New setup CopyPlugin

Describe the bug
A clear and concise description of what the bug is.

To Reproduce


npm run build-watch 

> vue-cli-service  --env.NODE_ENV=development build-watch --mode development


⠋  Building for development.../home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/copy-webpack-plugin/node_modules/schema-utils/src/validateOptions.js:32
    throw new ValidationError(ajv.errors, name);
          ^

ValidationError: CopyPlugin Invalid Options

options should be array

    at validateOptions (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/copy-webpack-plugin/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new CopyPlugin (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/copy-webpack-plugin/dist/index.js:26:30)
    at /home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/webpack-chain/src/Plugin.js:14:18
    at Object.toConfig (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/webpack-chain/src/Plugin.js:78:22)
    at /home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/webpack-chain/src/Config.js:129:63
    at Array.map (<anonymous>)
    at module.exports.toConfig (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/webpack-chain/src/Config.js:129:40)
    at Service.resolveWebpackConfig (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/Service.js:245:34)
    at PluginAPI.resolveWebpackConfig (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
    at module.exports (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:46:14)
    at build (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/commands/build/index.js:147:50)
    at /home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/commands/build/index.js:89:13
    at Service.run (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/Service.js:230:12)
    at /home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/vue-cli-plugin-chrome-extension-cli/index.js:11:17
    at Service.run (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/lib/Service.js:230:12)
    at Object.<anonymous> (/home/mikaleb/Companies/Datananas/code/connect/test-ext/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9) {
  errors: [
    {
      keyword: 'type',
      dataPath: '',
      schemaPath: '#/type',
      params: { type: 'array' },
      message: 'should be array'
    }
  ]
}

Use Vue cli create project

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Install chrome-extension-cli Plugin

✔  Successfully installed plugin: vue-cli-plugin-chrome-extension-cli

? Name of the Chrome Extension? chrome-extension-name
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 2
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content

See error something error...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

please complete the following information:

Node Version: 16.11.0
OS: Ubuntu 20.04
Vue Cli Version @vue/cli 4.5.13

Additional context
Add any other context about the problem here.

[BUG] multiple content file copied to "js" folder and html file for content file

Describe the bug

copying multiple content files to js folder does not work. creates js.js file instead
creates html files for each content file

To Reproduce
1)
added to vue.config,js
const CopyWebpackPlugin = require("copy-webpack-plugin"); to top

and replaced

  configureWebpack: {
    output: {
      filename: `js/[name].js`,
      chunkFilename: `[name].js`
    },

with this

  configureWebpack: {
    output: {
      filename: `js/[name].js`,
      chunkFilename: `[name].js`
    },

no chnges in vue.config.js

Use Vue cli create project

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Install chrome-extension-cli Plugin

? Name of the Chrome Extension? chrome-extension-name
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? manifest_version for the Chrome Extension? 3
? delete Initial file? (src/main.js src/components public/index.html public/favicon) Yes
? Please select the required components : background, popup, content

See error something error...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

please complete the following information:

Node Version: [16.14.0]
OS: [Mac OS Big Sur]
Vue Cli Version [5.0.1]

Additional context
Add any other context about the problem here.

打包的时候可以直接加上zip压缩文件产出吗

产出的模版中vue.config.js配置打包的时候产出的文件没有压缩号的文件，可否把压缩文件加上
// 生产环境打包dist为zip
if (process.env.NODE_ENV === 'production') {
config.plugin('zip-webpack-plugin').use(require('zip-webpack-plugin'), [
{
path: ${path.resolve('dist')}/pack,
filename: 'template.zip',
},
]);
}

sanyu1225 / vue-cli-plugin-chrome-extension-cli Goto Github PK

vue-cli-plugin-chrome-extension-cli's Introduction

vue-cli-plugin-chrome-extension-cli

Requirements

Installation

Usage?

File folder

Run Development mode and Production

prompts.js

Credit

License

vue-cli-plugin-chrome-extension-cli's People

Contributors

Stargazers

Watchers

Forkers

vue-cli-plugin-chrome-extension-cli's Issues

Problem

Solution

Recommend Projects

Recommend Topics

Recommend Org