jonghakseo / chrome-extension-boilerplate-react-vite Goto Github PK

Hey,

I cloned the repo and deleted the yarn.lock file as I was facing issues while installing node_modules.

after that as per the steps I run the yarn dev command.
this created a dist folder but the manifest.json was missing.

and because of that, I was getting this error while installing the extension

then I ran the yarn build command which created a manifest.json file successfully

Note: but on subsequent refresh, it creates the manifest.json

I don't understand how this works and I would appreciate it if you could help me.

I want the window to be in the middle of the page and have a specific width and height. How should I achieve this?

hello,

I can't seem to get the styles to work in the content script... Haven't really done much outside the boilerplate

the pages/content/style.scss

@import "@assets/style/theme.scss";
.content-view {
  font-size: 30px;
}
.clip-button {
  background: black;
  border-radius: 5px;
  width: 30px;
  height: 10px;
  position: absolute;
  z-index: 99;
}

the app: pages/content/components/Demo/app.tsx

import "../../style.scss";
...
return (
    <div
      className="clip-button"
      style={{
        top: pos.y,
        left: pos.x,
      }}
    />
  );

I had originally tried to have a separate style sheet within the Demo directory itself but that also didn't work- I saw a couple of issues here saying that there was a bit of manual work involved with the config to get extra style sheets to show up so I tried using the given style sheet and it still didn't work. I'd like to get the default given style sheet working before trying something more custom. I'm new to Vite but the examples online seems to just suggest you can import the sheet as you would normally.

I feel like something like this should be pretty straightforward but have been stuck on it for a few hours and can't really find anything related on the stackoverflow so I'm not sure where to start. Any help would be appreaciated!

I don't get any errors or anything... the styles just don't show up when I inspect in the browser

How to reproduce : clone the project, yarn + yarn dev, load in Chrome -> Unable to load the contentStyle16801943738.chunk.css file.
It's not present in the css dir in the dist.

With a previous version of the boilerplate on the main branch (March 8) it's working.

Steps to reproduce:

• Fork template (Create own GitHub repo from template)
• Clone repo locally
• Change package name and description
• Yarn install dependencies yarn or yarn i
• Yarn run dev yarn dev

Issue:

Build failed with the following error at the bottom of this console output.

yarn dev
yarn run v1.22.11
$ npm run build:hmr && (run-p wss build:watch)
npm WARN lifecycle The node binary used for scripts is /var/folders/t8/m7d61j4n0dd_vnmxhsq54jkw0000gn/T/yarn--1673178526850-0.09484755126173594/node but npm is using /opt/homebrew/Cellar/node@14/14.19.3/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected] build:hmr /Users/hussainfazaal/Experiments/phantasm
> rollup --config utils/reload/rollup.config.ts


utils/reload/initReloadServer.ts → utils/reload/initReloadServer.js...
created utils/reload/initReloadServer.js in 1.6s

utils/reload/injections/script.ts → utils/reload/injections/script.js...
created utils/reload/injections/script.js in 7ms

utils/reload/injections/view.ts → utils/reload/injections/view.js...
created utils/reload/injections/view.js in 6ms
$ node utils/reload/initReloadServer.js
$ __DEV__=true vite build --watch
[HRS] Server listening at ws://localhost:8081
vite v3.1.3 building for production...

watching for file changes...

build started...
transforming (22) src/pages/newtab/Newtab.tsx Manifest file copy complete: /Users/hussainfazaal/Experiments/phantasm/dist/manifest.json
✓ 23 modules transformed.
[vite:asset] Could not load /Users/hussainfazaal/Experiments/phantasm/src/assets/img/logo.svg (imported by src/pages/popup/Popup.tsx): dir.split(...).at is not a function
transforming (50) src/pages/panel/index.css

Can anyone help me resolve this issue?

Hey, I'm having one issue with background scripts (screen)

I want to check if SPA url is changed, to push message to my content scripts, because I'm getting data from storage on website, but after clicking other page and coming back, this data is no longer replaced

I'm adding many different listeners to background scripts, but it seems that noone of them is working, so I assume it's connected to problem from screenshot

Any idea how I could fix that issue?

Hello, thanks for the great boilerplate.

Everything works seamlessly, but I see 2 errors in the console. Looks like trying to load assets/js/index.js & assets/js/jsx-runtime.js from web page itself instead from extension.

Screenshot of github.com/...'s console.

