refox

KO | EN

gitlite — search

#nlp #machine-learning #claude #automation #go #typescript #electron #java #cli #proxy

(★ 9)

🎨 Dynamic theming of Gecko-based browser using your Native color scheme generator

파일 탐색기

ZIP 다운로드

- - ext-logo.svg
  - logo.svg
- - native-error.html
  - settings.html
  - update.html
- manifest.json
- refox_animated_logo.gif
- - auto-mode.ts
  - extension-page.ts
  - extension.ts
  - generators.ts
  - icon.ts
  - index.ts
  - state.ts
- - messenger.ts
  - native-messenger.ts
- - default-themes.ts
  - general.ts
  - template-data.ts
- - website.ts
- - native-error.ts
  - page.ts
  - settings.ts
  - update.ts
- - colors.ts
  - dom.ts
- definitions.ts
- - archlinux.css
  - chatgpt.css
  - chess.css
  - claude.css
  - discord.css
  - github.css
  - monkeytype.css
  - reddit.css
  - telegram.css
  - twitter.css
  - whatsapp.css
  - youtube.css
- toggler.css
- userChrome.css
- userContent.css
- - generators.test.ts
- - colors.test.ts
.gitignore
.zen_install.sh
install.sh
LICENSE
notes
package.json
README.md
rollup.config.mjs
test_script.js
todo
tsconfig.json
uninstall.sh
updates.json
yarn.lock

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

###### 🎨 Dynamic theming of Firefox-based browser using your Native color scheme generator, [A fork of Pywalfox]

</div>

## What's new?

Pywalfox does a great job theming the Firefox UI ~ toolbar, tabs, the works. But the moment you load a website, you're back to whatever colors that site decided on. This fork fixes that by pushing your Color palette into websites too, via CSS custom properties injected at page load. And since it hot reloads, running pywalfox update updates every open tab on the spot ~ no explicit tab refresh needed.

<details>
<summary><b>Video demonstrations</b></summary>

https://github.com/user-attachments/assets/f9cf5f40-42a5-422a-853c-ce30cd1558c8

https://github.com/user-attachments/assets/a50f4e77-ea29-446f-a3f9-175781ec95bc
</details>

### Gecko Browser Stylesheets

- [userChrome.css](./template/userChrome.css)
- [userContent.css](./template/userContent.css)
- [toggler.css](./template/toggler.css)

### List of all websites

- [Arch Linux](./template/websites/archlinux.css)
- [ChatGPT](./template/websites/chatgpt.css)
- [Chess.com](./template/websites/chess.css)
- [Claude](./template/websites/claude.css)
- [Discord](./template/websites/discord.css)
- [GitHub](./template/websites/github.css)
- [Monkeytype](./template/websites/monkeytype.css)
- [Reddit](./template/websites/reddit.css)
- [Telegram](./template/websites/telegram.css)
- [Twitter / X](./template/websites/twitter.css)
- [WhatsApp](./template/websites/whatsapp.css)
- [YouTube](./template/websites/youtube.css)

## ⏺ Installation

