About package

CRE allows to generate new Chrome extension and use TypeScript and React

Usage

1. Create React project (using create-react-app for example)
2. Install packages: npm i create-react-ext @types/chrome
3. Start project. Make sure localhost:3000 is available
4. Generate extension: cd node_modules/create-react-ext && npm start (it'll add ext folder)
5. Load the extension in Chrome from ext folder
6. Now you can make changes in React code or in ext/background.js, ext/manifest.json. Changes will regenerate the extension in ext and auto-reload using chrome.runtime.reload or window.location.reload if extension is opened (see demo above)

Go to index.tsx entry point and define for example this component:

1import {FC} from 'react'
2
3const HiComponent = FC<{}> = () => {
4  const style = {padding: '20px'}
5  return (
6    <div style={style}>Hi</div>
7  )
8}
9
10export default HiComponent

Now we can open Chrome popup-window and we will see Hi. Let's change index.tsx:

1const HiComponent = FC<{}> = () => {
2  const style = {padding: '5px'}
3  return (
4    <div style={style}>Welcome <b>Dear Visitor</b></div>
5  )
6}

We will see Welcome Dear Visitor text. This is because CRE updates extension on any change. Now let's communicate with background.js using chrome.runtime.sendMessage/onMessage methods. And also update Badge using chrome.action.setBadgeText method. In ext/background.js we will add background logic:

1chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
2  if (request.type === 'data') {
3    // return simple object for simplicity
4    sendResponse({
5      content: 'hello from background.js',
6      badge: '123'
7    })
8    return true
9  }
10})

And also update index.tsx:

1import {useEffect, useState, FC} from 'react'
2
3interface HiComponentStateType = {
4  content: string
5  badge: string
6}
7
8const HiComponent = FC<{}> = () => {
9  const [state, setState] = useState<HiComponentStateType>({
10    content: 'hello',
11    badge: 0
12  })
13  useEffect(() => {
14    chrome.runtime.sendMessage({type: 'data'}, (response) => {
15      if (response) {
16        const {content, badge} = response
17        setState({content, badge})
18        chrome.action.setBadgeText({text: badge})
19      }
20      else document.write('Cannot fetch data from background.js')
21    })
22  }, [])
23  return (
24    <div>{state.content}</div>
25  )
26}

In Chrome popup-window we will see hello from background.js text and badge set to 123

Conclusion

CRE is a simple tool that gives ability to: Create default extension in ext folder Use React/TypeScript Automatically update extension in ext folder on any chandes in code Simply load the extension in Google Chrome from ext folder

License

MIT License