kocal / vue-web-extension

🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!

vue-web-extension

⚠️ This README is for the master version of the preset. If you use the v1 of this boilerplate with Vue-CLI 2 support, please see v1 branch.

---

This Vue CLI preset allows you to quickly start a web extension containing:

• Everything you need to build a web extension (manifest.json, .zip building, ...), thanks to adambullmer/vue-cli-plugin-browser-extension
• Vue 2+
• Vue-router and Vuex
• Axios (configurable)
• Babel with preset-env
• ESLint and Prettier (both configurable)

Requirements

• Node.js >= 10 and npm >= 5
• git
• vue-cli 3+

Documentation

The documentation can be found on vue-web-extension.netlify.app. Please check the documentation website and the open and closed issues, before raising a new issue.

Usage

$ vue create --preset kocal/vue-web-extension my-extension
$ cd my-extension
$ npm run build

npm run build

Build the extension into dist folder for production.

A zip file is also built and is located in artifacts directory.

npm run serve

Build the extension for development and watch over file changes.

It also automatically reload your extension into your browsers, thanks to webpack-extension-reloader plugin.

Options

See https://github.com/adambullmer/vue-cli-plugin-browser-extension#plugin-options

vue-web-extension's Issues

feat: run Prettier on generated template

Setup Parcel

And let the user choose between Webpack or Parcel, during installation

In routes.js, use `import` instead of `require`

Prettier git hook is not asked during init

See #224 (comment)

Write tests

Use Travis to test:

• name/description/author (hardwrite)
• make a matrice for router/store/axios ENVs : USE_ROUTER, USE_STORE, USE_AXIOS ...

Use spawn/expect commands to script our tests :

• vuejs/vue-cli#291 (comment)
• https://twitter.com/Kocal_/status/935037142606188544

Configure webpack

Configure webpack to work with static files (fonts/images)

Update Babel preset to env

fix(tests): handle errors from `tests/*` scripts properly

See https://travis-ci.org/Kocal/vue-web-extension/jobs/375313036.

To resume, this behavor [[ A ]] && B || C:

• eval A
• If A is truthy, it eval B
• If A is falsy, it eval C
• If B exit incorrectly, it also eval C... so Travis build is green.

Changing this behavior by [[ A ]] && C || B || exit $? will:

• eval A
• If A is truthy, it eval C
• C will never fails (it's a simple echo)
• If A is falsy, it eval B
• If B is truthy, it's fine
• If B is falsy, it exit with last status code, so Travis build is red 😄

Dependabot couldn't find a package.json for this project

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /example/package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

You can mention @dependabot in the comments below to contact the Dependabot team.

Update dependencies (Babel/Vue/Webpack)

• Update Babel to env preset
• Update Vue (and ecosystem) to v2.5
• Update Webpack to v3.10

Rename command "build:env" to "build:dev"

chore: add more examples

Generate examples for minimal and full-airbnb scenarios

Routes are not loading!

Somehow routes are not loading.

"Hello World!"

is not showing. Any idea?

Add example of generated template

To let dependabot run on it, and notify us about packages update 🙂

refactor(tests): do not use `expect` anymore

Use scenarios instead, like vuejs-templates/webpack.

Because:

• it's in JSON
• we won't need expect package to be installed anymore
• we can run just one Travis build, no more matrix

Configure ESLint to use « webextensions » environment

^

env: {
  // ...
  webextensions: true,
},

feat(babel): specify browser list

Need help to put content script right way

Hi I try to use content script, but it's seem to be not working.

What I do is:

Create new content.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
  // If the received message has the expected format...
  console.log('rn')
  if (msg.text === 'report_back') {
    // Call the specified callback, passing
    // the web-page's DOM content as argument
    sendResponse('Hello');
  }
});

add it to manifest

