lxieyang / chrome-extension-boilerplate-react Goto Github PK

Currently service workers in manifest.json is specified as an array. This doesn't work with chrome.

So we have to replace this:
"background": [ { "service_worker": [ "background.bundle.js" ] } ],

What works is having a single service worker as per spec: https://developer.chrome.com/docs/extensions/mv3/manifest/
"background": { "service_worker": "background.bundle.js" },

Anyone tried using TailwindCss with this boilerplate? If you have, can you provide some guidance on how to implement this? Thank. you very much!

problem

1. During hot loading, the previously packaged files will not be removed, resulting in a large package （so Oops）
2. When there is an error, no error will be prompted when npm run build is executed, and it can only be found through npm run start （so Oops）

Suggest

1. Can the template be replaced with typescript and less or sass?
2. add git commit verification

It would be great if the extension would also work with firefox out of the box. For that https://github.com/mozilla/web-ext could be used.
There is also a webpack plugin:
https://github.com/ianwalter/web-ext-webpack-plugin
https://github.com/hiikezoe/web-ext-webpack-plugin

Do you have any advice for extending this to support Typescript?

I'd be happy to submit a PR back if you help outline what would be involved.

translate
——————
I'd like to ask if there is an open source Google plug-in based on this project. I want to see how others write it

This boilerplate is great. Thanks for the work.

Please consider introducing react fast refresh. React Fast Refresh will speed up the react development.

I am trying to import the secrets but content wont detect the path.

Also, is there any example to follow on how you properly use the secrets?
Thank you.

First of all, I'd like to say that I'm genuinely amazed by this boilerplate. By far the best I've seen so far. Thank you very much for the efforts and the kindness to open source it.

Secondly, would it be possible to add support for SCSS and SASS?

Thank you!

Just curious what you would recommend for state management. I have a popup that needs to manage state and display a few different screens like login, main, etc. Thanks!

Hey is there anyway I can point to the location of static assets like you use public folder inside any react app. I have many static assets I wanna use in my project other that images, like json. What do you think the best way to go about this in this boilerplate

If you check https://v4.webpack.js.org/loaders/file-loader/ it says that it has been deprecated for V5 and https://webpack.js.org/guides/asset-modules/ should be used instead.

I've changed this to:

      {
        test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
        type: 'asset/resource',
        exclude: /node_modules/,
      },

And it seems to be working fine. I ended up doing this change cause images targeted from React css files were not being emitted properly by webpack.

After a fresh install build and start webpack is failing to compile.

cacheable modules 1.34 MiB
modules by path ./node_modules/ 1.3 MiB 47 modules
modules by path ./src/ 36.9 KiB
modules by path ./src/pages/ 33.5 KiB 30 modules
modules by path ./src/assets/img/ 115 bytes
./src/assets/img/logo.svg 52 bytes [built] [code generated]
./src/assets/img/tmp-launcher128.png 63 bytes [built] [code generated]
./src/containers/Greetings/Greetings.jsx 3.28 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^./log$ 170 bytes [built] [code generated]

ERROR in Unexpected string in JSON at position 355

webpack 5.23.0 compiled with 1 error in 10130 ms
i ｢wdm｣: Failed to compile.

The webpack compiled very slowly (about 20s) at "95% emitting emit".

Anyone met this problem before?

Hey sorry if this is the wrong place but how do install jquery into this so i can run jquery in the content script? I dont see any thing in the docs for this.

Let me say pretty marvellous repo, I've learned a bit about webpack.

I decided to add another entry point in the webpack.config

  indexScript: path.join(__dirname, 'src', 'index.jsx'),

inside this file is this:
it makes use of InboxSDK.js
it adds functionality to various parts of Gmail web UI and accepts React nicely for UI building
I added it to webpack config and it gets copied over where it needs to be

import React from 'react';
import ReactDOM from 'react-dom';

const TestFeature = () => <div>boo hoo</div>; //editing these components does not trigger a reload
const Sidebar = () => <div>Boo hoo hoo</div>;

InboxSDK.load(2, 'app-id').then((sdk) => {

    //Add Compose new window bottom toolbar
    sdk.Compose.registerComposeViewHandler((composeView) => {
        composeView.addButton({
            title: "Test Feature",
            iconUrl: chrome.runtime.getURL('images/template-list-256x256.svg'),
            hasDropdown: true,
            onClick: (event) => {
                ReactDOM.render(<TestFeature />, event.dropdown.el);
            }
        });
    });

    //Sidebar 
    let el = document.createElement('div')
    ReactDOM.render(<Sidebar />, el)

    const panelView = sdk.Global.addSidebarContentPanel({
        title: 'Sidebar test',
        iconUrl: 'sidebarlogo.png',
        el: el
    })

    //Auto Open sidebar
    //Mainly handle for development
    panelView.then(function (panel) {
        panel.open()
    });

});

Everything loads up and works except no magic reload for indexScript
When I save indexScript the webserver recompiles build updates but I need to refresh extension page setting and then reload browser