Refused to load the script 'https://github.com/assets/js/index.js' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the script 'https://github.com/assets/js/jsx-runtime.js' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Thank you for your help.

Hi there,

Just started playing with this boilerplate and tried to update to vite 4. Looks like there are some configuration changes that break.

Sorry I am new to this.

I have a few functions inside content/index.ts and exporting them gives me an error. I want to call these functions inside my react components (lets say inside pages/popup/Popup.tsx)

I think I seem to generally not understand what the purpose of the content-view is because isn't it just supposed to be script? Where is the view actually rendered?

안녕하세요. 현재 Vue 프로젝트 파일을 React로 리팩터링 하는 중 입니다..

기존에 Vue 프로젝트에서 Background에서 사용 되던 코드를 재사용 하려고 붙여 넣었습니다.

vite로 bundling은 정상적으로 하는 것 같은데 Chrome Extension에서 자꾸 읽질 못하는 것 같습니다.

번들링된 패키지모듈을 크롬익스텐션에서 import할 방법이 있을까요?

utils/reload/initReloadServer.ts uses chokidar.watch() to watch for changes in dist.

The problem is that during npm run build:watch, the first thing that happens is that all the pre-existing files are unlinked, causing unlink, unlinkDir and change events from chokidar.watch(). Then the build process runs and eventually the new files are created causing add and addDir events.

But if the build takes more the 200ms the unlink events cause debounce() to expire causing ws.send() to send an update the the client (before the new files have been created). The client calls window.location.reload() and we get:

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

I've added an external package @commonninja/nindo-ui and then I run my build I got this error:

I have a question, why does the content script not work with any event listeners when using the

/**
 * @description
 * Chrome extensions don't support modules in content scripts.
 */
import("./components/Demo");

I have to comment out the code above for the block for the rest of the code below to work, how can I render a React element in the content script while also having these document event listeners working?

console.log("content loaded");

// /**
//  * @description
//  * Chrome extensions don't support modules in content scripts.
//  */
// import("./components/Demo");

console.log("THIS IS THE CONTENT SCRIPT GUYS");

function activityDetected(event) {
  if (event.type === "mousemove") {
    console.log("mouse has moved");
  } else if (event.type === "blur") {
    console.log("window has blurred");
  } else if (event.type === "visibilitychange") {
    console.log("visibility has changed");
  } else if (event.type === "keydown") {
    console.log("key was pressed");
  }

  if (!userIsActive) {
    userIsActive = true;
    // Send a message to the background script
    chrome.runtime.sendMessage({ type: "userActive" });
  }
  // this got moved over to the service worker too
  // resetInactivityTimeout();
}

// Add event listeners for user interactions
document.addEventListener("mousemove", activityDetected);
document.addEventListener("keydown", activityDetected);
document.addEventListener("visibilitychange", activityDetected);
window.addEventListener("blur", activityDetected);

document.addEventListener("mouseup", function () {
  const selectedText = window.getSelection().toString().trim();

  if (selectedText) {
    console.log("Selected text:", selectedText);
    // You can add your custom logic or call a function here
  }
});

let userIsActive = false;

vite is gr8 at bundling which is very useful in tests too.
I was expecting the boilerplate to be have vitest for testing. Too bad. Can you replace jest with vitest?

There's a new extension ID that gets created on new builds that prevents from me validating oauth

Hi, thanks for the great work! I'm not interested in Typescript, can I load it up with only Javascript?

When I try to run yarn dev and open the extension all I see in the log is "background loaded" and nothing from the content script, like "content loaded". Is it correct to expect "content loaded" to be logged and what could be the reason for it not to show? Thank you!

Hello. First of all, thank you for the great boilerplate. I am getting the error message "Uncaught SyntaxError: Cannot use import statement outside a module". It is related to importing other necessary files. How can I fix it? I tried moving the imported files to resources or inside pages. But it didn't seem to be nice fix and didn't work to avoid this error. I'm wondering why this is happening because it looks like the code is in ES6?
P.S It happens in both development and processing.

I am unable to run this in dev mode. How is the dev mode done exactly and what does it do? There is no dist directory after npm run dev. Am I suppose to npm run build first? But it does not rebuild whenever I change the code. Sorry just starting out building chrome extensions

Edit: I tried the https://github.com/extend-chrome/ts-react-boilerplate.git and it works. It builds to dist and hrm also works.

Hello!

Thanks for taking the time to create this boilerplate.

