browser-extension - GitLite

KO | EN

gitlite — search

#dotnet #monitoring #php #gpt #ruby #markdown #css #proxy #deep-learning #tailwindcss

browser-extension

(★ 185)

The browser extension for gitpod.io. Works with Chrome and Firefox.

File Explorer

ZIP Download

- devcontainer.json
- - config.yml
- - submit.yml
  - test.yml
- dependabot.yml
- automations.yaml
- icon.png
- - go.mod
  - go.sum
  - main.go
- - package-lock.json
  - package.json
- build.sh
- Dockerfile
- github-injected.png
- safari-confirm.png
- - button-contributions.ts
  - button.css
  - button.tsx
  - CaretForProvider.tsx
  - logo-mark.svg
- - button.tsx
  - gitpod-dashboard.ts
- - use-temporary-state.ts
- - OnaLettermark.tsx
- - parse-endpoint.spec.ts
  - parse-endpoint.ts
  - permissions.ts
- background.ts
- constants.ts
- popup.css
- popup.tsx
- storage.ts
- style.css
- - button-contributions-copy.ts
  - button-contributions.spec.ts
- package-lock.json
- package.json
- pnpm-lock.yaml
- tsconfig.json
.eslintrc.json
.gitignore
.gitpod.Dockerfile
.gitpod.yml
.prettierignore
.prettierrc.json
.puppeteerrc.cjs
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
postcss.config.js
README.md
SECURITY.md
tailwind.config.js
tsconfig.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`pnpm`

View Details ▼

Fast, disk space efficient package manager for Node.js.
Manage Node.js projects and their module dependencies.

pnpm init

Create a `package.json` file:

pnpm {{[i|install]}}

Download all the packages listed as dependencies in `package.json`:

pnpm add {{module_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

🔍

`yarn`

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

yarn add {{module_name}}@{{version}}

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

# Project Badges

Setup Automated Visit

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

This is the browser extension for Ona. It supports Chrome (see [Chrome Web Store](https://chrome.google.com/webstore/detail/dodmmooeoklaejobgleioelladacbeki/)), Firefox (see [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/gitpod/)) and Edge (see [how to install Chrome extensions](https://support.microsoft.com/help/4538971/microsoft-edge-add-or-remove-extensions)), and adds an **Ona** button to the configured GitLab, GitHub, Bitbucket and Azure DevOps installations (defaults to `gitlab.com`, `github.com`, `bitbucket.org` and `dev.azure.com`) which immediately creates an Ona environment for the current git context:

![Gitpodify](https://raw.githubusercontent.com/gitpod-io/browser-extension/main/docs/github-injected.png "Gitpodify")

### Issues

We are currently tracking all issues related to the browser extension in the [`gitpod-io/gitpod`](https://github.com/gitpod-io/gitpod) repository.
You can use the [`component: browser-extension`](https://github.com/gitpod-io/gitpod/issues?q=is%3Aissue+is%3Aopen+extension+label%3A%22component%3A+browser-extension%22) label to search for relevant issues including feature proposals and bug reports.

### Development

To make changes and test them using Ona itself:

-   add test cases to the [unit test](https://github.com/gitpod-io/browser-extension/blob/se/plasmo/test/src/button-contributions.spec.ts#L39)
-   try out changes like this:
    1. run `pnpm build`
    1. run `pnpm watch-prod` and download the built binary for your system (local machine)
    1. run the binary anywhere on your local machine to sync the extension folder locally.
    1. open Chrome and go to `chrome://extensions/`
    1. enable `Developer mode` (top right)
    1. click `Load unpacked` (top left) and select the folder you just downloaded
    1. now you can test your changes
    1. repeat step 1 and 2 and [reload the extension](chrome://extensions/) whenever you want to test new changes

Or, when developing locally, you can execute the following to enable hot reloading with the extension in Chrome:

```
pnpm dev
```

Then, `Load unpacked` the `build/chrome-mv3-dev` folder in Chrome and after making changes, pages will reload automatically and the changes will be reflected immediately.

#### Build

The build happens automatically when you start a workspace but if you want to build explicitly, use these commands:

```
pnpm install
pnpm build --target=chrome-mv3 # or --target=firefox-mv3
pnpm package --target=chrome-mv3 # or --target=firefox-mv3
```

### Testing

You can test the extension without publishing to the store. Before uploading the bundle to the browser, make sure to [build](#build) the code, then follow these steps:

#### For Chrome

1. Open Chrome
2. Click Settings -> Extensions -> Load unpacked (if you don't see this option, ensure you have <kbd>Developer mode</kbd> toggled on)
3. Select the `chrome-mv3-prod` folder inside of `build/`

#### For Firefox

1. Open Firefox
1. Go to `about:debugging#/runtime/this-firefox`
1. Click Load Temporary Add-on -> Select the `firefox-mv3-prod.zip` file. Please note, that some features (like extension settings) will not work.

## Release

We currently publish the extension for **Chrome** and **Firefox**.

To release a new version, follow these steps:

1. Bump up the version value inside `package.json` (`yarn version --patch` or `yarn version --minor`)
1. Push your changes to `main`
1. Compose a list of changes using the list of commits that were pushed since last version
1. [Create a new release](https://github.com/gitpod-io/browser-extension/releases/new), listing changes:

```yaml
    ### Changes

- Change/Fix A
    - Change/Fix B
    - Change/Fix C

### Credits

Thanks to @{EXTERNAL_CONTRIBUTOR_USERNAME} for helping! 🍊
    ```

For Firefox:

1. Sign in to our [Mozilla Add-On management page](https://addons.mozilla.org/en-US/developers/addon/onahq/edit) with the credentials from 1Password
2. Click <kbd>Upload new version</kbd>
3. Upload the zip file (`firefox-mv3-prod.zip`)
4. Go through the steps and submit

For Chrome:

1. Using your Google account, open the [`gitpod-browser-extension Google Group`](https://groups.google.com/g/gitpod-browser-extension)
1. If you don't have access, reach out for [help in Slack](https://gitpod.slack.com/archives/C04QC1ZMPV4)
   * An existing member of the group, who is also Verified (paid the $5 for verification) on the Chrome Webstore needs to [sync the group members in the webstore](https://chrome.google.com/webstore/devconsole/11ad35cc-5b54-416a-a789-f091e1007648/settings)
1. Navigate to the [Chrome Webstore console](https://chrome.google.com/webstore/devconsole/11ad35cc-5b54-416a-a789-f091e1007648), make sure you switch the `publisher` to `Gitpod`
1. Click "Upload new package"
1. Upload the zip file (`chrome-mv3-prod.zip`) and submit
1. Wait a few hours for the review to happen!