Any insight much appreciated

A of chromium version 91 chrome.tabs.executeScript was deprecated and chrome.scripting.executeScript was introduced as the new API for executing scripts.

I'm having 2 different issues with that.

1. loading specific scripts files will not work since the scripts files are being ignored by the build process.

let results = await chrome.scripting.executeScript({
    target: {tabId: tab.id, allFrames: true},
    files: ['my-script.js', 'my-other-script.js'],
  });

2. We can't get a return value since the return value is omitted in build time.
   In the case of using a function instead of scripts files the function do run but to get a return value we need to write the desired return value as the final statement in the script and this will be evaluated as the return value.

// script function:
function myScript () {
  var headers = document.querySelectorAll('p');
  headers.length;
}

// executing the script
chrome.scripting.executeScript({
    target: {tabId, allFrames: true},
    func: myScript
}, (results => {
  // results[0] value is {frameId: 0, result: null}
}));

The issue here is that the headers.length; statement will be omitted during build (although I tried to manually add it to the build output itself, that didn't work either, and I didn't get the chance to keep investigating it)

All the relevant mentioned information can be found on chrome developer blog - scripting article and chrome.scripting docs

Hey buddy, how about if we add structure like MVC or something to organize our code more better way, When our extension went bigger and bigger it always tough to maintain the code so any architecture would be best thing. :)

Is there any issue while publish to chrome extension store the build folder?

Hey folks.
I wanted to use https://github.com/timolins/react-hot-toast in my extension but I am getting:
Uncaught ReferenceError: react_hot_toast__WEBPACK_IMPORTED_MODULE_6__ is not defined

Any suggestions?

Hi!

I tried your boilerplate and content-script's css-file was copied. But there is another problem.
I want to use some react library (Ant.Design) and I need to use their styles.
According to Use in create-react-app I added @import '~antd/dist/antd.css'; but actual styles weren't added to /build/content.styles.css.
Any solutions to this problem?

Thanks in advance!

@lxieyang hey buddy how you doing!

How do we use local fonts with this boilerplate?

Tried following this but it isn't working in the popup and options page: https://stackoverflow.com/questions/19210451/packaging-a-font-with-a-google-chrome-extension

Thanks!

I developed with jQuery, and the code was about 270 KB in size. But using this scaffold, I found that the packed build folder was 7MB, it's too large.

can you teach me how to setup svg-url-loader so i can use inline svgs?

also is that correct for the secret configs?
for dev i use, NODE_ENV=development npm run build
testing: NODE_ENV=testing npm run build
production: NODE_ENV=production npm run build

Hello, thanks for sharing your boilerplate.

I just want to know if there is a reason of why you don't use ES6 ?

Regards.

I mean using React.js on devtools.html page

SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Since webpack 5, cleaning the build folder is part of the native functionality of webpack. I suggest using the webpack 5 functionality instead of using a plugin to clean the build folder.

Service worker auto get into inactive mode and background script is not running in background at all. We can not use persistent in manifest 3.0, What is the work around on that. I am running setInterval callback in my background script, which only running when background page open, on close service worker auto get into inactive mode.

Hi, first of all: thanks for the great work. Very helpful!

One question: when running in hot reload the build folders does not empty automatically and contains thousands of files after a while. Am I doing something wrong -- or how can I avoid it?

Thanks
Leander

I have created a file at root called secrets.development.js:

export default config = {
  apiKey: 'string',
  authDomain: 'string',
  databaseURL: 'string'
};

1. How do I import this object within my files?
2. How do I call to the specific key value pairs in my document?

Thanks!

I kept getting this error whenever i tried to save the project, the project working fine but any idea how to fix this?

When I try to import oauth it throws an error:

Uncaught ReferenceError: process is not defined
    at eval (webpack-internal:///./node_modules/pbkdf2/lib/default-encoding.js:3)
    at Object../node_modules/pbkdf2/lib/default-encoding.js (popup.bundle.js:1905)
    at __webpack_require__ (popup.bundle.js:3056)
    at fn (popup.bundle.js:3278)
    at eval (webpack-internal:///./node_modules/pbkdf2/lib/async.js:4)
    at Object../node_modules/pbkdf2/lib/async.js (popup.bundle.js:1895)
    at __webpack_require__ (popup.bundle.js:3056)
    at fn (popup.bundle.js:3278)
    at eval (webpack-internal:///./node_modules/pbkdf2/browser.js:1)
    at Object../node_modules/pbkdf2/browser.js (popup.bundle.js:1885)

To have better intelligent code completion and type hint, I suggest to reference @types/chrome as a dependency. It also saves time from looking for function signatures in the docs.

建议把 @types/chrome 作为 dependency 引入，这样在 VS Code 里面能自动提示属性名、方法名和函数签名。写起来会快捷很多。

This is a very good boilerplate to start creating a new extension with. Great work!

sorry for disturb, i am very new for chrome-extention, i did not find any info about how to disable or enbale dirrent pages.

waiting for your help and thanks.

It might be a chrome bug. Just recently started seeing this in my webpack based setup. I'm looking around for other open-source extensions/boilerplates and it appears that all face the same issue?

Are you aware of this? Thanks!

Hi there,

I was wondering how can I use SCSS for the content.styles.css file?

Thank you!

according to https://github.com/npm/rfcs/blob/latest/implemented/0021-reduce-lifecycle-script-environment.md

Remove npm_package* values from the script lifecycle environment.

The error:

Uncaught TypeError: self.location.reload is not a function
    at Object.staticChanged [as static-changed] (background.bundle.js:2632)
    at background.bundle.js:3869
    at WebSocket.<anonymous> (background.bundle.js:2475)

I have just written some lines of code at Background/index.js and those errors appeared. How can I solve this?

I have seen too in the background.bundle.js this:

I have got this warnning message

typeof SharedArrayBuffer === 'function' ? new SharedArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT) : // $FlowFixMe Flow doesn't know about ArrayBuffer

How can I fix it?

I'm having this error. What fix should be done?

I'm encountering this issue that interfere the npm start. Is there any way to overcome this?
Thank you.

I'm curious if you've experimented with any solutions to allow for using a hashed SHA256 CSP rather than including unsafe-eval as this is highly discouraged according to Google's documentation. Using create-react-app this can be achieved by including INLINE_RUNTIME_CHUNK=false in .env I believe, but am not experienced enough with webpack to really know how a workaround can be built into this project. Have you worked on this at all? Any ideas on where to begin to build around this?

Hi,

i have a problem when i try to load the content script (with 'react' and 'react-dom' imported) when i'm in other websites that are developed also with React. It seems that rerenders the website after the content script is loaded and it causes a "conflict" with the current page and that makes that the page looks different (I mean, different when my extension is disabled).

I tried with dynamic imports but it is impossible because the dynamic imports code ran it the browser.

It is possible to isolate my React modal (rendered in the content script) to avoid the conflict with other React websites?

The content script code is similar to this (simplified):

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import AddWebsiteModal from '../components/AddWebsiteModal/AddWebsiteModal';

function existsModalDivTag() {
  return document.getElementById('myapp-modal-webadd');
}

export function createProductModal(authData, websiteData) {
  console.log(websiteData);

  if (!existsModalDivTag()) {
    const element = document.createElement('div');
    element.setAttribute('id', 'myapp-modal-webadd');
    document.body.appendChild(element);

    return render(<AddWebsiteModal auth={authData} websiteData={websiteData} />, document.querySelector('#myapp-modal-webadd'));
  } else {
    unmountComponentAtNode(document.getElementById('myapp-modal-webadd'));
    document.getElementById('myapp-modal-webadd').remove();
  }
}

Thanks.

I'm having trouble figuring out what to change in webpack config in order to get my content and background scripts to hot reload with the rest of my app.

This is important for me because my extension is injecting a react component into a user's active tab via the content script. For this reason I need the content script to hot reload.

Here is my webpack config, or at least what I think are the relevant parts.

var options = {
  mode: process.env.NODE_ENV || 'development',
  entry: {
    newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
    content: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
    pageInject: path.join(__dirname, 'src', 'pages', 'PageInject', 'index.jsx'),
    background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
    contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
    devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.jsx'),
  },
  chromeExtensionBoilerplate: {
    notHotReload: ['devtools'],
  },

As you can see I removed contentScript from chromeExtensionBoilerPlate.notHotReload.

Honestly I'm having trouble even understanding how this hot reloading is working, any help here is appreciated!

Hey @lxieyang, thanks for an amazing starter kit. I'm new to webpack and this really helped me get started with extension dev.

What I want to do is to create a custom widget (in an iframe) and embed it on the bottom right corner on activated webpages.

But the issue I'm facing is the document object on src/pages/Content/index.js is referring to the actual page document, which is good but first I have to develop the iframe like a react app by running:

ReactDOM.render(<App />, document.querySelector("#app-container")

NB: app-container is from a HTML doc we created at path: src/pages/Content/index.html.

and then I'd embed it into the actual document. So I'm not finding a suitable way to solve this.

I hope I explained it well, if not I'm open to discussions.

Thanks.

Hi!

do you have any guidance on upgrading from Samuel's older version of the boiler plate? i'm running webpack 4\react17\etc for for a fairly big personal project.

thanks,
Shravan

Hi there, first of all: amazing boilerplate! It's working fantastic and has made the setup of our chrome extension sooo much easier - thanks a lot for your work!!

I've encountered an issue with logging anything from within pages/Popup. In there I'm using React and everything renders correctly and all logic is executed as expected. However, no logs from Popup/index.tsx are displayed in the browser console. Am I missing anything?
Is there something in the webpack config which omits any console.log call in the build folder?

Any help would be much appreciated!