cezaraugusto / extension.js Goto Github PK
View Code? Open in Web Editor NEW𧩠Plug-and-play, zero-config, cross-browser extension development tool.
Home Page: https://extension.js.org
License: MIT License
𧩠Plug-and-play, zero-config, cross-browser extension development tool.
Home Page: https://extension.js.org
License: MIT License
Hey, I found your project to be useful. I was wondering if there is a way to say template="tailwind" && template="content"
When the execution world for a content script is set to MAIN
, I notice the following error:
Uncaught Error: No chrome or browser runtime found
at get runtime (publicPath:3:1)
at publicPath:5:1
at publicPath:5:1
at startup:8:1
Invocation: publicPath:3
var runtime = isBrowser ? browser : isChrome ? chrome : (typeof self === 'object' && self.addEventListener) ? { get runtime() { throw new Error("No chrome or browser runtime found") } } : { runtime: { getURL: x => x } }
This is my manifest configuration:
{
"content_scripts": [
{
"matches": ["*://localhost/*"],
"js": ["./content.ts"],
"world": "MAIN"
}
],
}
I am guessing because chrome.runtime
is called internally by extension.js
inside the content script which doesn't support the extension APIs any longer since the content script executes in the page content when world is set to MAIN
.
Link to content script configuration documentation: https://developer.chrome.com/docs/extensions/reference/manifest/content-scripts
No matter what I do, I cannot seem to get the thing to launch. I am consistently rebuked by an error informing me that its preferred localhost address is already in use. I experience this same effect with or without the --port
flag, including after a clean boot, with literally no other web processes in use (see attached imagery below).
As you can see from the stack trace, I'm not seeing anything that would be a whole lotta help (though I have no issues spinning up servers through any other means, including atop 8000).
Any ideas?
I'm running on Wayland (GNOME 45.2)/Ubuntu 23.10, on a 12-core Intel i7 10750H with 32GB of memory, and well over a half terabyte free. Active shell is Bash v.5.2.15, npm is at v10.5.0, and node is on v20.9.0 (lts/iron).
I am new in npx, can anyone help me with this.
I am getting this on execution of npx extension-create start
npm ERR! cb.apply is not a function npm ERR! A complete log of this run can be found in: npm ERR! /home/ashutosh/.npm/_logs/2021-07-29T22_36_15_037Z-debug.log Install for [ 'extension-create@latest' ] failed with code 1
node --verison: 16.4.2
npx --verison : 10.2.2
Using npx extension-create --template chrome/analytics
would resolve to https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/tutorials/analytics which we then download a copy. In this case, the project name can be optional as we can fallback to the sample name.
Installation fails on Windows because of the usage of UNIX-only executable "sh"
'sh' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] preinstall: `sh preinstall.sh`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] preinstall 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\s-che\AppData\Roaming\npm-cache\_logs\2021-03-02T15_17_57_063Z-debug.log
Install for [ 'extension-create@latest' ] failed with code 1
I just released webpack-run-edge-extension
that can allow us to support Edge as well without polyfills. The work needed is to add a reasonable API and to allow developers to work on both Chrome and Edge at the same time.
Originally posted by jolo-dev May 11, 2024
To my shame, I don't use Chrome but another Chromium-based browser (Arc or Brave). Is there a possibility to use them instead?
If not, how about making the --browser
more generic and pointing to the path of the browser?
There are a few undocumented bugs/workarounds to make global extension reload that need to be listed and patched. This is for the future.
Would be nice to allow extension developers to access which is the current browser and whether we are in development/production mode.
.env
files based on current mode, namely .env.local
, .env.production
and .env.development
..env
files based on browser vendor, namely .env.edge
, .env.safari
, etc.I'm trying to use a third party package that uses node apis like buffer, http etc. Is there a way i can include polyfill for these node apis?
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }. Make sure to import the file correctly and that it exists in your extension's directory.
Auto option (correct flag TBD) should trigger both create
and run
commands, and kickoff a new browser instance immediately after the command.
There are some color patterns we should follow. For the CLI to have a unified style language, we should first populate each plugin's "messages" file with what we output to the terminal and go from there.
Due to symlink bugs. See output:
npm ERR! code EEXIST
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/extension-create/cli.js
npm ERR! dest /usr/local/bin/extension-create
npm ERR! errno -17
npm ERR! EEXIST: file already exists, symlink '../lib/node_modules/extension-create/cli.js' -> '/usr/local/bin/extension-create'
npm ERR! File exists: /usr/local/bin/extension-create
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/cezar/.npm/_logs/2021-01-27T13_37_52_386Z-debug.log
STR:
yarn extension-create HELLO
As the title says.
I'm happy to help with a bit of guidance. Just let me know more or less where the feature relevant code lives!
Ref: https://github.com/GoogleChrome/chrome-extensions-samples
Index | Done | MV | Source | Name |
---|---|---|---|---|
0 | β | 3 | src | chrome-api-samples/action |
1 | β³ | 3 | src | chrome-api-samples/alarms |
2 | β | 3 | src | chrome-api-samples/bookmarks |
3 | β | 3 | src | chrome-api-samples/browsingData |
4 | β | 3 | src | chrome-api-samples/contentSettings |
5 | β | 3 | src | chrome-api-samples/contextMenus/basic |
6 | β | 3 | src | chrome-api-samples/contextMenus/global_context_search |
7 | β³ | 3 | src | chrome-api-samples/cookies |
8 | β | 3 | src | chrome-api-samples/debugger |
9 | β | 3 | src | chrome-api-samples/declarativeNetRequest/no-cookies |
10 | β³ | 3 | src | chrome-api-samples/declarativeNetRequest/url-blocker |
11 | β | 3 | src | chrome-api-samples/declarativeNetRequest/url-redirect |
12 | β | 3 | src | chrome-api-samples/default_command_override |
13 | β | 3 | src | chrome-api-samples/devtools/inspectedWindow |
14 | β | 3 | src | chrome-api-samples/devtools/panels |
15 | β | 3 | src | chrome-api-samples/favicon |
16 | β³ | 3 | src | chrome-api-samples/fontSettings/fontSettings Advanced |
17 | β | 3 | src | chrome-api-samples/fontSettings/fontSettings Basic |
18 | β | 3 | src | chrome-api-samples/history/historyOverride |
19 | β | 3 | src | chrome-api-samples/history/showHistory |
20 | β | 3 | src | chrome-api-samples/idle |
21 | β | 3 | src | chrome-api-samples/il8n |
22 | β | 3 | src | chrome-api-samples/omnibox/new-tab-search |
23 | β | 3 | src | chrome-api-samples/omnibox/simple-example |
24 | β | 3 | src | chrome-api-samples/override/blank_ntp |
25 | β³ | 3 | src | chrome-api-samples/power |
26 | β | 3 | src | chrome-api-samples/printing |
27 | β | 3 | src | chrome-api-samples/privacy |
28 | β³ | 3 | src | chrome-api-samples/readingList |
29 | β | 3 | src | chrome-api-samples/richNotification |
30 | β | 3 | src | chrome-api-samples/sandbox/sandbox |
31 | β | 3 | src | chrome-api-samples/sandbox/sandboxed-content |
32 | β³ | 3 | src | chrome-api-samples/scripting |
33 | β | 3 | src | chrome-api-samples/storage/stylizr |
34 | β | 3 | src | chrome-api-samples/tabCapture |
35 | β | 3 | src | chrome-api-samples/tabs/inspector |
36 | β | 3 | src | chrome-api-samples/tabs/pin |
37 | β³ | 3 | src | chrome-api-samples/tabs/screenshot |
38 | β | 3 | src | chrome-api-samples/tabs/zoom |
39 | β | 3 | src | chrome-api-samples/topSites/basic |
40 | β | 3 | src | chrome-api-samples/topSites/magic8ball |
41 | β | 3 | src | chrome-api-samples/userScripts |
42 | β³ | 3 | src | chrome-api-samples/web-accessible-resources |
43 | β | 3 | src | chrome-api-samples/webNavigation/basic |
44 | β³ | 3 | src | chrome-api-samples/webRequest/http-auth |
45 | β³ | 3 | src | chrome-api-samples/windows |
Index | Done | MV | Source | Name |
---|---|---|---|---|
0 | β³ | 2 | src | chrome-archive/apps/samples/analytics |
1 | β³ | 2 | src | chrome-archive/apps/samples/appengine-channelapi/app |
2 | β³ | 2 | src | chrome-archive/apps/samples/appsquare |
3 | β³ | 2 | src | chrome-archive/apps/samples/appview/embedded-app |
4 | β³ | 2 | src | chrome-archive/apps/samples/appview/host-app |
5 | β³ | 2 | src | chrome-archive/apps/samples/blink1 |
6 | β³ | undefined | src | chrome-archive/apps/samples/bluetooth-samples/battery-service-demo |
7 | β³ | undefined | src | chrome-archive/apps/samples/bluetooth-samples/device-info-demo |
8 | β³ | undefined | src | chrome-archive/apps/samples/bluetooth-samples/heart-rate-sensor |
9 | β³ | 2 | src | chrome-archive/apps/samples/calculator |
10 | β³ | 2 | src | chrome-archive/apps/samples/camera-capture |
11 | β³ | 2 | src | chrome-archive/apps/samples/clock |
12 | β³ | 2 | src | chrome-archive/apps/samples/context-menu |
13 | β³ | 2 | src | chrome-archive/apps/samples/dart |
14 | β³ | 2 | src | chrome-archive/apps/samples/desktop-capture |
15 | β³ | 2 | src | chrome-archive/apps/samples/dialog-element |
16 | β³ | 2 | src | chrome-archive/apps/samples/diff |
17 | β³ | 2 | src | chrome-archive/apps/samples/filesystem-access |
18 | β³ | 2 | src | chrome-archive/apps/samples/frameless-window |
19 | β³ | 2 | src | chrome-archive/apps/samples/gcm-notifications |
20 | β³ | 2 | src | chrome-archive/apps/samples/gdrive |
21 | β³ | 2 | src | chrome-archive/apps/samples/github-auth |
22 | β³ | 2 | src | chrome-archive/apps/samples/hello-world |
23 | β³ | 2 | src | chrome-archive/apps/samples/hello-world-sync |
24 | β³ | 2 | src | chrome-archive/apps/samples/hid |
25 | β³ | 2 | src | chrome-archive/apps/samples/identity |
26 | β³ | 2 | src | chrome-archive/apps/samples/image-edit |
27 | β³ | 2 | src | chrome-archive/apps/samples/instagram-auth |
28 | β³ | 2 | src | chrome-archive/apps/samples/io2012-presentation/helloworld |
29 | β³ | 2 | src | chrome-archive/apps/samples/io2012-presentation |
30 | β³ | 2 | src | chrome-archive/apps/samples/io2012-presentation/servo |
31 | β³ | 2 | src | chrome-archive/apps/samples/ioio |
32 | β³ | 2 | src | chrome-archive/apps/samples/keyboard-handler |
33 | β³ | 2 | src | chrome-archive/apps/samples/managed-in-app-payments |
34 | β³ | 2 | src | chrome-archive/apps/samples/manga-cam |
35 | β³ | 2 | src | chrome-archive/apps/samples/mdns-browser |
36 | β³ | 2 | src | chrome-archive/apps/samples/media-gallery |
37 | β³ | 2 | src | chrome-archive/apps/samples/messaging/app1 |
38 | β³ | 2 | src | chrome-archive/apps/samples/messaging/app2 |
39 | β³ | 2 | src | chrome-archive/apps/samples/messaging/extension |
40 | β³ | 2 | src | chrome-archive/apps/samples/mini-code-edit |
41 | β³ | 2 | src | chrome-archive/apps/samples/multicast |
42 | β³ | 2 | src | chrome-archive/apps/samples/one-time-payment |
43 | β³ | 2 | src | chrome-archive/apps/samples/optional-permissions |
44 | β³ | 2 | src | chrome-archive/apps/samples/parrot-ar-drone |
45 | β³ | 2 | src | chrome-archive/apps/samples/platform-title |
46 | β³ | 2 | src | chrome-archive/apps/samples/printing |
47 | β³ | 2 | src | chrome-archive/apps/samples/restarted-demo |
48 | β³ | 2 | src | chrome-archive/apps/samples/rich-notifications |
49 | β³ | 2 | src | chrome-archive/apps/samples/sandbox |
50 | β³ | 2 | src | chrome-archive/apps/samples/sandboxed-content |
51 | β³ | 2 | src | chrome-archive/apps/samples/serial/adkjs/app |
52 | β³ | 2 | src | chrome-archive/apps/samples/serial/espruino |
53 | β³ | 2 | src | chrome-archive/apps/samples/serial/ledtoggle |
54 | β³ | 2 | src | chrome-archive/apps/samples/serial-control-signals |
55 | β³ | 2 | src | chrome-archive/apps/samples/servo |
56 | β³ | 2 | src | chrome-archive/apps/samples/storage |
57 | β³ | 2 | src | chrome-archive/apps/samples/syncfs-editor |
58 | β³ | 2 | src | chrome-archive/apps/samples/systemInfo |
59 | β³ | 2 | src | chrome-archive/apps/samples/tasks |
60 | β³ | 2 | src | chrome-archive/apps/samples/tcpserver |
61 | β³ | 2 | src | chrome-archive/apps/samples/telnet |
62 | β³ | 2 | src | chrome-archive/apps/samples/text-editor |
63 | β³ | 2 | src | chrome-archive/apps/samples/todomvc |
64 | β³ | 2 | src | chrome-archive/apps/samples/tts |
65 | β³ | 2 | src | chrome-archive/apps/samples/udp |
66 | β³ | 2 | src | chrome-archive/apps/samples/url-handler |
67 | β³ | 2 | src | chrome-archive/apps/samples/usb/device-info |
68 | β³ | 2 | src | chrome-archive/apps/samples/usb/knob |
69 | β³ | 2 | src | chrome-archive/apps/samples/usb-label-printer |
70 | β³ | 2 | src | chrome-archive/apps/samples/weather |
71 | β³ | 2 | src | chrome-archive/apps/samples/web-store |
72 | β³ | 2 | src | chrome-archive/apps/samples/webgl-pointer-lock |
73 | β³ | 2 | src | chrome-archive/apps/samples/webserver |
74 | β³ | 2 | src | chrome-archive/apps/samples/websocket-server |
75 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/browser |
76 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/declarative-web-request |
77 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/insert-css |
78 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/local-resources |
79 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/multi-tab-browser |
80 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/new-window |
81 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/new-window-user-agent |
82 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/shared-script |
83 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/user-agent |
84 | β³ | 2 | src | chrome-archive/apps/samples/webview-samples/webview |
85 | β³ | 2 | src | chrome-archive/apps/samples/window-options |
86 | β³ | 2 | src | chrome-archive/apps/samples/window-state |
87 | β³ | 2 | src | chrome-archive/apps/samples/windows |
88 | β³ | 2 | src | chrome-archive/mv2/api/bookmarks/basic |
89 | β³ | 2 | src | chrome-archive/mv2/api/browserAction/make_page_red |
90 | β³ | 2 | src | chrome-archive/mv2/api/browserAction/print |
91 | β³ | 2 | src | chrome-archive/mv2/api/browserAction/set_icon_path |
92 | β³ | 2 | src | chrome-archive/mv2/api/browserAction/set_page_color |
93 | β³ | 2 | src | chrome-archive/mv2/api/browsingData/basic |
94 | β³ | 2 | src | chrome-archive/mv2/api/commands |
95 | β³ | 2 | src | chrome-archive/mv2/api/contentSettings |
96 | β³ | 2 | src | chrome-archive/mv2/api/contextMenus/basic |
97 | β³ | 2 | src | chrome-archive/mv2/api/contextMenus/event_page |
98 | β³ | 2 | src | chrome-archive/mv2/api/contextMenus/global_context_search |
99 | β³ | 2 | src | chrome-archive/mv2/api/cookies |
100 | β³ | 2 | src | chrome-archive/mv2/api/debugger/live-headers |
101 | β³ | 2 | src | chrome-archive/mv2/api/debugger/pause-resume |
102 | β³ | 2 | src | chrome-archive/mv2/api/default_command_override |
103 | β³ | 3 | src | chrome-archive/mv2/api/desktopCapture |
104 | β³ | 2 | src | chrome-archive/mv2/api/deviceInfo/basic |
105 | β³ | 2 | src | chrome-archive/mv2/api/devtools/network/chrome-firephp |
106 | β³ | 2 | src | chrome-archive/mv2/api/devtools/panels/chrome-query |
107 | β³ | 2 | src | chrome-archive/mv2/api/displaySource/tabCast |
108 | β³ | 2 | src | chrome-archive/mv2/api/document_scan |
109 | β³ | 2 | src | chrome-archive/mv2/api/downloads/download_filename_controller |
110 | β³ | 2 | src | chrome-archive/mv2/api/downloads/download_links |
111 | β³ | 2 | src | chrome-archive/mv2/api/downloads/download_manager |
112 | β³ | 2 | src | chrome-archive/mv2/api/downloads/download_open |
113 | β³ | 2 | src | chrome-archive/mv2/api/downloads/downloads_overwrite |
114 | β³ | 2 | src | chrome-archive/mv2/api/eventPage/basic |
115 | β³ | 2 | src | chrome-archive/mv2/api/extension/isAllowedAccess |
116 | β³ | 2 | src | chrome-archive/mv2/api/fileSystemProvider/archive |
117 | β³ | 2 | src | chrome-archive/mv2/api/fileSystemProvider/basic |
118 | β³ | 2 | src | chrome-archive/mv2/api/fontSettings |
119 | β³ | 2 | src | chrome-archive/mv2/api/history/historyOverride |
120 | β³ | 2 | src | chrome-archive/mv2/api/history/showHistory |
121 | β³ | 2 | src | chrome-archive/mv2/api/i18n/cld |
122 | β³ | 2 | src | chrome-archive/mv2/api/i18n/detectLanguage |
123 | β³ | 2 | src | chrome-archive/mv2/api/i18n/getMessage |
124 | β³ | 2 | src | chrome-archive/mv2/api/i18n/localizedHostedApp |
125 | β³ | 2 | src | chrome-archive/mv2/api/idle/idle_simple |
126 | β³ | 2 | src | chrome-archive/mv2/api/input.ime/basic |
127 | β³ | 2 | src | chrome-archive/mv2/api/messaging/timer |
128 | β³ | 2 | src | chrome-archive/mv2/api/nativeMessaging/app |
129 | β³ | 2 | src | chrome-archive/mv2/api/notifications |
130 | β³ | 2 | src | chrome-archive/mv2/api/omnibox/newtab_search |
131 | β³ | 2 | src | chrome-archive/mv2/api/omnibox/simple-example |
132 | β³ | 2 | src | chrome-archive/mv2/api/override/blank_ntp |
133 | β³ | 2 | src | chrome-archive/mv2/api/override/override_igoogle |
134 | β³ | 2 | src | chrome-archive/mv2/api/pageAction/pageaction_by_content |
135 | β³ | 2 | src | chrome-archive/mv2/api/pageAction/pageaction_by_url |
136 | β³ | 2 | src | chrome-archive/mv2/api/pageAction/set_icon |
137 | β³ | 2 | src | chrome-archive/mv2/api/permissions/extension-questions |
138 | β³ | 2 | src | chrome-archive/mv2/api/power |
139 | β³ | 2 | src | chrome-archive/mv2/api/preferences/allowThirdPartyCookies |
140 | β³ | 2 | src | chrome-archive/mv2/api/preferences/enableReferrer |
141 | β³ | 2 | src | chrome-archive/mv2/api/printing |
142 | β³ | 2 | src | chrome-archive/mv2/api/printingMetrics |
143 | β³ | 2 | src | chrome-archive/mv2/api/processes/process_monitor |
144 | β³ | 2 | src | chrome-archive/mv2/api/processes/show_tabs |
145 | β³ | 2 | src | chrome-archive/mv2/api/storage/stylizr |
146 | β³ | 2 | src | chrome-archive/mv2/api/tabCapture |
147 | β³ | 2 | src | chrome-archive/mv2/api/tabs/inspector |
148 | β³ | 2 | src | chrome-archive/mv2/api/tabs/pin |
149 | β³ | 2 | src | chrome-archive/mv2/api/tabs/screenshot |
150 | β³ | 2 | src | chrome-archive/mv2/api/tabs/zoom |
151 | β³ | 2 | src | chrome-archive/mv2/api/topsites/basic |
152 | β³ | 2 | src | chrome-archive/mv2/api/topsites/magic8ball |
153 | β³ | 2 | src | chrome-archive/mv2/api/ttsEngine/console_tts_engine |
154 | β³ | 2 | src | chrome-archive/mv2/api/water_alarm_notification |
155 | β³ | 2 | src | chrome-archive/mv2/api/webNavigation/basic |
156 | β³ | 2 | src | chrome-archive/mv2/api/webview/capturevisibleregion |
157 | β³ | 2 | src | chrome-archive/mv2/api/webview/comm_demo_app |
158 | β³ | 2 | src | chrome-archive/mv2/api/webview/comm_demo_ext |
159 | β³ | 2 | src | chrome-archive/mv2/api/windows/merge_windows |
160 | β³ | 2 | src | chrome-archive/mv2/extensions/app_launcher |
161 | β³ | 2 | src | chrome-archive/mv2/extensions/buildbot |
162 | β³ | 2 | src | chrome-archive/mv2/extensions/calendar |
163 | β³ | 2 | src | chrome-archive/mv2/extensions/catblock |
164 | β³ | 2 | src | chrome-archive/mv2/extensions/catifier |
165 | β³ | 2 | src | chrome-archive/mv2/extensions/chrome_search |
166 | β³ | 2 | src | chrome-archive/mv2/extensions/constant_context |
167 | β³ | 2 | src | chrome-archive/mv2/extensions/download_images |
168 | β³ | 2 | src | chrome-archive/mv2/extensions/email_this_page |
169 | β³ | 2 | src | chrome-archive/mv2/extensions/fx |
170 | β³ | undefined | src | chrome-archive/mv2/extensions/gdocs |
171 | β³ | 2 | src | chrome-archive/mv2/extensions/gmail |
172 | β³ | 2 | src | chrome-archive/mv2/extensions/imageinfo |
173 | β³ | 2 | src | chrome-archive/mv2/extensions/irc/app |
174 | β³ | 2 | src | chrome-archive/mv2/extensions/managed_bookmarks |
175 | β³ | 2 | src | chrome-archive/mv2/extensions/mappy |
176 | β³ | 2 | src | chrome-archive/mv2/extensions/maps_app |
177 | β³ | undefined | src | chrome-archive/mv2/extensions/news |
178 | β³ | 2 | src | chrome-archive/mv2/extensions/news_a11y |
179 | β³ | 2 | src | chrome-archive/mv2/extensions/news_i18n |
180 | β³ | 2 | src | chrome-archive/mv2/extensions/no_cookies |
181 | β³ | 2 | src | chrome-archive/mv2/extensions/oauth_contacts |
182 | β³ | 2 | src | chrome-archive/mv2/extensions/optional_permissions |
183 | β³ | 2 | src | chrome-archive/mv2/extensions/plugin_settings |
184 | β³ | 2 | src | chrome-archive/mv2/extensions/proxy_configuration |
185 | β³ | 2 | src | chrome-archive/mv2/extensions/speak_selection |
186 | β³ | 2 | src | chrome-archive/mv2/extensions/talking_alarm_clock |
187 | β³ | 2 | src | chrome-archive/mv2/extensions/ttsdebug |
188 | β³ | 2 | src | chrome-archive/mv2/extensions/ttsdemo |
189 | β³ | 2 | src | chrome-archive/mv2/howto/sandbox |
190 | β³ | 2 | src | chrome-archive/mv2/howto/tab_shortcuts |
191 | β³ | 2 | src | chrome-archive/mv2/tutorials/analytics |
192 | β³ | 2 | src | chrome-archive/mv2/tutorials/broken_background_color |
193 | β³ | 2 | src | chrome-archive/mv2/tutorials/get_started |
194 | β³ | 2 | src | chrome-archive/mv2/tutorials/get_started_complete |
195 | β³ | 2 | src | chrome-archive/mv2/tutorials/getstarted |
196 | β³ | 2 | src | chrome-archive/mv2/tutorials/hello_extensions |
197 | β³ | 2 | src | chrome-archive/mv2/tutorials/oauth_starter |
198 | β³ | 2 | src | chrome-archive/mv2/tutorials/oauth_tutorial_complete |
Index | Done | MV | Source | Name |
---|---|---|---|---|
0 | β³ | 3 | src | chrome-functional-samples/cookbook.file_handlers |
1 | β³ | 3 | src | chrome-functional-samples/cookbook.geolocation-contentscript |
2 | β³ | 3 | src | chrome-functional-samples/cookbook.geolocation-offscreen |
3 | β³ | 3 | src | chrome-functional-samples/cookbook.geolocation-popup |
4 | β³ | 3 | src | chrome-functional-samples/cookbook.offscreen-clipboard-write |
5 | β³ | 3 | src | chrome-functional-samples/cookbook.offscreen-dom |
6 | β³ | 3 | src | chrome-functional-samples/cookbook.push |
7 | β | 3 | src | chrome-functional-samples/cookbook.sidepanel-global |
8 | β | 3 | src | chrome-functional-samples/cookbook.sidepanel-multiple |
9 | β | 3 | src | chrome-functional-samples/cookbook.sidepanel-open |
10 | β | 3 | src | chrome-functional-samples/cookbook.sidepanel-site-specific |
11 | β | 3 | src | chrome-functional-samples/cookbook.wasm-helloworld-print |
12 | β³ | 3 | src | chrome-functional-samples/cookbook.wasm-helloworld-print-nomodule |
13 | β | 3 | src | chrome-functional-samples/reference.mv3-content-scripts |
14 | β³ | 3 | src | chrome-functional-samples/sample.bookmarks |
15 | β | 3 | src | chrome-functional-samples/sample.catifier |
16 | β³ | 3 | src | chrome-functional-samples/sample.co2meter |
17 | β | 3 | src | chrome-functional-samples/sample.dnr-rule-manager |
18 | β | 3 | src | chrome-functional-samples/sample.favicon-cs |
19 | β | 3 | src | chrome-functional-samples/sample.milestones |
20 | β | 3 | src | chrome-functional-samples/sample.optional_permissions |
21 | β | 3 | src | chrome-functional-samples/sample.page-redder |
22 | β | 3 | src | chrome-functional-samples/sample.sidepanel-dictionary |
23 | β³ | 3 | src | chrome-functional-samples/sample.tabcapture-recorder |
24 | β³ | 3 | src | chrome-functional-samples/sample.water_alarm_notification |
25 | β | 3 | src | chrome-functional-samples/tutorial.broken-color |
26 | β | 3 | src | chrome-functional-samples/tutorial.focus-mode |
27 | β | 3 | src | chrome-functional-samples/tutorial.focus-mode-debugging |
28 | β | 3 | src | chrome-functional-samples/tutorial.getting-started |
29 | β | 3 | src | chrome-functional-samples/tutorial.google-analytics |
30 | β | 3 | src | chrome-functional-samples/tutorial.hello-world |
31 | β | 3 | src | chrome-functional-samples/tutorial.quick-api-reference |
32 | β | 3 | src | chrome-functional-samples/tutorial.reading-time |
33 | β³ | 3 | src | chrome-functional-samples/tutorial.tabs-manager |
34 | β | 3 | src | chrome-functional-samples/tutorial.websockets |
Hey! Love the project, amazing work!
I was wondering what the plans are for supporting UI that's injected into the current web page using shadow DOM or other isolation techniques. This is similar to Plasmo's Content Scripts UI.
My use case involves displaying a chatbot on specific websites and enhancing the experience.
We should update the example for creating a new extension on the following page:
https://extension.js.org/n/getting-started/create-your-first-extension/#step-1-create-the-extension
The example, for creating a extension, shows:
npx extension@latest github-search --template=init
I believe, it should be:
npx extension@latest create github-search --template=init
Howdy folks;
I have been developing with Extension JS and loving it. My only issue has been getting it to recognize the custom color theme I have (see below). I've tested this with a vanilla JS project and a NextJS project and this works for both of those.
popup/base.css
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.ts
import type { Config } from 'tailwindcss';
const {
default: flattenColorPalette,
} = require('tailwindcss/lib/util/flattenColorPalette');
const config: Config = {
content: [
'./**/*.{html,js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
primary: {
'50': 'hsl(180, 5%, 96%)',
'100': 'hsl(200, 6%, 90%)',
'200': 'hsl(204, 5%, 82%)',
'300': 'hsl(203, 5%, 69%)',
'400': 'hsl(205, 5%, 53%)',
'500': 'hsl(203, 5%, 47%)',
'600': 'hsl(204, 5%, 36%)',
'700': 'hsl(210, 5%, 31%)',
'800': 'hsl(210, 4%, 27%)',
'900': 'hsl(204, 4%, 24%)',
'950': 'hsl(210, 5%, 15%)',
},
secondary: {
50: "#FEF9EC",
100: "#FCF1D4",
200: "#F9E4A9",
300: "#F6D883",
400: "#F3CA58",
500: "#F0BC2D",
600: "#D6A10F",
700: "#A27A0C",
800: "#694F07",
900: "#342704",
950: "#1D1502"
},
},
fontFamily: {
ibm_plex: 'var(--font-ibm-plex-sans)',
}
},
},
plugins: [addVariablesForColors],
};
function addVariablesForColors({ addBase, theme }: any) {
let allColors = flattenColorPalette(theme('colors'));
let newVars = Object.fromEntries(
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);
addBase({
':root': newVars,
});
}
export default config;
In alpha versions we used to have a "--browsers=all" flag that would open all browser runners at once. We should re-enable that.
I have a custom JS script I'm separately building and including in my extension (outside of webpack).
If I include it in ./scripts/
, I get a $RefreshSig$ is not defined
error as I believe the webpack processing on top is causing a conflict.
If I include it in ./public/
, everything works great, but live reloading doesn't work and I have to restart the browser fully every time my script changes.
Ideally, I'd like for my custom JS (and other assets like images) to refresh without restarting the browser or throwing the webpack error.
No worries if out of scope, just figured I'd ask if there's an existing option or a bug I'm hitting βΒ I could feasibly work around this.
Thank you for the awesome tool!
It's outdated.
Most likely to be solved by a custom/external plugin.
Ref: https://github.com/mdn/webextensions-examples
Index | Done | MV | Source | Name |
---|---|---|---|---|
0 | β³ | 2 | src | mdn-all/annotate-page |
1 | β³ | 2 | src | mdn-all/apply-css |
2 | β³ | 2 | src | mdn-all/beastify |
3 | β³ | 2 | src | mdn-all/bookmark-it |
4 | β³ | 2 | src | mdn-all/borderify |
5 | β³ | 2 | src | mdn-all/chill-out |
6 | β³ | 2 | src | mdn-all/commands |
7 | β³ | 2 | src | mdn-all/content-script-register |
8 | β³ | 2 | src | mdn-all/context-menu-copy-link-with-types |
9 | β³ | 2 | src | mdn-all/contextual-identities |
10 | β³ | 2 | src | mdn-all/cookie-bg-picker |
11 | β³ | 2 | src | mdn-all/devtools-inspector-sidebar |
12 | β³ | 2 | src | mdn-all/devtools-panels |
13 | β³ | 2 | src | mdn-all/discogs-search |
14 | β³ | 3 | src | mdn-all/dnr-block-only |
15 | β³ | 3 | src | mdn-all/dnr-dynamic-with-options |
16 | β³ | 3 | src | mdn-all/dnr-redirect-url |
17 | β³ | 2 | src | mdn-all/dynamic-theme |
18 | β³ | 2 | src | mdn-all/emoji-substitution |
19 | β | 2 | src | mdn-all/eslint-example |
20 | β³ | 2 | src | mdn-all/export-helpers |
21 | β³ | 2 | src | mdn-all/favourite-colour |
22 | β³ | 2 | src | mdn-all/find-across-tabs |
23 | β³ | 2 | src | mdn-all/firefox-code-search |
24 | β³ | 2 | src | mdn-all/forget-it |
25 | β³ | 2 | src | mdn-all/google-userinfo |
26 | β³ | 2 | src | mdn-all/history-deleter |
27 | β³ | 2 | src | mdn-all/http-response |
28 | β³ | 2 | src | mdn-all/imagify |
29 | β³ | 2 | src | mdn-all/latest-download |
30 | β³ | 2 | src | mdn-all/list-cookies |
31 | β³ | 2 | src | mdn-all/menu-accesskey-visible |
32 | β³ | 2 | src | mdn-all/menu-demo |
33 | β³ | 2 | src | mdn-all/menu-labelled-open |
34 | β³ | 2 | src | mdn-all/menu-remove-element |
35 | β³ | 2 | src | mdn-all/menu-search |
36 | β | 2 | src | mdn-all/mocha-client-tests/addon |
37 | β³ | 2 | src | mdn-all/native-messaging/add-on |
38 | β³ | 2 | src | mdn-all/navigation-stats |
39 | β³ | 2 | src | mdn-all/notify-link-clicks-i18n |
40 | β³ | 2 | src | mdn-all/open-irc-links |
41 | β³ | 2 | src | mdn-all/open-my-page-button |
42 | β³ | 2 | src | mdn-all/page-to-extension-messaging |
43 | β³ | 2 | src | mdn-all/permissions |
44 | β³ | 2 | src | mdn-all/private-browsing-theme |
45 | β³ | 2 | src | mdn-all/proxy-blocker |
46 | β³ | 2 | src | mdn-all/quicknote |
47 | β³ | 2 | src | mdn-all/root-cert-stats |
48 | β³ | 2 | src | mdn-all/runtime-examples |
49 | β³ | 2 | src | mdn-all/selection-to-clipboard |
50 | β³ | 2 | src | mdn-all/session-state |
51 | β³ | 2 | src | mdn-all/store-collected-images/webextension-plain |
52 | β³ | 2 | src | mdn-all/store-collected-images/webextension-with-webpack/extension |
53 | β³ | 2 | src | mdn-all/stored-credentials |
54 | β³ | 2 | src | mdn-all/tabs-tabs-tabs |
55 | β³ | 2 | src | mdn-all/theme-integrated-sidebar |
56 | β³ | 2 | src | mdn-all/theme-switcher |
57 | β³ | 2 | src | mdn-all/themes/animated |
58 | β³ | 2 | src | mdn-all/themes/temp |
59 | β³ | 2 | src | mdn-all/themes/weta_fade |
60 | β³ | 2 | src | mdn-all/themes/weta_fade_chrome |
61 | β³ | 2 | src | mdn-all/themes/weta_mirror |
62 | β³ | 2 | src | mdn-all/themes/weta_tiled |
63 | β³ | 2 | src | mdn-all/top-sites |
64 | β³ | 2 | src | mdn-all/user-agent-rewriter |
65 | β³ | 2 | src | mdn-all/user-script-register |
66 | β³ | 2 | src | mdn-all/webpack-modules/addon |
67 | β³ | 2 | src | mdn-all/window-manipulator |
Such as options_page
.
In development, we often deal with storage and message passing. Can extension.js provide some methods to make the development process more efficient?
Message passing Β |Β Chrome Extensions Β |Β Chrome for Developers
https://developer.chrome.com/docs/extensions/develop/concepts/messaging
Reference:
vocably/hermes: Typesafe browser extension messaging created with Typescript
https://github.com/vocably/hermes
chrome.storage Β |Β API Β |Β Chrome for Developers
https://developer.chrome.com/docs/extensions/reference/api/storage
Reference:
https://webext-core.aklinker1.io/guide/storage/typescript.html
@extension-create/create and @extension-create/develop can benefit from some e2e tests. It should cover whatever we say we support in the documentation.
Currently, extension-create
is too heavy to run via npx
which is useful only for demonstration purposes. It's best to let users npm install -g extension-create
and add an update notification for when it needs update.
extension.d.ts
the path to the default types should be absolute.update-check
to handle package updates: https://www.npmjs.com/package/update-check.Integrate with https://github.com/cezaraugusto/webpack-run-edge-extension.
Add visual tools to show users how to develop HTML interfaces and add some other functionality to get users up-to-speed into development.
Create project
yes | npx extension@latest create test --template=content
service-worker.js
chrome.action.onClicked.addListener((tab) => { console.log("=111="); console.log("===================================="); chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ["./scripts/content.js"], }); });
content.js
import("../content.css"); console.log("===================================="); const blankDiv = document.createElement("div"); blankDiv.className = "content_script-area"; const title = document.createElement("h1"); title.className = "content_script-title"; title.textContent = "000"; blankDiv.appendChild(title); document.body.appendChild(blankDiv);
content.css
.content_script-title { font-size: 2.35em; color: #333; line-height: 1.1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; } .content_script-area { position: fixed; top: 50%; right: 80px; width: 400px; height: 70%; background-color: rgb(250, 8, 8); z-index: 1000; transform: translateY(-50%); }
Service Worker
service-worker.js:54 Could not resolve path ./scripts/content.js. Either add it to the "public" directory or create a script in the "scripts" directory.
actual effect
Code can produce results
xcrun safari-web-extension-converter
If the user has a content_script and decides to reload the tab, we lose HMR and need to fully reload the extension. This is a bug but needs investigation but not top priority at the moment.
If I try to use the Firefox-specific property theme_icons
of browser_action
in Chrome, I should receive a warning saying that it will have no effect in the current browser.
yarn extension-create test my-extension-hello
should be equivalent to running jest
in the project root.
Authenticating extensions with mainstream auth tools/platforms is surprisingly complex. Extension.js could have use/have some abstraction tool to make it easier to authenticate extensions with existing platforms/webapps.
I'd like to see what others think/use for this. At the moment of this writing there is one request for Supabase support in Extension.js (see discussion), but unlike Firebase, there seems to have no official support for authenticating extensions with their platform, so we'd need to either create a lib or patch existing user alternatives.
The styles in the vue-typescript template are missing.
npx extension create vue-ts-ext --template=vue-typescript
npm run start
It seems that bundling the CSS content_script along with the JS file is not enough for reloading the CSS files. A strategy can be appending these styles as dynamic imports into the .js files and targeting the CSS chunk names to where the manifest.json expects.
Include support for CSS, LESS, SASS, JSX, and all usual webpack loader options.
For some reason it isn't.
I'm trying to create a extension with typescript react template
npx extension create my-extension --template=react-typescript
I'm getting an error related to edge
node:internal/modules/cjs/loader:1147
throw err;
^
Error: Cannot find module 'webpack-run-edge-extension'
Require stack:
- /home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/@extension-create/develop/dist/module.js
- /home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/extension/dist/cli.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object.<anonymous> (/home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/@extension-create/develop/dist/module.js:10:10676)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/@extension-create/develop/dist/module.js',
'/home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/extension/dist/cli.js'
]
}
Node.js v20.11.0
I'm on ubuntu, so dont have edge browser installed
Versions
node: 20.11.0
npm 10.2.4
ubuntu: 22.04.1 LTS
Hi,
Great work !
I bumped into the same problem, but for the outlook extension.
Do you think it could be integrated to your repo ?
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.