I'm trying to set it up but running into an odd error when clicking the Load unpacked button within chrome://extensions/

I select the dist folder then I get an modal popup error saying:

Failed to load extension
File
~/Desktop/chan-extension/dist
Error
Could not load css 'assets/css/contentStyle1679273105255.chunk.css' for content script.
Could not load manifest.

I've attached a screenshot... I can't find much info on this error online but it seems to be related incorrect naming within the manifest file?

Hi, any idea what this is complaining about?

> yarn dev
yarn run v1.22.15
$ yarn build:hmr && (yarn wss & nodemon)
$ rollup --config utils/reload/rollup.config.ts

utils/reload/initReloadServer.ts → utils/reload/initReloadServer.js...
created utils/reload/initReloadServer.js in 2.4s

lib/reload/initReloadClient.ts → lib/reload/initReloadClient.js...
[!] Error: Could not resolve entry module (lib/reload/initReloadClient.ts).
Error: Could not resolve entry module (lib/reload/initReloadClient.ts).
    at error (/home/michal/dev/quantloupe-vite/node_modules/rollup/dist/shared/rollup.js:198:30)
    at ModuleLoader.loadEntryModule (/home/michal/dev/quantloupe-vite/node_modules/rollup/dist/shared/rollup.js:22306:20)
    at async Promise.all (index 0)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Is it possible to have multiple CSS modules for content script ?
On this issue, the solution is to add them manually to the manifest but I'm looking a way to make it dynamic. Is it possible ?
Thanks for the help

Hi, thanks for the good template.

I was working on this template and found out that
I need to reload the extension file on chrome://extension to see the updated .scss file

can you improve on this?

thank you

I can not get the CSS modules to work. Here is what I have:

App.module.css:

.test {
  color: red;
}

Inside App.tsx I have:

import classes from "./App.module.css";
 ...
<h1 className={classes.test}>Some text</h1>

In the debugger, I see the transformed className, but the color is still not applied.

<h1 class="_test_11jwl_1">TEST TEXT</h1>

How can I configure CSS modules?

Hi,

I am trying to create a chrome notification from the background script, but it does not work. As far as I know, the iconUrl needs to be on the same directory where the manifest is, but still I get the same error. Unable to download all specified images and not to mention that the notification is never triggered.

So this is the code:

chrome.notifications.create(
    {
      title: "Notification example",
      iconUrl: "./LogoBg.png",
      message: "Here is the message body",
      type: "basic",
      silent: false
    },
    (notificationId) => {
      console.log(`notification pushed ${notificationId}`);
    }
  );

I have the notification permission enabled on the manifest as well.

A common case when building an extension is that from content_script, we inject some JS code to get some infor, send back to content_script.

Detail: from content_script, we inject a file named custom_script.js (or .ts) to the host page

But with this project setup, I don't know how to preserve custom_script.js during compilation. Because from what I see, it's not in the dist output folder

Wondering the reason behind you injecting the contentView script in the content index.ts rather than just directly rendering everything in the content script? Running into a small issue where I have to manually pass the chrome extension ID in order to run any of the chrome scripts which is just a bit annoying

I have create an extension with this boilerplate.
I want to run it on file:// scheme, while viewing pdf files.
Although the dynamic import in content script is not working.
Any ideas?

Could you show an example of how to get styles working with content rendered in contentView? I've tried importing scss/css files in the react typescript files but they don't seem to be getting loaded. I also tried to mimic your runtime bundling by manually inserting a link tag to the public contentStyle.css file generated, but that did't work either

thanks
your probably install vite globaly so you have no error !.
But for local instal your should change nodedemon configu like this.

{
  "watch": [
    "src",
    "utils",
    "vite.config.ts"
  ],
  "ext": "tsx,css,html,ts",
  "ignore": [
    "src/**/*.spec.ts"
  ],
  "exec": "node_modules/.bin/vite build"
}

env:
node: v16.19.0
vite: 3.1.3

It will output success when I add this code in the makeManifest method:

setTimeout(() => {
  fs.writeFileSync(
     manifestPath,
     ManifestParser.convertManifestToString(manifest)
  );
}, 3000)

Hi! I've discovered this template just now. Been testing it and I love it so far! It's sooooo helpful.
I have a noobie question tho, what's the point of the new tab feature? I want to build an extension but I don't want the extension itself to replace the content of the new tab when a users installs it. Is there a way to disable this?

