yuradev / vue-chrome-extension-template Goto Github PK

View Code? Open in Web Editor NEW

644.0 16.0 104.0 331 KB

vue chrome extension template

License: MIT License

JavaScript 87.54% HTML 2.71% Vue 9.74%

vue chrome-extension wcer hot-reloading

vue-chrome-extension-template's Introduction

Vue.js Chrome Extension Template (wcer)

Template for quick creation of Chrome extension on Vuejs c hot reloading when developing.

Installation:

This boilerplate was built as a template for vue-cli and includes options to customize your final scaffolded app.

# install vue-cli
$ npm install -g vue-cli
# create a new project using the template
$ vue init YuraDev/vue-chrome-extension-template my-project
# install dependencies and go!
$ cd my-project
$ npm install # or yarn
$ npm run dev # or yarn dev

Structure

backend: Background work of your scripts
content Run in the context of web pages
devtools - It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more.
options - To allow users to customize the behavior of your extension, you may wish to provide an options page.
popup - The page (window) that will be displayed when the icon is clicked
tab - Your application will work in a separate tab
ext - Shared scripts
manifest.js - Descriptions of the application, its rights and possibilities

vue-chrome-extension-template's People

Contributors

Stargazers

Watchers

Forkers

btcltc rwatts3 aliangliang catfact ksora94 asingingfish christomitov klebercode techpeace wuyue92tree hhch gm3290 internet-com brbb tpennock hkuwana dmitriyivanovdevelopex looio himushroom jsgoten waltspence yongx sebiush mrmarius jerrebm naiklon jmealo davmixcool gregorystarr leonardobenedet hkd987 eyaylagul joaquin6 idevyatovsky pasturn rodrigoespinozadev brynner z4-chromium wlkns normal-coder asiellb markthomas93 xcrow hhy5277 genuinebuildmonkey systart lgs lastlink dsandor dwyanetz userjustdoit shisiying ramadhanjanuar swina molvqingtai wangzhengbo yizhiyan sermonis vanholler johosz ahaoboy kennychou the-cc-dev idist-hn dasisyouyu ghfjj freshhu linxiaozhi fenglui iqbalme trungkientf jiangtao praydaily evanyy seeker-one jodavin renzg mtrucc vita2333 klaur neil585456525 rockybin ahfuforpmp 01longwei weixiaoshiaishang luohongfsd haywire2099 okay686 hubitor-forks abubakrilaitan teddy920810 gglewo buyili cmforjava zebra-cl shoma-max gaochnggg conmi-whitejoker salagrie lokeshjonnakuti

vue-chrome-extension-template's Issues

components not work

hi:
i had added a component file at my_project/src/popup/components/test.vue and import in root.vue, it compiled aright, but not rendered, how can it work?

THX

I can't make it dev/build

webpack.base.js:50
...cssLoaders(),
^^^

SyntaxError: Unexpected token "..."

How to split js file into small files?

When upload to Firefox extension, it says

This file is not binary and is too large to parse. Files larger than 4MB will not be parsed. If your JavaScript file has a large list, consider removing the list and loading it as a separate JSON file instead.

Firefox only support js files that size less than 4MB.

npm run dev failing

Console error

> [email protected] dev /Users/f/Desktop/app/app
> webpack --config ./core/webpack.dev.js --hide-modules

