Stylebot

Stylebot is a browser extension that lets you change the appearance of the web instantly.

Available on Chrome, Firefox and Edge.

• Easy to use: Pick and style elements using UI actions
• Simple & Quick: Changes are saved instantly
• Code editor - Write your own CSS
• Readability Mode - Make articles on any site readable by hiding non-essential page elements like sidebars, footers and ads.
• Grayscale Mode - Turn on grayscale to reduce strain from websites

How to contribute

Donate

Buy me a coffee via Ko-fi

Translate

Add support for a locale via the following steps

• See supported locales
• If src/_locales/[locale].config already exists, please help improve translations
• If not, copy src/_locales/en.config to src/_locales/[locale].config
• Update strings in src/_locales/[locale].config to match the locale

Add new features or fix bugs

If you would like to add a new feature to Stylebot or fix a bug, submit an issue in GitHub (if there is no existing one), discuss it, and wait for approval.

Development

Firefox

• Run yarn watch:firefox to build locally
• Run yarn start:firefox to launch Firefox with development build

Chrome/Edge

• Run yarn watch to build locally
• Open chrome://extensions page.
• Disable the official Stylebot version.
• Enable the Developer mode.
• Load unpacked dist/ as extension

Google Drive Sync

When running the extension from a local build, you will not be able to use the Google Drive Sync feature as the OAuth authenticator will not recognize your extension id.

If you want to use the Google Drive Sync feature locally, and/or for your own forked version of the extension, you must create a Google Cloud project and associated OAuth consent screen associated with the extension.

You can do so as follows:

1. Obtain your extension redirect URL. This is returned by the chrome.identity.getRedirectURL() function. This is already printed as a debug console message: if you load your extension into Chrome, click to “Inspect views background page”, ensure that the All Levels of messages are shown (particularly Verbose), and then click the Sync button on the extension, the extension redirectURL will be printed onto the console for you to copy. Save this redirectURL, as you will need it below.
2. Create a Google Cloud project. You can do this through the Google Cloud console. The name of the project does not matter, but remember it for your own reference. Select the project after it has been created.
3. Search for “Google Drive API” in the console, and click “Enable”.
4. Select “OAuth consent screen” in the left-pane menu, and choose Internal (if for local development or sharing within an organization), or External (if you intend to publish as your own Chrome Extension). You can leave all optional fields on first page blank. On the second page, add the following scope: https://www.googleapis.com/auth/drive.file
5. When completed, select “Credentials” on the left-pane menu. Click “CREATE CREDENTIALS”, and select “OAuth client ID”. Under “Application type”, select “Web application”. Provide any name, and under “Authorized redirect URIs” add the redirectURL that you copied in step #1.
6. You will see “Your Client ID” once you have finished creating the credential. Copy the client ID, and use it to replace the value of CLIENT_ID in the get-access-token.ts file of this repository.

That’s it! Now you are ready to use the Google Drive Sync feature with your local extension.

Release

• Add entry to CHANGELOG
• Update version in package.json and src/extension/manifest.json
• Chrome and Edge: Run yarn build and manually create zip for distribution from dist/
• Firefox: Run yarn build:firefox and manually create zip for distribution from firefox-dist/

Patches

Patches to dependencies are located under /patches and are automatically applied on running yarn using patch-package.

• bootstrap-vue+2.21.1.patch - Patch to work around a requestAnimationFrame issue in Firefox extensions.

License

Stylebot is MIT licensed.