I know Chrome doesn't allow insecure ws connection to localhost, and that's failing the reload server. Is there something you do differently?

• Hi, I have the content script that will create a div element and use React render to that div then append it into the document.body, but when content script loaded it show this error Cannot use import statement outside a module
  
• My content script code:
  

I want to make an extension using this boilerplate I have to set up tailwindcss in this project for better dx, anyone can help me with this ?

Hey guys, I have a question.

During the local development phase, I noticed that after saving the changes, the browser displays an abnormal behavior and I have to refresh the browser to restore normalcy.

How can I handle or avoid this situation? Is it a bug?

Steps:

1. npm install webextension-polyfill.
2. Content and background use webextension-polyfill.
3. "import" codes in the builded soure.
4. Install the extension, "Uncaught SyntaxError: Cannot use import statement outside a module" in background.
   Question:
   How to use common module without "import"?

just wondering if you ever considered making this generally compatible with web extension to be used in firefox as well. Seems like most people use https://github.com/mozilla/webextension-polyfill

Hey Guys,
Thanks for a truly awesome template! I've been playing with it since Yesterday.. 🚀
Just a minor suggestion - adding the sourcemap: true to the vite.config.build when developing is a must so worth a mention in the readme IMO.

Steps to reproduce

1. Download image to use to src/assets/img folder (example: login.svg)
2. Import logo using import LogSvg from "@assets/img/login.svg";
3. Run yarn dev and import extension to Chrome
4. Logo not loaded properly - shows broken image as it is trying to fetch the image from the webpage instead
   

Any recommendations on how to add tailwinds to this repo?

For some reason, even when using npm run dev, the terminal says "vite v3.1.3 building for production...".

Makes it hard to debug since the error messages are not reported properly.

According to my research, sourcemap: true in vite config should do the trick, but doesn't.

Any ideas?

Hi I moved my project from webpackger based boilerplate to this one using Vite.

I'm also not using Typescript so not sure if this i related, but the compile takes about 8 seconds in dev mode.

It seems to be going over a 1000 files including node modules (although maybe its just checking them).
The project itself has total of 300 js files.

Any ideas what I could try to speed things up?

In contrast, vitest is extremely fast (but possibly due to the dummy test having less dependencies).

My findings so far:

According to this page: https://vitejs.dev/guide/dep-pre-bundling.html
Vite should be caching built files in node_modules/.vite but no such directory is created in my folder.

So far I see that the build is using a production build that has no caching.
I don't mind too much as long as I can work on most of the part of the extension with the normal vite command, but I can't yet.

I had to create an index.html in the root of the project in order to get the dev server to serve up something, which is useful for quick development.

I am attempting to use chrome api in the components but I get error

For example, while using chrome.bookmarks.create I get this error:
TypeError: Cannot read properties of undefined (reading 'create')

I have tried globally importing chrome api by adding /*global chrome*/ to the top of the component but its not working

I inject a modal compoent into pages by content script.After build package and load extension.The image address is link to tabpage's URL instead of extension resources.How to import images in common according to content scrit

import { useState } from 'react'
import logo from '@assets/img/logo.png'

function App() {
  const [modalShow, setModalShow] = useState(false)
  const [modalShowAlways, setModalShowAlways] = useState(false)
  const onMouseOver = () => {
    if (modalShow) return
    setModalShow(true)
  }
  const onMouseLeave = () => {
    if (!modalShow) return
    setModalShow(false)
  }

  return (
    <div className="tl-helper-chrome-extension-frame">
      <div className="tip">
        <img src={logo} />
      </div>
      <div className={`tl-container ${(modalShowAlways || modalShow) ? 'modalShow' : ''}`} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
        <div className="w100 fl fc">
          <div className="tl-header fl fr">
            <img className="tl-header-logo f1" src={logo} />
            <div className="tl-header-title f1">xx hepler</div>
            <div className="tl-header-close" onClick={() => setModalShowAlways(false)}>×</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

Render result:

when i open it,i find it links to tabpage's url like "https://xxxx.com/assets/png/imgLogo.chunk.png" but not "chrome-extension://bhlhnicpbhignbdhedgjhgdocnmhomnp/html/assets/png/imgLogo.chunk.png"

and i not found 「Devtools Pane」in chrome devtools

in dev mode, the vite not as fast as expected。install crx also use full static resources, so vite must build every time。

have any better case to make speed faster?