dutiyesh / chrome-extension-cli Goto Github PK
View Code? Open in Web Editor NEW🚀 The CLI for your next Chrome Extension
License: MIT License
🚀 The CLI for your next Chrome Extension
License: MIT License
For some reasons, i want to executeScript from the background.js
chrome.scripting.executeScript(
{
target: { tabId: aTab.id },
files: [
// get selection, send it to background (here), wait for response, replace selection
"/my_content_script.js"
]
});
However, in such a case, the my_content_script.js
is not recognised by the webpack. I have to put it in public
instead of src
.
Any suggestion ? or just put into public ?
Hi,
I cannot start the watch process after initializing the project.
The error is as follows:
$ node
Welcome to Node.js v12.17.0.
Type ".help" for more information.
$ chrome-extension-cli my-extension
Creating a new Chrome extension in /Users/username/Desktop/my-extension
Installing packages. This might take a couple of minutes.
Installing webpack, webpack-cli and few more...
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
> [email protected] install /Users/username/Desktop/my-extension/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"<8.10.0"} (current: {"node":"12.17.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 547 packages from 259 contributors and audited 547 packages in 14.956s
30 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Generated a README file.
Initialized a git repository.
Success! Created my-extension at /Users/tcool/Desktop/my-extension
Inside that directory, you can run below commands:
npm run watch
Listens for files changes and rebuilds automatically.
npm run build
Bundles the app into static files for Chrome store.
We suggest that you begin by typing:
1. cd my-extension
2. Run npm run watch
3. Open chrome://extensions
4. Check the Developer mode checkbox
5. Click on the Load unpacked extension button
6. Select the folder my-extension/build
$ npm run watch
> [email protected] watch /Users/username/Desktop/my-extension
> webpack --mode=development --watch --config config/webpack.config.js
Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
- options[0] misses the property 'patterns'. Should be:
[non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
at validate (/Users/username/Desktop/my-extension/node_modules/schema-utils/dist/validate.js:88:11)
at new CopyPlugin (/Users/username/Desktop/my-extension/node_modules/copy-webpack-plugin/dist/index.js:24:30)
at Object.<anonymous> (/Users/username/Desktop/my-extension/config/webpack.common.js:52:5)
at Module._compile (/Users/username/Desktop/my-extension/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (/Users/username/Desktop/my-extension/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (/Users/username/Desktop/my-extension/config/webpack.config.js:5:16)
at Module._compile (/Users/tcool/Desktop/my-extension/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (/Users/username/Desktop/my-extension/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: `webpack --mode=development --watch --config config/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch 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:
It would be nice if the generated project included prettier and editorconfig etc settings, so that opening the generated code in the editor doesn't produce lots of formatting errors right off the bat.
with typescript @types/chrome
it will be easy to get the api of extension.
want to create a react project by this cli, for popup.html
or options.html
eg.
I'm the admin.
mac@MacBook-Pro-Illa ext-autoposter % npm install -g chrome-extension-cli
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/chrome-extension-cli
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/chrome-extension-cli'
npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/chrome-extension-cli'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/chrome-extension-cli'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in: /Users/mac/.npm/_logs/2024-04-04T17_51_15_887Z-debug-0.log
Complele log:
0 verbose cli /usr/local/bin/node /usr/local/bin/npm
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/Users/mac/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:setEnvs Completed in 1ms
15 timing config:load Completed in 5ms
16 timing npm:load:configload Completed in 5ms
17 timing config:load:flatten Completed in 1ms
18 timing npm:load:mkdirpcache Completed in 0ms
19 timing npm:load:mkdirplogs Completed in 0ms
20 verbose title npm install chrome-extension-cli
21 verbose argv "install" "--global" "chrome-extension-cli"
22 timing npm:load:setTitle Completed in 6ms
23 timing npm:load:display Completed in 1ms
24 verbose logfile logs-max:10 dir:/Users/mac/.npm/_logs/2024-04-04T17_51_15_887Z-
25 verbose logfile /Users/mac/.npm/_logs/2024-04-04T17_51_15_887Z-debug-0.log
26 timing npm:load:logFile Completed in 3ms
27 timing npm:load:timers Completed in 0ms
28 timing npm:load:configScope Completed in 0ms
29 timing npm:load Completed in 25ms
30 timing config:load:flatten Completed in 1ms
31 timing arborist:ctor Completed in 1ms
32 silly logfile start cleaning logs, removing 1 files
33 timing idealTree:init Completed in 3ms
34 timing idealTree:userRequests Completed in 2ms
35 silly idealTree buildDeps
36 silly fetch manifest chrome-extension-cli@*
37 silly logfile done cleaning log files
38 http fetch GET 200 https://registry.npmjs.org/chrome-extension-cli 1203ms (cache miss)
39 silly placeDep ROOT [email protected] OK for: want: *
40 silly fetch manifest chalk@^2.4.2
41 silly fetch manifest commander@^3.0.1
42 silly fetch manifest cross-spawn@^7.0.0
43 silly fetch manifest fs-extra@^8.1.0
44 silly fetch manifest validate-npm-package-name@^3.0.0
45 http fetch GET 200 https://registry.npmjs.org/commander 184ms (cache miss)
46 http fetch GET 200 https://registry.npmjs.org/chalk 637ms (cache revalidated)
47 http fetch GET 200 https://registry.npmjs.org/validate-npm-package-name 640ms (cache miss)
48 http fetch GET 200 https://registry.npmjs.org/cross-spawn 642ms (cache miss)
49 http fetch GET 200 https://registry.npmjs.org/fs-extra 646ms (cache revalidated)
50 timing idealTree:#root Completed in 1857ms
51 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^2.4.2
52 silly fetch manifest ansi-styles@^3.2.1
53 silly fetch manifest escape-string-regexp@^1.0.5
54 silly fetch manifest supports-color@^5.3.0
55 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^3.0.1
56 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^7.0.0
57 silly fetch manifest path-key@^3.1.0
58 silly fetch manifest shebang-command@^2.0.0
59 silly fetch manifest which@^2.0.1
60 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^8.1.0
61 silly fetch manifest graceful-fs@^4.2.0
62 silly fetch manifest jsonfile@^4.0.0
63 silly fetch manifest universalify@^0.1.0
64 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^3.0.0
65 silly fetch manifest builtins@^1.0.3
66 http fetch GET 200 https://registry.npmjs.org/shebang-command 177ms (cache miss)
67 http fetch GET 200 https://registry.npmjs.org/path-key 181ms (cache miss)
68 http fetch GET 200 https://registry.npmjs.org/which 184ms (cache miss)
69 http fetch GET 200 https://registry.npmjs.org/builtins 186ms (cache miss)
70 http fetch GET 200 https://registry.npmjs.org/ansi-styles 198ms (cache revalidated)
71 http fetch GET 200 https://registry.npmjs.org/supports-color 631ms (cache revalidated)
72 http fetch GET 200 https://registry.npmjs.org/graceful-fs 633ms (cache revalidated)
73 http fetch GET 200 https://registry.npmjs.org/escape-string-regexp 641ms (cache revalidated)
74 http fetch GET 200 https://registry.npmjs.org/universalify 639ms (cache revalidated)
75 http fetch GET 200 https://registry.npmjs.org/jsonfile 643ms (cache revalidated)
76 timing idealTree:node_modules/chrome-extension-cli Completed in 648ms
77 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^3.2.1
78 silly fetch manifest color-convert@^1.9.0
79 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^1.0.5
80 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^5.3.0
81 silly fetch manifest has-flag@^3.0.0
82 http fetch GET 200 https://registry.npmjs.org/color-convert 176ms (cache revalidated)
83 http fetch GET 200 https://registry.npmjs.org/has-flag 184ms (cache revalidated)
84 timing idealTree:node_modules/chrome-extension-cli/node_modules/chalk Completed in 189ms
85 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^1.9.0
86 silly fetch manifest [email protected]
87 http fetch GET 200 https://registry.npmjs.org/color-name 188ms (cache revalidated)
88 timing idealTree:node_modules/chrome-extension-cli/node_modules/ansi-styles Completed in 191ms
89 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: 1.1.3
90 timing idealTree:node_modules/chrome-extension-cli/node_modules/color-convert Completed in 2ms
91 timing idealTree:node_modules/chrome-extension-cli/node_modules/color-name Completed in 0ms
92 timing idealTree:node_modules/chrome-extension-cli/node_modules/commander Completed in 0ms
93 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^3.1.0
94 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^2.0.0
95 silly fetch manifest shebang-regex@^3.0.0
96 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^2.0.1
97 silly fetch manifest isexe@^2.0.0
98 http fetch GET 200 https://registry.npmjs.org/isexe 173ms (cache miss)
99 http fetch GET 200 https://registry.npmjs.org/shebang-regex 182ms (cache miss)
100 timing idealTree:node_modules/chrome-extension-cli/node_modules/cross-spawn Completed in 187ms
101 timing idealTree:node_modules/chrome-extension-cli/node_modules/escape-string-regexp Completed in 0ms
102 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^4.2.0
103 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^4.0.0
104 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^0.1.0
105 timing idealTree:node_modules/chrome-extension-cli/node_modules/fs-extra Completed in 2ms
106 timing idealTree:node_modules/chrome-extension-cli/node_modules/graceful-fs Completed in 0ms
107 timing idealTree:node_modules/chrome-extension-cli/node_modules/jsonfile Completed in 0ms
108 timing idealTree:node_modules/chrome-extension-cli/node_modules/path-key Completed in 0ms
109 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^3.0.0
110 timing idealTree:node_modules/chrome-extension-cli/node_modules/shebang-command Completed in 0ms
111 timing idealTree:node_modules/chrome-extension-cli/node_modules/shebang-regex Completed in 0ms
112 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^3.0.0
113 timing idealTree:node_modules/chrome-extension-cli/node_modules/supports-color Completed in 0ms
114 timing idealTree:node_modules/chrome-extension-cli/node_modules/has-flag Completed in 0ms
115 timing idealTree:node_modules/chrome-extension-cli/node_modules/universalify Completed in 0ms
116 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^1.0.3
117 timing idealTree:node_modules/chrome-extension-cli/node_modules/validate-npm-package-name Completed in 0ms
118 timing idealTree:node_modules/chrome-extension-cli/node_modules/builtins Completed in 0ms
119 silly placeDep node_modules/chrome-extension-cli [email protected] OK for: [email protected] want: ^2.0.0
120 timing idealTree:node_modules/chrome-extension-cli/node_modules/which Completed in 0ms
121 timing idealTree:node_modules/chrome-extension-cli/node_modules/isexe Completed in 0ms
122 timing idealTree:buildDeps Completed in 3080ms
123 timing idealTree:fixDepFlags Completed in 0ms
124 timing idealTree Completed in 3085ms
125 timing reify:loadTrees Completed in 3086ms
126 timing reify:diffTrees Completed in 1ms
127 silly reify moves {}
128 timing reify:retireShallow Completed in 1ms
129 timing reify:rollback:createSparse Completed in 0ms
130 timing reify:rollback:retireShallow Completed in 0ms
131 timing command:install Completed in 3098ms
132 verbose stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/chrome-extension-cli'
133 verbose cwd /Users/mac/Code/Personal/ext-autoposter
134 verbose Darwin 21.6.0
135 verbose node v20.11.1
136 verbose npm v10.2.4
137 error code EACCES
138 error syscall mkdir
139 error path /usr/local/lib/node_modules/chrome-extension-cli
140 error errno -13
141 error [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/chrome-extension-cli'] {
141 error errno: -13,
141 error code: 'EACCES',
141 error syscall: 'mkdir',
141 error path: '/usr/local/lib/node_modules/chrome-extension-cli'
141 error }
142 error
142 error The operation was rejected by your operating system.
142 error It is likely you do not have the permissions to access this file as the current user
142 error
142 error If you believe this might be a permissions issue, please double-check the
142 error permissions of the file and its containing directories, or try running
142 error the command again as root/Administrator.
143 verbose exit -13
144 timing npm Completed in 3213ms
145 verbose unfinished npm timer reify 1712253076002
146 verbose unfinished npm timer reify:createSparse 1712253079096
147 verbose code -13
148 error A complete log of this run can be found in: /Users/mac/.npm/_logs/2024-04-04T17_51_15_887Z-debug-0.log
@dutiyesh Hi, just found this awesome tool!
Are you planning to add WebExtensions support, to enable cross-browser plugin development?
Getting this when creating a project. Is it just stray text in index.js?
/usr/local/lib/node_modules/chrome-extension-cli/index.js:123 ...appDetails, ^^^ SyntaxError: Unexpected token ...
The getting started instructions are not working for me.
❯ npm install -g chrome-extension-cli
added 21 packages, and audited 22 packages in 518ms
found 0 vulnerabilities
❯ chrome-extension-cli test-chrome-extension
zsh: command not found: chrome-extension-cli
Can you help?
Thanks for the great tool.
One question. Is it possible to import a newly installed library?
I want to use @google-cloud/speech
npm install --save @google-cloud/speech
Thank you.
I have figured out how to use vue3 in chrome extension + webpack. hope it can be added as a template.
only vue.runtime.esm-bundler.js
can work since Chrome MV3 cannot do eval or inline scripting.
SFC will be translated into js, html & css so it can work greatly with MV3.
webpack.config.js
VueLoaderPlugin
webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true })
.vue
(by vue-loader
)resolve.alias.vue$
= vue.runtime.esm-bundler.js
is required.'use strict';
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const PATHS = require('./paths');
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
// Merge webpack configuration files
const config = (env, argv) =>
merge(common, {
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
compatConfig: {
MODE: 3,
},
},
},
},
],
},
entry: {
popup: PATHS.src + '/popup.js',
contentScript: PATHS.src + '/contentScript.js',
background: PATHS.src + '/background.js'
},
devtool: argv.mode === 'production' ? false : 'source-map',
plugins:[
new VueLoaderPlugin(),
new webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true }),
],
resolve:{
alias: {
vue$: "vue/dist/vue.runtime.esm-bundler.js"
}
}
});
module.exports = config;
App.vue
<template>
<div>
<h1>{{message}}</h1>
<p><input v-model="message"></p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
created() {
this.message = 'hello';
}
}
</script>
popup.js
.js
file. This is just to load the App
from App.vue
'use strict';
import { createApp } from "vue";
import App from "./App.vue";
function onReady() {
createApp(App).mount('#app');
}
if (document.readyState !== 'loading') {
onReady();
} else {
document.addEventListener("DOMContentLoaded", onReady, false);
}
popup.html
div#app
is required and popup.js
will load the App.vue
into it.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="popup.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
The sidePanel
API is not recognized in the current version of @types/chrome
.
Sorry, I just misunderstood the use of "entry" in the config.
Especially for TypeScript version, is there any in-built or low configuration way to setup unit testing?
I have a html file template, The template is to dynamically fill in the data ,but an error occurs when packaging.
The template might look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="article__content">{{ content }}</div>
</body>
</html>
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html>
| <html>
| <head>
I hope to support html file packaging. Although I paste it directly into the build folder, it can also be read
When trying to load the extension I get this error!
Could not load javascript 'contentScript.js' for content script.
Could not load manifest.
Hi,
Thank you for an excellent starting point for creating an extension.
I noticed that if I start from a browser without my new extension installed and with open pages, load the extension, and then try to use it on these "old" pages, I see this error in the Extensions page:
Which corresponds to this error in the popup's console:
It also happens if I reload the extension when an unpacked extension has been unpacked, and I presume the same thing would happen when the extension gets upgraded after having been installed properly.
As pointed out in this answer the problem is that the "old" pages that were loaded before the extension got installed/reloaded have not been reloaded, so the content script is not present on the pages. This was confirmed by seeing the symptom disappear after I had reloaded the page and then tried using the extension again.
I'm guessing a real fix - making the extension work on all pre-existing pages after installation/reloading - isn't possible.
If I make this diff to my vanilla extension:
diff --git a/src/popup.js b/src/popup.js
index 40f4448..0adb6f5 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -71,11 +71,12 @@ import './popup.css';
payload: {
count: newCount,
},
- },
- (response) => {
- console.log('Current count value passed to contentScript file');
}
- );
+ ).then((response) => {
+ console.log('Current count value passed to contentScript file', response);
+ }).catch((error) => {
+ console.log('Error passing current count value to contentScript file', error);
+ })
});
});
});
Now I see this in the popup's console:
Error passing current count value to contentScript file Error: Could not establish connection. Receiving end does not exist.'}
and no error in the extension page. Still not perfect. But a little better.
Better error handling for all three invocations of sendMessage
methods seems like a good idea in any event (pun intended). See chrome.tabs.sendMessage
and chrome.runtime.sendMessage
I means something we just want to init a extension at current directory.Sometimes, wo will make a root directory by ourself.Thanks.
I created a js file, added the source code of jquery 3.6.0 and a function
(function () {
// source code of jquery 3.6.0
/*!
* jQuery JavaScript Library v3.6.0
* https://jquery.com/
*
* Includes Sizzle.js
* https://sizzlejs.com/
*
* Copyright OpenJS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2021-03-02T17:08Z
*/
( function( global, factory ) {
"use strict";
if ( typeof module === "object" && typeof module.exports === "object" ) {
// For CommonJS and CommonJS-like environments where a proper `window`
// is present, execute the factory and get jQuery.
// For environments that do not have a `window` with a `document`
// (such as Node.js), expose a factory as module.exports.
// This accentuates the need for the creation of a real `window`.
// e.g. var jQuery = require("jquery")(window);
// See ticket #14549 for more info.
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
***Most of the source code is omitted in the middle to avoid too long content***
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === "undefined" ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
} );
(function () {
window.jQuerySG = jQuery.noConflict(true);
}).call(this);
})()
When I load this file in the browser, Inside this function I can't get the jQuery object
(function () {
window.jQuerySG = jQuery.noConflict(true);
}).call(this);
When I don't use this scaffolding, I can get the jQuery object normally in the browser, please take a look what is the reason,Thanks
I don't want a popup but when I delete the files and remove all mentions of it in the code I get ERROR in popup Module not found: Error: ...
with npm run watch
. Is it possible to create an extension with for example a blank template?
These are the steps I did:
Step 1:
npm install -g chrome-extension-cli
chrome-extension-cli my-extension
cd my-extension
npm install webdriver
npm run build
Step 2:
Go to my-extension/src/contentScript.js and add below line in it and delete everything that is already there:
const driver = require("webdriver");
Step 3:
Run the command npm run build
and it fails with all these missing dependencies errors(just showing 2 errors out of 20):
ERROR in ./node_modules/cacheable-lookup/source/index.js
Module not found: Error: Can't resolve 'dns' in '/Users/john/workspace/chrome-extension-cli/my-extension/node_modules/cacheable-lookup/source'ERROR in ./node_modules/@wdio/config/build/lib/FileSystemPathService.js
Module not found: Error: Can't resolve 'fs' in '/Users/john/workspace/chrome-extension-cli/my-extension/node_modules/@wdio/config/build/lib'
I am totally new to webpack, babel and all that stuff and my understanding was that your cli was going to make it easy for situations like this.
What is the recommended approach in this case?
I don't think this technically qualifies as an issue but I wanted your input on how to proceed from here. Thanks!
I need the extension to modify a website and become a complement to it, such as adding new buttons to the menu or even creating a menu on a third-party website
PS F:\test> npm run watch
> [email protected] watch F:\test
> ./node_modules/webpack/bin/webpack.js --mode=development --watch --config config/webpack.config.js
'.' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: `./node_modules/webpack/bin/webpack.js --mode=development --watch --config config/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch 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! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-12-12T05_37_32_606Z-debug.log
PS F:\test>
Used the CLI to generate a new project and installed an npm package that has dependencies. On running the extension, the npm package is loaded but its dependencies throw a 'not found' error.
Current build output still includes source map files, which is unnecessary.
I would like to create a PR for this.
there are popups, options page, side panels, etc. on the readme, but no content script example. could you share some?
Hello,
Thank you for this tool, and for the Typescript update you just merged
Issue:
When I create a new project using the extension, NPM warns about 5 critical security bugs.
The solution:
Update webpack to v5
Update webpack-cli to latest
update other webpack plugins
Remove size-plugin (incompatibility with webpack 5) and use Webpack stats instead
Breaking changes:
Other than the size-plugin, there are no breaking changes, and everything should work as expected.
Hello world, from the README:
//...........
% cd my-extension
% npm run watch
npm ERR! Missing script: "watch"
I thought I needed to update so I manually downloaded and installed the latest release from this repo, and I kept seeing Share#K
with the # being the dislikes. I checked a video I KNOW has a 2:1 dislike to like ratio (iilluminaughtii's "apology" career-ending video), and sure enough it IS the dislikes that are being shown in the wrong place:
Since Chrome Beta 114, sidePanel is added as extension API.
Will it be supported in this CLI?
https://developer.chrome.com/docs/extensions/reference/sidePanel/
Taking this for a quick spin and running into an error when running npm run watch
Node 14.5.0
Npm 7.16.0
macOS 12.6
[webpack-cli] HookWebpackError: Only file and data URLs are supported by the default ESM loader
at makeWebpackError (/Users/mikee/Documents/code/litterbox/my-extension/node_modules/webpack/lib/HookWebpackError.js:48:9)
at /Users/mikee/Documents/code/litterbox/my-extension/node_modules/webpack/lib/Compilation.js:3060:12
at eval (eval at create (/Users/mikee/Documents/code/litterbox/my-extension/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
at /Users/mikee/Documents/code/litterbox/my-extension/node_modules/webpack/lib/Compilation.js:510:26
at /Users/mikee/Documents/code/litterbox/my-extension/node_modules/copy-webpack-plugin/dist/index.js:708:13
-- inner error --
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
at Loader.resolve (internal/modules/esm/loader.js:82:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:226:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
at link (internal/modules/esm/module_job.js:50:36)
caused by plugins in Compilation.hooks.processAssets
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
at Loader.resolve (internal/modules/esm/loader.js:82:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:226:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
at link (internal/modules/esm/module_job.js:50:36)
Is it possible to use this for Chrome Extensions that use more than a single content script? What if I wanted to add an npm package?
Hello,
First of all thanks a lot for this awesome cli!
I am facing an issue (I think...) , any change that I made on background.js needs a "Update" from the Extensions page. In the other hand, any change in other html or js file do not need the refresh and are auto updated on the browser.
Any ideas?
Thanks!!
I have long gone from Webpack, and it will be perfect if a typescript config is provided for someone who don't want to do the configuration.
Not sure what I am missing but I am trying to use import
syntax which I see in places of your generated code to import puppeteer
:
Receiving this error in the popup's console:
And also this error in the terminal:
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/agent-base/dist'
ERROR in ./node_modules/basic-ftp/dist/Client.js 6:14-28
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/basic-ftp/dist'
ERROR in ./node_modules/basic-ftp/dist/FtpContext.js 4:14-28
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/basic-ftp/dist'
ERROR in ./node_modules/basic-ftp/dist/netUtils.js 4:14-28
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/basic-ftp/dist'
ERROR in ./node_modules/basic-ftp/dist/transfer.js 6:14-28
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/basic-ftp/dist'
ERROR in ./node_modules/cosmiconfig/dist/loaders.js 74:21-42
Module not found: Error: Can't resolve 'typescript' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/cosmiconfig/dist'
ERROR in ./node_modules/cosmiconfig/dist/loaders.js 103:28-48
Module not found: Error: Can't resolve 'typescript' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/cosmiconfig/dist'
ERROR in ./node_modules/http-proxy-agent/dist/index.js 30:25-39
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/http-proxy-agent/dist'
ERROR in ./node_modules/http-proxy-agent/dist/index.js 31:25-39
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/http-proxy-agent/dist'
ERROR in ./node_modules/https-proxy-agent/dist/index.js 30:25-39
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/https-proxy-agent/dist'
ERROR in ./node_modules/https-proxy-agent/dist/index.js 31:25-39
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/https-proxy-agent/dist'
ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js 3:15-32
Module not found: Error: Can't resolve 'module' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/import-fresh/node_modules/resolve-from'
ERROR in ./node_modules/pac-proxy-agent/dist/index.js 30:25-39
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/pac-proxy-agent/dist'
ERROR in ./node_modules/pac-proxy-agent/dist/index.js 31:25-39
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/pac-proxy-agent/dist'
ERROR in ./node_modules/pac-resolver/dist/myIpAddress.js 7:30-44
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/pac-resolver/dist'
ERROR in ./node_modules/pac-resolver/dist/util.js 4:14-28
Module not found: Error: Can't resolve 'dns' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/pac-resolver/dist'
ERROR in ./node_modules/socks-proxy-agent/dist/index.js 33:25-39
Module not found: Error: Can't resolve 'dns' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/socks-proxy-agent/dist'
ERROR in ./node_modules/socks-proxy-agent/dist/index.js 34:25-39
Module not found: Error: Can't resolve 'tls' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/socks-proxy-agent/dist'
ERROR in ./node_modules/socks/build/client/socksclient.js 14:12-26
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/socks/build/client'
ERROR in ./node_modules/socks/build/common/helpers.js 8:12-26
Module not found: Error: Can't resolve 'net' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/socks/build/common'
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/CLI.js 7:0-37
Module not found: Error: Can't resolve 'readline' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/@puppeteer/browsers/lib/esm'
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/fileUtil.js 6:0-42
Module not found: Error: Can't resolve 'child_process' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/@puppeteer/browsers/lib/esm'
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/httpUtil.js 31:14-30
export 'urlToHttpOptions' (imported as 'urlToHttpOptions') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/httpUtil.js 39:28-31
export 'URL' (imported as 'URL') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/install.js 7:0-42
Module not found: Error: Can't resolve 'child_process' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/@puppeteer/browsers/lib/esm'
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/launch.js 6:0-41
Module not found: Error: Can't resolve 'child_process' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/@puppeteer/browsers/lib/esm'
ERROR in ./node_modules/@puppeteer/browsers/lib/esm/launch.js 9:0-32
Module not found: Error: Can't resolve 'readline' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/@puppeteer/browsers/lib/esm'
ERROR in ./node_modules/puppeteer-core/lib/esm/puppeteer/node/ScreenRecorder.js 44:0-49
Module not found: Error: Can't resolve 'child_process' in '/Users/idelduca/Projects/kindle-my-recipes-ext/node_modules/puppeteer-core/lib/esm/puppeteer/node'
ERROR in ./node_modules/yargs/lib/platform-shims/esm.mjs 20:14-27
export 'fileURLToPath' (imported as 'fileURLToPath') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)
2024-09-01 15:14:19: webpack compiled```
It claims it can't resolve the package which in turn is causing that cascade. I thought NPM modules were supported with `import` syntax out of the box? What am I doing wrong? Do you need any other info from me? Please advise.
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.