1. Get the latest add-on from [Releases Page](https://github.com/ADIOR-enigma/refox/releases/tag/v3.1.0) and pin it to toolbar for a surprise.

> - It does autoupdate 😅

2. Install the native messaging host and browser templates using one of the two methods below:

### Method 1: Automated Installation / Updater (Arch Linux / Arch-based)

Run our one-line `curl` installer (which also acts as an updater) in your terminal to automatically clone and set up Re:fox across your browsers:

```sh
   curl -fsSL https://raw.githubusercontent.com/ADIOR-enigma/refox/main/install.sh | bash
   ```

> - **Canonical Location & Automatic Updates:** The installer automatically clones (and on subsequent runs automatically pulls the latest updates to) the repository at `~/.config/refox`.
   > - **Multi-Profile Setup:** You will be prompted to paste your Profile Directory paths directly from `about:support` (supports multiple profiles across Firefox, LibreWolf, Floorp, Mercury).
   > - **Saved Configuration:** Your profile paths are saved to `~/.config/refox/install.conf`. Re-running `~/.config/refox/install.sh` (or the one-line curl command) automatically updates all saved profiles without prompting, unless you choose to add more profiles.
   > - **Note:** After installation completes, remember to open `about:config` in your browser(s) and verify `toolkit.legacyUserProfileCustomizations.stylesheets` is set to `true`.

### Method 2: Manual Installation (All platforms / other distributions)
   1. Install the [native messaging application](https://github.com/Frewacom/pywalfox-native) ([PyPI](https://pypi.org/project/pywalfox/)) using your preferred method, with e.g. `pip` or `pipx` (or use the [AUR package](https://aur.archlinux.org/packages/python-pywalfox/)):
      ```sh
      pipx install pywalfox
      ```
      > Don't have `pipx`? Install it first, then re-run the command above:
      >
      > - **Arch Linux:** `pacman -S python-pipx`
      > - **Ubuntu:** `apt install pipx`
      > - **macOS:** `brew install pipx`
      > - **Windows:** `winget install Python.Python.3.14`, then `pip install pywalfox` instead
   2. Run `pywalfox install` in your terminal.
      - Firefox forks (e.g. LibreWolf) require [extra arguments](#firefox-forks). Flatpaks require [extra steps](#flatpaks).
   3. **Match manifest with Re:fox:** Because Re:fox is forked from Pywalfox, edit the generated manifest file (`~/.mozilla/native-messaging-hosts/pywalfox.json` or `~/.config/mozilla/native-messaging-hosts/pywalfox.json` on Linux/macOS or system/fork/Windows equivalent) and add `"re-fox@adior.org"` to `allowed_extensions`:
      ```json
      {
        "name": "pywalfox",
        "description": "Automatically theme your browser using the colors generated by Pywal",
        "path": "/path/to/bin/main.sh",
        "type": "stdio",
        "allowed_extensions": ["pywalfox@frewacom.org", "re-fox@adior.org"]
      }
      ```

3. To add the templates (`userChrome.css`, `userContent.css`, and `websites/`) to your browser:
   - Navigate to `about:support` in your browser, look for **Profile Directory**, and click **Open Directory**.
   - Create a `chrome` folder inside your profile directory if it does not already exist.
   - Copy the contents of the [template/](./template) folder (`userChrome.css`, `userContent.css`, and the `websites/` folder) into `<profile-directory>/chrome`.
4. Navigate to <code>about:config</code> and set <code>toolkit.legacyUserProfileCustomizations.stylesheets</code> to <code>true</code>.
5. Generate a theme with [Matugen](https://github.com/InioX/matugen) or equivalent. You may refer to there guide where the output must be `$HOME/.cache/wal/colors.json`.
6. Changing your wallpaper should theme the firefox or you can click the Refox icon in the Firefox UI and then "Fetch Native colors". Note that website theming is opt-in and not turned on by default, so you must open the extension settings to turn it on yourself.

This should apply a theme with your Native colors!

> [!NOTE]
> If you have problems: please review the Troubleshooting section below before opening a Github issue/PR.

## ⏺ Usage

### Update the theme through your terminal

Run `pywalfox update` in your terminal to trigger an update of the browser theme.
This command can integrate Refox into e.g. system theming scripts, and is functionally equivalent to clicking "Fetch Native colors" in the add-on settings GUI (accessible from your toolbar).

### Customization

The add-on settings GUI comes with extensive customization options divided into the following sections:

<details>
<summary>
<b>
💧 Palette (click for details)
</b>
</summary>

The palette in the "Palette" section is used to temporarily customize one or more colors from the Native color generated palette.
You can use one of the generated colors, or choose any color from a colorwheel.

> **Warning** <br>
> Changes to the palette will be reset when you click "Fetch Native colors" and when you run `pywalfox update`.

</td></tr></table>

</details>

<details>
<summary>
<b>
📝 Palette template (click for details)
</b>
</summary>

If you want your palette customizations to be persistent (unlike the regular palette) you must save your current palette as a _palette template_:

1. Click "Fetch Native colors" in the add-on settings GUI or run `pywalfox update`
2. Customize the colors to your liking in the "Palette" section
   - ❗ _Colors from outside the Native color generated palette (i.e. from the colorwheel) cannot be used in a template_.
3. Click "Load from current" in the "Palette template" section below.
   - ❗ _The colors can also be set directly in the "Palette template" section using Native color indices._
4. Click "Save palette"

Your custom palette will now be applied whenever you update the browser theme.

</td></tr></table>

</details>

<details>
<summary>
<b>
🗂 ️Theme template (click for details)
</b>
</summary>

The theme template assigns colors (from your palette template) to different browser elements.

To create a palette template, go through the items in the "Theme template" section and assign a color to each item.
The colors are identified by their names as seen in the "Palette template" section.

</td></tr></table>

</details>

### Theme modes

There are three different theme modes: "Dark" (❨), "Light" (𖤓) and "Auto" (👁)️. Selecting "Auto" will automatically switch between the other two modes based on a time interval found in the "General" section of the add-on settings GUI.

> [!Note]
> The dark and light modes have _separate_ theme and palette templates. You will always modifiy the template for the currently selected mode.

### Site theming with the "Expose Refox CSS variables to websites?"

Websites and the context menus are not available through the [Theme API](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme). Refox includes templates which can be used to apply those theme to most part of the internet.

## ⏺ Uninstall

To uninstall Re:fox from your system across all configured browsers and clean up the native messaging host, run our one-line `curl` uninstaller:

```sh
curl -fsSL https://raw.githubusercontent.com/ADIOR-enigma/refox/main/uninstall.sh | bash
```

Or if you already have the repository installed locally at `~/.config/refox`:

```sh
~/.config/refox/uninstall.sh
```

## 🔧 Troubleshooting

This section lists some common problems and how to (hopefully) fix them.
This [troubleshooting guide from Mozilla](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Native_messaging#Troubleshooting) may be of use if you encounter an error that is not listed here.
First of all:

- Check the log in the Debugging section at the bottom of the Refox settings page for any errors.
- Verify that `~/.cache/wal/colors` exists and contains colors generated by Your Native color scheme generator.
- Verify that `path` in `~/<native-messaging-hosts-folder>/pywalfox.json` is a valid path.

### Firefox forks

Forks may require custom paths to the manifest and profile directory during installation:

```sh
pywalfox install --manifest-path ~/.mozilla/native-messaging-hosts \
                 --profile-path  ~/.config/librewolf/librewolf
```

The above example is for LibreWolf (non-Flatpak version). Paths vary across forks.

> [!NOTE]
> If you run `pywalfox install` manually for a fork, remember to edit the created manifest (`~/.mozilla/native-messaging-hosts/pywalfox.json` or your fork's `native-messaging-hosts` directory) and ensure `"re-fox@adior.org"` is added to `"allowed_extensions"` so Re:fox can connect.

### Flatpaks

Flatpak sandboxing prevents direct access to host binaries, so a wrapper script is needed.
The steps below use the LibreWolf Flatpak as an example.
You may need to adapt the instructions for your particular browser.

1. Create a wrapper script at `~/.var/app/io.gitlab.librewolf-community/pywalfox-wrapper.sh`:
   ```sh
   #!/bin/sh
   flatpak-spawn --host ~/.local/bin/pywalfox "$@"
   ```
1. Make the wrapper script executable:
   ```sh
   chmod +x ~/.var/app/io.gitlab.librewolf-community/pywalfox-wrapper.sh
   ```
1. Install the native messaging host with additional arguments for your particular paths, e.g.
   ```sh
   pywalfox install \
   --manifest-path ~/.var/app/io.gitlab.librewolf-community/.librewolf/native-messaging-hosts \
   --profile-path  ~/.var/app/io.gitlab.librewolf-community/.librewolf/
   ```
1. Edit the manifest (`~/.var/app/io.gitlab.librewolf-community/.librewolf/native-messaging-hosts/pywalfox.json`) and point its `path` to the wrapper script. Use an absolute path as below (replacing `<USER>` with your username), and make sure `"re-fox@adior.org"` is in `allowed_extensions`:
   ```json
   {
     "name": "pywalfox",
     "description": "Automatically theme your browser using the colors generated by Pywal",
     "path": "/home/<USER>/.var/app/io.gitlab.librewolf-community/pywalfox-wrapper.sh",
     "type": "stdio",
     "allowed_extensions": ["pywalfox@frewacom.org", "re-fox@adior.org"]
   }
   ```
1. Grant Talk permissions:

```sh
   flatpak override --user \
     --talk-name=org.freedesktop.Flatpak \
     --talk-name=org.freedesktop.portal.Flatpak \
     --system-talk-name=org.freedesktop.Flatpak \
     io.gitlab.librewolf-community
   ```

Verify that the correct permissions have been granted, i.e.

```sh
   flatpak override --user --talk-name=org.freedesktop.Flatpak io.gitlab.librewolf-community
   ```

should output

```sh
   [Session Bus Policy]
   org.freedesktop.Flatpak=talk
   org.freedesktop.portal.Flatpak=talk

[System Bus Policy]
   org.freedesktop.Flatpak=talk
   ```

1. Restart the browser. Fetching Native/Pywal colors should now work.

### Common errors in the browser console

It is a good idea to check the Firefox browser console (`Tools > Web developer > Browser console`) for errors.
Common errors include:

<details><summary>
<b><code>ExtensionError: No such native application pywalfox</code> / <code>ExtensionError: No such native application refox</code></b>
</summary>

The manifest is not installed properly or is missing allowed extensions. Try installing/checking the manifest manually by following the instructions [here](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Native_manifests.).

The manifest file (`pywalfox.json`) must be located in your browser's `native-messaging-hosts` directory (e.g. `~/.mozilla/native-messaging-hosts/pywalfox.json` or `/lib/mozilla/native-messaging-hosts/pywalfox.json`).

Ensure the `path` property points to `<path-to-python-site-packages>/pywalfox/bin/main.sh` (or `win.bat` if you are on Windows), and verify that `allowed_extensions` contains `"re-fox@adior.org"`.

If it still does not work, you can try to reinstall Firefox.

</td></tr></table>
</details>

<details><summary>
<b><code>stderr output from native app pywalfox: <installation-path>/main.sh: line 3: pywalfox: command not found</code></b>
</summary>

Refox assumes that the `pywalfox` executable is in your `PATH`.

If you can not run `pywalfox` from the command line (without specifying an absolute path), you must either add the path to the executable to your `PATH` variable, or move the executable to a path that already is in your `PATH`.

</td></tr></table>
</details>

<br>

> [!IMPORTANT]
> The errors in the browser console are not limited to just Refox!
>
> POST PRs TO THE >dev< BRANCH

## 🚧 Development setup

Do you want to hack on the Refox add-on? Start here:

```bash
git clone https://github.com/ADIOR-enigma/refox.git # or use your own fork
cd refox
yarn install # or npm if you do not have yarn installed
yarn run debug
```

To build the extension into a zip:

```bash
yarn run build
```

## 🙏 Credits & Acknowledgments

Refox builds upon the fantastic work of several projects and individuals in the open-source community:

- **[Frewacom](https://github.com/Frewacom)** and all contributors of **[Pywalfox](https://github.com/Frewacom/pywalfox)** – for creating and maintaining the original project that Refox is forked from.
- **[TECHNOFAB11](https://github.com/TECHNOFAB11)** – for their idea on injecting CSS custom properties into websites ([Pywalfox PR #161](https://github.com/Frewacom/pywalfox/pull/161)).
- **[Ubaidullah-Web-Dev (ubaid)](https://github.com/Ubaidullah-Web-Dev)** – **[MatugenFox](https://github.com/Ubaidullah-Web-Dev/MatugenFox)** a friend and a competitor.

refox

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

refox

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README