{
  "name": "movie-extension",
  "description": "A Vue.js web extension",
  "version": "1.0.0",
  "manifest_version": 2,
  "icons": {
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  },
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_title": "movie-extension",
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [{
    "matches": ["*://*.google.com/*"],
    "js": ["content.js"]
  }],
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

add file to the CopyWebpackPlugin

new CopyWebpackPlugin([
      {from: 'icons', to: 'icons', ignore: ['icon.xcf']},
      {from: 'popup/popup.html', to: 'popup/popup.html'},
      {from: 'manifest.json', to: 'manifest.json'},
      {from: 'content.js', to: 'content.js'}
    ])

Try to use it in the vue component

<template>
  <div>
    <p>Hello world!</p>
    <button @click="test">Test</button>
  </div>
</template>

<script>
  export default {
    data () {
      return { }
    },
    methods: {
      test () {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {text: 'report_back'}, function(response) {
            console.log(response);
          });
        });
      }
    }
  }
</script>

But I got undefined in the console.log :(

Replace Python by JS for build-zip script

Refactor: replace ExtractTextWebpackPlugin by MiniCssExtractPlugin

Kocal/Solary#199

« manifest.json » should use version of « package.json »

With that, we can run npm publish 😄

Update to webpack 4

Feat: allow unsafe-eval in Chrome CSP

improve: remove double-quotes from "meta.js" file

Because it's horrible and hard to maintain.

feat(babel): add syntax dynamic import plugin

Development workflow

Is your feature request related to a problem? Please describe.
No.

Additional context
This repository is great and helpful, Thank You!

There is no documentation and i can't seem to find too much resources in the issues section here. I was wondering what's the normal development workflow is? If i build this once and then drag this to Chrome it installs it, once a change is made we need to build it again and drag it again?

I am just wondering what the process is.

Thank You.

Do not use Vuex getter if Vuex is disabled, in background.js

Current background.js file content is

{{#if store}}import store from './store'{{/if}}

alert(`Hello ${store.getters.foo}!`)

If Vuex is disabled (and store falsy), then store.getters.foo will fails.

feature: ask for setup a git precommit hook for Prettier

During vue init..., if the user chose to install Prettier, then we should ask him if he wants to setup a git pre-commit hook.

• https://github.com/nrwl/precise-commits
• https://prettier.io/docs/en/precommit.html#option-4-precise-commits-https-githubcom-jameshenry-precise-commits

Missing trailing comma in package.json

This will make the npm install fail during setup.

Right here:

vue-web-extension/template/package.json

Line 32 in f24e746

"webpack-shell-plugin": "^0.5.0"

community: add issue and PR templates

This will be done after #44, because right now it's hard to modify code, generate the extension, and test code.

Feat: add HMR

https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

chore(ci): Configure Travis cache for Yarn & node_modules directory

Kocal/Solary#200

feat: add prettier

Add command "watch:dev"

feat: add auto-install behavior

It should ask to the user if he wants to install dependencies (with npm or yarn).

icon.xcf should not be dist/dist-zip

Related to Kocal/Solary#56

feat: add eslint

The webextension polyfill is not bundled

Using the boilerplate to make a Firefox extension, the polyfills need to be included: https://github.com/mozilla/webextension-polyfill

I included in my project I can make a pull request with the Webpack configuration

docs: improve README

Feat: update vue-loader to v15.x

Kocal/Solary#199

Prettier configuration file name is invalid

It should be named .prettierrc, not .prettierc

is it possibleto to use vuex in content script?

if the content script can get the data from vuex shared with background.js, it is so wonderful. ooop!

feat: run ESLint on generated template

Downgrade babel-eslint to 8.2.1

babel/babel-eslint#595

In popup.html, link popup.css

feat(babel): add optional chaining plugin

Add newtab scenario

I'm trying to build an extension that will also incorporate a new tab,
Besides all the great features in this library, I could not find a solution for that. (I'm quite a starter on Vue so I had some hard time to get it running myself)

Is that something on the roadmap?

Script for removing eval() from bundles seems to not works anymore

Add @types/chrome dependency

To improve your life ✨

Vue Devtools?

Any way to use Vue Devtools in a page from the extension?