chrome-preactextension

KO | EN

gitlite — search

#javascript #python #react #ai #android #rust #linux #kubernetes #awesome-list #pytorch #security #mcp #ios #open-source

chrome-preactextension

(★ 10)

A Chrome extension made with Preact

chrome-preactextension Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Chrome Extension with Preact

> :guitar: Ready-to-rock [Preact] starter project, powered by [webpack].

## Installation

**1. Clone this repo:**

```sh
git clone --depth 1 https://github.com/evroza/chrome-preactextension chrome-preact
cd chrome-preact
```

**2. Make it your own:**

```sh
rm -rf .git && git init && npm init
```

> :information_source: This re-initializes the repo and sets up your NPM project.

**3. Install the dependencies:**

```sh
npm install
```

## Development Workflow

**4. Start a live-reload development server:**

```sh
npm run dev
```

> This is a full web server nicely suited to your project. Any time you make changes within the `src` directory, it will rebuild and even refresh your browser.

**5. Testing with `mocha`, `karma`, `chai`, `sinon` via `phantomjs`:**

```sh
npm test

**6. Generate a production build in `./build`:**

```sh
npm run build
```

**5. Start local production server with [serve](https://github.com/zeit/serve):**

```sh
npm start
```

> This is to simulate a production (CDN) server with gzip. It just serves up the contents of `./build`.

---

## Structure

This extension uses the preact boiler-plate code available at [Preact repo](https://github.com/developit/preact)

I've revised the structure and added an extra 'muscle' directory to hold the back-ground and content script. In production they shall all be available from the 'build' dicrectory and that will carry our installable extension

```

---

## CSS Modules

This project is set up to support [CSS Modules](https://github.com/css-modules/css-modules).  By default, styles in `src/style` are **global** (not using CSS Modules) to make global declarations, imports and helpers easy to declare.  Styles in `src/components` are loaded as CSS Modules via [Webpack's css-loader](https://github.com/webpack/css-loader#css-modules).  Modular CSS namespaces class names, and when imported into JavaScript returns a mapping of canonical (unmodified) CSS classes to their local (namespaced/suffixed) counterparts.

When imported, this LESS/CSS:

```css
.redText { color:red; }
.blueText { color:blue; }
```

... returns the following map:

```js
import styles from './style.css';
console.log(styles);
// {
//   redText: 'redText_local_9gt72',
//   blueText: 'blueText_local_9gt72'
// }
```

Note that the suffix for local classNames is generated based on an md5 hash of the file. Changing the file changes the hash.

---

## Handling URLS

:information_desk_person: This project contains a basic two-page app with [URL routing](http://git.io/preact-router).

Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as `props`.

Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.

```js
<Router>
  <A path="/" />
  <B path="/b" id="42" />
  <C path="/c/:id" />
</Router>
```

---

## React Compatibility

This project includes [preact-compat] alias in as `react` and `react-dom` right out-of-the-box.  This means you can install and use third-party React components, and they will use Preact automatically!  It also means that if you _don't_ install third-party React components, `preact-compat` doesn't get included in your JavaScript bundle - it's free if you don't use it 👍

---

## License

MIT

chrome-preactextension

chrome-preactextension Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

chrome-preactextension

chrome-preactextension Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README