/Users/f/Desktop/app/app/core/webpack.base.js:50
            ...cssLoaders(),
            ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/f/Desktop/app/app/core/webpack.dev.js:4:21)

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `webpack --config ./core/webpack.dev.js --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'webpack --config ./core/webpack.dev.js --hide-modules'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-chrome-extension-template package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config ./core/webpack.dev.js --hide-modules
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-chrome-extension-template
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-chrome-extension-template
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/f/Desktop/app/app/npm-debug.log

Log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 silly lifecycle [email protected]~predev: no script for predev, continuing
7 info lifecycle [email protected]~dev: [email protected]
8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/f/Desktop/app/app/node_modules/.bin:/Applications/Julia-0.6.app/Contents/Resources/julia/bin/:/Library/Frameworks/Python.framework/Versions/3.6/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Applications/Postgres.app/Contents/Versions/latest/bin:/Applications/Wireshark.app/Contents/MacOS
10 verbose lifecycle [email protected]~dev: CWD: /Users/f/Desktop/app/app
11 silly lifecycle [email protected]~dev: Args: [ '-c',
11 silly lifecycle   'webpack --config ./core/webpack.dev.js --hide-modules' ]
12 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: `webpack --config ./core/webpack.dev.js --hide-modules`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/f/Desktop/app/app
17 error Darwin 16.7.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
19 error node v6.11.2
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] dev: `webpack --config ./core/webpack.dev.js --hide-modules`
22 error Exit status 1
23 error Failed at the [email protected] dev script 'webpack --config ./core/webpack.dev.js --hide-modules'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the vue-chrome-extension-template package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack --config ./core/webpack.dev.js --hide-modules
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs vue-chrome-extension-template
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls vue-chrome-extension-template
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Single-file components and async/await

Seems like vue-loader is not configured to use Babel transpiler. I've made PR #1 to tweak this option.

npm run dev error

Hi Yura:
I got a problem when use the template.
I run follow commands

vue init

the project compile succeed, but it can't run
and got this error message:

 npm run dev

> [email protected] dev E:\Learning\chrome\bwvue2
> webpack --config ./core/webpack.dev.js --hide-modules


Webpack is watching the files…

[ Starting the Chrome Hot Plugin Reload Server... ]
 DONE  Compiled successfully in 7536ms17:22:01

Hash: 42f3b6d42d4352a3ae7e
Version: webpack 3.10.0
Time: 7536ms
                          Asset       Size  Chunks                    Chunk Names
               ./pages/app.html  355 bytes          [emitted]
fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
                      js/tab.js     869 kB       1  [emitted]  [big]  tab
                  js/options.js     869 kB       2  [emitted]  [big]  options
                    js/panel.js     869 kB       3  [emitted]  [big]  panel
                 js/devtools.js    5.51 kB       4  [emitted]         devtools
                   js/inject.js    5.72 kB       5  [emitted]         inject
                  js/content.js    5.25 kB       6  [emitted]         content
               js/background.js    5.25 kB       7  [emitted]         background
                    js/popup.js    4.88 MB       0  [emitted]  [big]  popup
             ./pages/popup.html  358 bytes          [emitted]
             ./pages/panel.html  358 bytes          [emitted]
          ./pages/devtools.html  364 bytes          [emitted]
           ./pages/options.html  362 bytes          [emitted]
        ./pages/background.html  368 bytes          [emitted]
                   icons/16.png    18.2 kB          [emitted]
                  icons/128.png    21.2 kB          [emitted]
                   icons/48.png    19.4 kB          [emitted]
                  manifest.json  821 bytes          [emitted]
Child html-webpack-plugin for "pages\app.html":
     1 asset
Child html-webpack-plugin for "pages\popup.html":
     1 asset
Child html-webpack-plugin for "pages\panel.html":
     1 asset
Child html-webpack-plugin for "pages\devtools.html":
     1 asset
Child html-webpack-plugin for "pages\options.html":
     1 asset
Child html-webpack-plugin for "pages\background.html":
     1 asset
Chrome: [ WCER: 17:22:01 -  | content successfully reloaded ]
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at _errnoException (util.js:1024:11)
    at TCP.onread (net.js:615:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack --config ./core/webpack.dev.js --hide-modules`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

in the browser, when runing extension , press F12 and got this error message:

