dutiyesh / chrome-extension-cli Goto Github PK

Current build output still includes source map files, which is unnecessary.
I would like to create a PR for this.

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,

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 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

A lot of new extensions are providing a sidebar kind of interface for their extensions. Is this something that can be optimized globally for all websites or do you have to fine-tune it for each?

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.

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.

want to create a react project by this cli, for popup.html or options.html eg.

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:

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.

npm package dependencies

• "vue-loader@17" and "vue@next"

webpack.config.js

• plugins:
  • VueLoaderPlugin
  • webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true })
• rules:
  • .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

• It is the SFC file for HTML + JavaScript + CSS

<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

• MV3 requires the JavaScript to be run in .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

• It can be any html file. For simplicity, the file used is the popup page.
• 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>

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'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

Sorry, I just misunderstood the use of "entry" in the config.

Hi,

Thank you for an excellent starting point for creating an extension.

Symptom

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.

Problem

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.

(Partial?) Fix

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 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

Especially for TypeScript version, is there any in-built or low configuration way to setup unit testing?

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)

I means something we just want to init a extension at current directory.Sometimes, wo will make a root directory by ourself.Thanks.

The sidePanel API is not recognized in the current version of @types/chrome.

Hello world, from the README:

//...........

% cd my-extension
% npm run watch
npm ERR! Missing script: "watch"

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!

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/

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 ?

@dutiyesh Hi, just found this awesome tool!
Are you planning to add WebExtensions support, to enable cross-browser plugin development?

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?

there are popups, options page, side panels, etc. on the readme, but no content script example. could you share some?

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?

with typescript @types/chrome it will be easy to get the api of extension.

I noticed that optional chaining wasn't working (e.g. var.var?.var)

Realised that an outdated version of webpack was being used

Is there any chance we can update the cli to generate projects with the most recent version of webpack?

When trying to load the extension I get this error!

Could not load javascript 'contentScript.js' for content script.
Could not load manifest.

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

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 ...

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:

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.