yuradev / vue-chrome-extension-template Goto Github PK
View Code? Open in Web Editor NEWvue chrome extension template
License: MIT License
vue chrome extension template
License: MIT License
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?
I tried the routes and they work in local dev but not in chrome extension? Anyone knows why?
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.
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
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:
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]dev: [email protected]
6 info lifecycle [email protected]
7 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle truedev: 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
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]dev: CWD: /path_to_server/projectdev: Args: [ '-c',
10 silly lifecycle [email protected]
10 silly lifecycle 'webpack --config ./core/webpack.dev.js --hide-modules' ]
11 silly lifecycle [email protected]dev: Returned: code: 1 signal: nulldev: Failed to exec dev script
12 info lifecycle [email protected]
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.
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
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.
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.
I'm getting the content-script!
output twice when loading a page with the extension enabled.
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.
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
.
Uncaught ReferenceError: webpackJsonp_name_ is not defined
i think the vendor.js not in html
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 ]
webpack.base.js:50
...cssLoaders(),
^^^
SyntaxError: Unexpected token "..."
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?
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!
Seems like vue-loader is not configured to use Babel transpiler. I've made PR #1 to tweak this option.
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...
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
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.