https://github.com/entrptaher/playground-extension-boilarplate

⭐ Extension example for Content script on page with react and webpack ⭐
https://github.com/entrptaher/playground-extension-boilarplate

Last synced: about 6 hours ago
JSON representation

⭐ Extension example for Content script on page with react and webpack ⭐

• Host: GitHub
• URL: https://github.com/entrptaher/playground-extension-boilarplate
• Owner: entrptaher
• License: mit
• Created: 2017-11-19T13:43:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-10T12:49:54.000Z (8 months ago)
• Last Synced: 2024-05-28T16:17:28.273Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.8 MB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 16
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Minimal chrome extension boilarplate. 

## Overview

On click on browser icon, the background will execute the content-script on current page. It will load fontawesome as well.

![](https://i.imgur.com/xLIJyHE.png)

Once you click the icon again, it will try to remove all references, and the page will reload.

## Usage

Clone the repo, install dependencies and start building.

```sh

yarn 

yarn run start

```

It will generate unpacked extension on `build` folder which you can install on chrome extension page.

## Structure

The source structure looks like below,

```

src

├── js

|  ├── background

|  |  └── index.jsx

|  └── content-script

|     ├── fontawesome.jsx

|     ├── index.jsx

|     └── styles

├── manifest.js

└── static

   └── img

      ├── logo.png

      └── logo.svg

```

The build structure looks like below,

```

build

├── fonts

|  ├── fa-regular-400.eot

|  ├── ...

├── img

|  └── logo.png

├── js

|  ├── background.js

|  └── content-script.js

└── manifest.json

```