tab.js?42f3b6d42d4352a3ae7e:21 WebSocket connection to 'ws://localhost:9090/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ tab.js?42f3b6d42d4352a3ae7e:21
setTimeout @ tab.js?42f3b6d42d4352a3ae7e:40
tab.js?42f3b6d42d4352a3ae7e:14 [ WCER: Socket connection closed. Code 1006. See more in https://tools.ietf.org/html/rfc6455#section-7.4.1 ]

how could I do to resolve this problem ?

How to generate Vue in content.js?

I want to generate from a Vue file in content.js and put the contents into the current tab, not in the popup or options html?
Is it possible?

I was wondering if vue-router works with chrome extension?

I tried the routes and they work in local dev but not in chrome extension? Anyone knows why?

Trying to build to install on Chrome

when I run
npm run build to generate out in build folder and starting to install on chrome
it raise Uncaught ReferenceError: webpackJsonp_name_ is not defined

what's that...

[Suggestion] Include a library for state managment

I just ran into the need to have reactive shared state between content and popup, so I think it would be a great addition to this template a way to manage state using a library like vuex.

These guys already have done it, except they use react : https://github.com/tshaddix/react-chrome-redux/wiki/Getting-Started

Trying to publish in chrome using this template will get your extension rejected

I'm speaking from my own experience,

The message I got is that the code was obfuscated and not human readable. I am now looking to stop webpack from uglifying the code. Will make a PR in case I succeed.

How to interact with page elements

I Would like to get some form fields and populate with data stored in vue and in the other hand I would like also scrape page to pass data to vue. How can I do that?

There is no localhost address on cli

When i type npm run dev it's working. But there is no localhost port number. so i couldn't find where the app working.

Webpack fails when testing extension

Hi, I'm running this on Mac OS X 10.13.6 with Node v10.10.0.

Using the base installation of the template, I ran npm run dev and got a warning:

{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

After that, making hot changes worked.

However, when:

I loaded the extension as unpacked at: "project/build";
clicked the button in the web browser;
and then clicked the "New tab" button, I got:

internal/streams/legacy.js:57
throw er; // Unhandled stream error in pipe.
^

Error: read ECONNRESET
at TCP.onStreamRead (internal/stream_base_commons.js:111:27)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: webpack --config ./core/webpack.dev.js --hide-modules
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/macbookpro/.npm/_logs/2019-04-19T10_05_16_155Z-debug.log

Where the debug is:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/10.10.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 info lifecycle [email protected]dev: [email protected]
7 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/path_to_server/project/node_modules/.bin:/Users/macbookpro/bin:/usr/local/bin:/usr/local/mysql/bin:/Users/macbookpro/.composer/vendor/bin:/usr/local/ec2/ec2-api-tools-1.7.5.1/bin:/usr/local/opt/[email protected]/sbin:/usr/local/opt/[email protected]/bin:/opt/local/bin:/opt/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/git/bin
9 verbose lifecycle [email protected]dev: CWD: /path_to_server/project
10 silly lifecycle [email protected]dev: Args: [ '-c',
10 silly lifecycle 'webpack --config ./core/webpack.dev.js --hide-modules' ]
11 silly lifecycle [email protected]dev: Returned: code: 1 signal: null
12 info lifecycle [email protected]dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: webpack --config ./core/webpack.dev.js --hide-modules
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:962:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid [email protected]
15 verbose cwd /path_to_server/project
16 verbose Darwin 17.7.0
17 verbose argv "/usr/local/Cellar/node/10.10.0/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v10.10.0
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: webpack --config ./core/webpack.dev.js --hide-modules
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I'm able to start Webpack up again, but it dies during testing, which is a shame.

hot-reload error / wcer

Hi,

Hope you are all well !

I am working on a quick WIP based on your vue-chrome-extenstion-template and I have an error while using the dev mode and watching files.

Repository: https://github.com/sniperkit/vue-element-admin-chrome
ps. you will find more details in the README.

error message:

 WAIT  Compiling...                                                                                                                                                                              7:21:55 PM

[WCER]:  Starting the Chrome Hot Plugin Reload Server...


 DONE  Compiled successfully in 865ms                                                                                                                                                            7:21:56 PM

Hash: 8718943b369340a3f939
Version: webpack 3.12.0
Time: 865ms
PublicPath: /
                             Asset       Size  Chunks                    Chunk Names
js/2.2.js.map?8718943b369340a3f939    11.3 kB       2  [emitted]
    js/0.0.js?8718943b369340a3f939      22 kB       0  [emitted]
    js/2.2.js?8718943b369340a3f939    6.52 kB       2  [emitted]
    js/3.3.js?8718943b369340a3f939    8.61 kB       3  [emitted]
    js/4.4.js?8718943b369340a3f939    5.27 kB       4  [emitted]
                      js/vendor.js    1.87 MB       5  [emitted]  [big]  vendor
                     js/content.js     347 kB       6  [emitted]  [big]  content
                  js/background.js    2.96 kB       7  [emitted]         background
                    js/manifest.js    8.66 kB       8  [emitted]         manifest
js/0.0.js.map?8718943b369340a3f939    33.3 kB       0  [emitted]
js/1.1.js.map?8718943b369340a3f939    20.8 kB       1  [emitted]
    js/1.1.js?8718943b369340a3f939    12.5 kB       1  [emitted]
js/3.3.js.map?8718943b369340a3f939    12.8 kB       3  [emitted]
js/4.4.js.map?8718943b369340a3f939    7.56 kB       4  [emitted]
                  js/vendor.js.map    2.28 MB       5  [emitted]         vendor
                 js/content.js.map     376 kB       6  [emitted]         content
              js/background.js.map  315 bytes       7  [emitted]         background
                js/manifest.js.map       6 kB       8  [emitted]         manifest
           ./pages/background.html  532 bytes          [emitted]
                     manifest.json    1.19 kB          [emitted]
         _locales/en/messages.json  358 bytes          [emitted]
      _locales/fr_FR/messages.json  454 bytes          [emitted]
       ../eadmin-extension.dev.zip    1.03 MB          [emitted]  [big]
 + 2 hidden assets
Entrypoint content [big] = js/manifest.js js/manifest.js.map js/vendor.js js/vendor.js.map js/content.js js/content.js.map
Entrypoint background [big] = js/manifest.js js/manifest.js.map js/vendor.js js/vendor.js.map js/background.js js/background.js.map
chunk    {0} js/0.0.js?8718943b369340a3f939, js/0.0.js.map?8718943b369340a3f939 20.4 kB {6}
    > [213] 26:11-62
chunk    {1} js/1.1.js?8718943b369340a3f939, js/1.1.js.map?8718943b369340a3f939 11.7 kB {6}
    > [213] 67:13-71
chunk    {2} js/2.2.js?8718943b369340a3f939, js/2.2.js.map?8718943b369340a3f939 5.43 kB {6}
    > [213] 36:13-76
chunk    {3} js/3.3.js?8718943b369340a3f939, js/3.3.js.map?8718943b369340a3f939 6.82 kB {6}
    > [213] 49:13-72
chunk    {4} js/4.4.js?8718943b369340a3f939, js/4.4.js.map?8718943b369340a3f939 3.95 kB {6}
    > [213] 56:13-71
chunk    {5} js/vendor.js, js/vendor.js.map (vendor) 1.84 MB {8} [initial]
chunk    {6} js/content.js, js/content.js.map (content) 321 kB {5} [initial] [rendered]
    > content [106]
chunk    {7} js/background.js, js/background.js.map (background) 40 bytes {5} [initial]
    > background [277]
chunk    {8} js/manifest.js, js/manifest.js.map (manifest) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "pages/background.html":
    PublicPath: /
     1 asset
    Entrypoint undefined = ./pages/background.html
    chunk    {0} ./pages/background.html 542 kB [entry]
        > [0]
internal/streams/legacy.js:57
      throw er; // Unhandled stream error in pipe.
      ^

Error: read ECONNRESET
    at TCP.onread (net.js:656:25)

I am stucked as I cannot manage to have more trace info/error details, so any help/insights would be amazing.

Cheers,
Rosco Pecoltran

Build error websocket

When I run npm run build and then I load my unpacked extension I get the error

WebSocket connection to 'ws://localhost:9090/6' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

I have moved the wcer plugin from webpack.base.js to webpack.dev.js and I still get the same error
after building, it works correctly when I run npm run dev.

Response code 404 (Not Found)

Hi, I got the following error:

>vue init vue-chrome-extension-template vuejs-app

   vue-cli · Failed to download repo vuejs-templates/vue-chrome-extension-template: Response code 404 (Not Found)

I'm using node.js v8.11.2 / npm v6.0.1.

Packages out of date

Its causing some issues on MacOS Mohave

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!

Uncaught ReferenceError: webpackJsonp_name_ is not defined

i think the vendor.js not in html

Content script loaded twice

I'm getting the content-script! output twice when loading a page with the extension enabled.