debdut / browser-extension Goto Github PK

Browser Extension Template with ESbuild builds, support for React, Preact, Typescript, Tailwind, Manifest V3/V2 support and multi browser build including Chrome, Firefox, Safari, Edge, Brave.

License: MIT License

JavaScript 0.60% TypeScript 87.38% CSS 8.18% HTML 3.84%

boilerplate chrome-extension postcss preact starter starter-kit template

browser-extension's People

Contributors

Stargazers

Watchers

Forkers

ykankaya fayazmiraz triptych phbou72 alient filipgorczynski psiinon eternalerrors littlepoolshark fifijo sp1ke77 ionicneoma-package masiskar burtharris chadbailey shakahl taoalpha andreapravato nascarsayan hasokeric rtcms spaceblocks qqqzhch wooodhead creatikme rdwz gangulabs chenyusheng prompt-genius broven sebastiancichos keyzf louisinfin8 ganobrega jleslie02 excellent-web joelvaneenwyk moaazsidat khoroshevj elektracodes maxhot donybin dipsylala pascalnoisette phanhavn lokeshjonnakuti brunubarbosa pieterjongsma

browser-extension's Issues

ERR_UNKNOWN_FILE_EXTENSION

Just installed the template, and run npm install. I'm receiving the following error upon start or build. Not sure what's causing it, I have everything installed and have build Chrome extensions on my machine separately with React and TS.

 npm run build chrome

> [email protected] build
> ts-node-esm scripts/build.ts chrome

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /<project-path>/scripts/build.ts
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
    at defaultLoad (node:internal/modules/esm/load:91:20)
    at nextLoad (node:internal/modules/esm/hooks:733:28)
    at load (/Users/deogan/Documents/leetcode-hinter/node_modules/ts-node/dist/child/child-loader.js:19:122)
    at nextLoad (node:internal/modules/esm/hooks:733:28)
    at Hooks.load (node:internal/modules/esm/hooks:377:26)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:168:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:778:20) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Every time I save the popup I get error: file can not be accessed

Your file couldn’t be accessedIt may have been moved, edited or deleted. ERR_FILE_NOT_FOUND

Then I have to stop the server and start it again and then the popup shows the update. What am I doing wrong here?
I followed the steps:

# Install packages
npm install

# Live Dev for multiple browsers
npm run start [browser]
# npm run start brave

I've even tried to do a build and then npm run start brave again, but that does change either. Would appreciate any help.
This is a great boilerplate

Unable to run extension since switching to esbuild from vite

Using the default template I'm unable to load the extension in to any chromium based browser

Steps to reproduce

Check out repository at commit d6a4225
npm install
npm run start chrome

Expected Outcome
Extension loads in the Chrome browser

Actual Outcome
Chrome displays an error when it launches Failed to load extenion from {dist}. Could not load Javascript '' for content script

Workaround

Revert to commit a49bc54 when it was using Vite.
npm install
npm run start chrome
Browser launches with no errors and extension is loaded

pcss vs css and tailwind integration

What is the difference between pcss and CSS, in the way it is used in the code?
And you have tailwindcss, and I don't see it in the code. Can you give an example of using tailwind with content script, and shadow house + CSS modules, for components?

Fix build on windows platform

Wow! I've been looking for a template like this. It has more than I could have hoped for. Thank you.

The build scripts in package.json currently don't work on Windows, and the fix is simple. There are well-known npm packages to solve them. cross-env, mkdirp, and rimraf are cross-platform replacements for just such occasions.

I want to contribute back, so I'll try to submit a PR shortly.

ERR_FEATURE_UNAVAILABLE_ON_PLATFORM

Hi @Debdut , the latest commit is throwing this error when we run npm run start BROWSER command. It was running during the previous vite build.

TypeError [ERR_FEATURE_UNAVAILABLE_ON_PLATFORM]: The feature watch recursively is unavailable on the current platform, which is being used to run Node.js

I have tried switching the Node.js versions to v16.17.0, v18.13.0. But it still doesn't work. Any idea on how to fix this?

Here is what I found on StackOverflow: https://stackoverflow.com/questions/61806341/how-to-fix-the-feature-watch-recursively-is-unavailable-on-the-current-platform

Problem using React component in content scripts

I have a problem using React components in content scripts. It seems to me that this is the most natural use of the script, in this case.

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)`

import { createRoot } from 'react-dom/client';
import Main from './Main';

const container = document.createElement('div')
const rootEl = document.createElement('div')
const styleEl = document.createElement('link')
const shadowDOM = container.attachShadow?.({ mode: 'open' }) || container
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', chrome.runtime.getURL('contentStyle.css'))
shadowDOM.appendChild(styleEl)

shadowDOM.appendChild(rootEl)
document.body.appendChild(container)

const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<Main/>);

How to solve it?

Package manager identifies warnings based on dependencies

npm install generates "high" vulnerabilities, but npm often creates false positives. Results when I tried:

npm WARN deprecated [email protected]: In 6. x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

added 1203 packages, and audited 1204 packages in 23s

116 packages are looking for funding
  run `npm fund` for details

12 vulnerabilities (9 moderate, 3 high)

I also tried with yarn as it usually generates fewer false positives. Yarn said:

warning " > [email protected]" has unmet peer dependency "postcss@^8.1.0".
warning " > [email protected]" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".
warning " > [email protected]" has unmet peer dependency "postcss@^8.0.9".
warning "web-ext > addons-linter > [email protected]" has unmet peer dependency "@types/[email protected]".
warning "web-ext > addons-linter > [email protected]" has unmet peer dependency "[email protected]".
warning "web-ext > addons-linter > [email protected]" has unmet peer dependency "[email protected]".
warning "web-ext > addons-linter > [email protected]" has unmet peer dependency "[email protected]".
warning "web-ext > addons-linter > [email protected]" has unmet peer dependency "[email protected]".

How to use the other pages

Is there any documentation on how to use each of the folders inside the pages? Like to use the bookmarks, panel etc?

Thanks in advance!

Manifest doesnt update after autoreload

Manifest doesnt update after autoreload, html file updated but manifest file refers to old file.

Tailwind in content scripts doesn't work

Does not generate tailwinds in content scripts. Styles don't load at all.
Manifest generation in build.ts does not work, how to solve:

  const fullPath = relative(
    extDir,
    resolve(pageDir, pageFile)
  )

  return fullPath.replace('\\', '/')

Tailwind on different pages will generate different problems when we don't use shadowDom. Therefore styles should be generated as a separate file. Like here:

import { createRoot } from 'react-dom/client';
import Main from './Main';

const container = document.createElement('div')
const rootEl = document.createElement('div')
const styleEl = document.createElement('link')
const shadowDOM = container.attachShadow?.({ mode: 'open' }) || container
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', chrome.runtime.getURL('contentStyle.css'))
shadowDOM.appendChild(styleEl)

shadowDOM.appendChild(rootEl)
document.body.appendChild(container)

const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<Main/>);

css modules in content scripts do not work.

Newtab Broken for V2

If I add the

  if (pages.indexOf("newtab") > -1) {
    manifest.chrome_url_overrides = {
      newtab: pageDirMap["newtab"],
    };
  }

from V3 (and the types) to V2, it works fine.

Both Conservancy and the Git project are aware that the initial branch name, ‘master’, is offensive to some people and we empathize with those hurt by the use of that term.

https://sfconservancy.org/news/2020/jun/23/gitbranchname/
https://github.com/github/renaming