Find file History
lguychard In browser extension, make all GraphQL api requests from background p…
…age (#1954)

Fixes #1945

Makes sure all GraphQL API requests are sent from the background page, so as to bypass CORS restrictions when running on private code hosts with the public Sourcegraph instance. This allows us to run extensions on private code hosts without needing a private Sourcegraph instance.
Latest commit 9eef8a3 Jan 21, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
.github use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
.vscode use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
config add storybook stories for ActionItem and Toggle (#1698) Jan 8, 2019
node_modules use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
scripts fix web-ext build script Nov 29, 2018
src In browser extension, make all GraphQL api requests from background p… Jan 21, 2019
stories Fix Phabricator script (#1578) Jan 2, 2019
.arcconfig use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
.editorconfig use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
.gitignore Use puppeteer for browser extension e2e testing (#1022) Nov 16, 2018
.stylelintrc.json use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
LICENSE use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
Makefile use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
README.md Use puppeteer for browser extension e2e testing (#1022) Nov 16, 2018
babel.config.js clean up extension code (#1090) Nov 21, 2018
cypress.json use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
detailed_description.txt use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
gulpfile.ts Fix Phabricator script (#1578) Jan 2, 2019
jest.config.js use jest for testing (#1456) Dec 17, 2018
package.json use jest for testing (#1456) Dec 17, 2018
postcss.config.js use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
readme-load-extension-asset.png use single root package.json, do not build intermediate shared code (#… Nov 12, 2018
tsconfig.json use jest for testing (#1456) Dec 17, 2018
tslint.json Use shared function for rendering markdown Jan 9, 2019
yarn.lock Use puppeteer for browser extension e2e testing (#1022) Nov 16, 2018

README.md

Sourcegraph browser extensions

code style: prettier license

chrome version chrome users chrome rating\

Overview

The Sourcegraph browser extension adds tooltips to code on GitHub, Phabricator, and Bitbucket. The tooltips include features like:

  • symbol type information & documentation
  • go to definition & find references (currently for Go, Java, TypeScript, JavaScript, Python)
  • find references

🚀 Install: Sourcegraph for Chrome

Sourcegraph for Firefox is temporarily unavailable on Mozilla's Firefox Add-ons site. See issue #744 for a workaround and updates.

It works as follows:

  • when visiting e.g. https://github.com/..., the extension injects a content script (inject.bundle.js)
  • there is a background script running to access certain chrome APIs, like storage (background.bundle.js)
  • a "code view" contains rendered (syntax highlighted) code (in an HTML table); the extension adds event listeners to the code view which control the tooltip
  • when the user mouses over a code table cell, the extension modifies the DOM node:
    • text nodes are wrapped in (so hover/click events have appropriate specificity)
    • element nodes may be recursively split into multiple element nodes (e.g. a &Router{namedRoutes: contains multiple code tokens, and event targets need more granular ranges)
    • ^^ we assume syntax highlighting takes care of the base case of wrapping a discrete language symbol
    • tooltip data is fetched from the Sourcegraph API
  • when an event occurs, we modify a central state store about what kind of tooltip to display
  • code subscribes to the central store updates, and creates/adds/removes/hides an absolutely positioned element (the tooltip)

Project Layout

  • src/extension/
    • Entrypoint for browser extension builds. (Includes bundled assets, background scripts, options)
  • src/browser
  • src/libs/
    • Isolated pieces of the browser extension. This contains code that is specific to code hosts and separate "mini applications" included in the browser extension such as the src omnibar cli.
  • src/libs/phabricator/
  • src/shared/
    • Code shared by the extension and the libraries. Ideally, nothing in here should reach into any other directory.
  • src/config/
    • Polyfills and configuration/plumbing code that is bundled via webpack. The configuration code adds properties to window that make it easier to tell what environment the script is running in. This is useful because the code can be run in the content script, background, options page, or in the actual page when injected by Phabricator and each environment will have different ways to do different things.
  • src/e2e/
    • E2e test suite.
  • scripts/
    • Development scripts.
  • webpack
    • Build configs.
  • build
    • Generated directory containing the output from webpack and the generated bundles for each browser.

Requirements

  • node
  • yarn
  • make

Development

For each browser run:

yarn run dev

Now, follow the steps below for the browser you intend to work with.

Chrome

  • Browse to chrome://extensions.
  • If you already have the Sourcegraph extension installed, disable it by unchecking the "Enabled" box.
  • Click on Load unpacked extensions, and select the build/chrome folder.
  • Browse to any public repository on GitHub to confirm it is working.
  • After making changes it is necessary to refresh the extension. This is done by going to chrome://extensions and clicking "Reload".

Add dist folder

Updating the bundle

Click reload for Sourcegraph at chrome://extensions

Firefox (hot reloading)

In a separate terminal session run:

yarn global add web-ext
yarn run dev:firefox

A Firefox window will be spun up with the extension already installed.

Updating the bundle

Save a file and wait for webpack to finish rebuilding.

Caveats

The window that is spun up is completely separate from any existing sessions you have on Firefox. You'll have to sign into everything at the begining of each development session(each time you run yarn run dev:firefox). You should ensure you're signed into any Sourcegraph instance you point the extension at as well as Github.

Firefox (manual)

  • Go to about:debugging
  • Select "Enable add-on debugging"
  • Click "Load Temporary Add-on" and select "firefox-bundle.xpi"
  • More information

Updating the bundle

Click reload for Sourcegraph at about:debugging

Testing

  • Unit tests: yarn test
  • E2E tests: yarn test:e2e

Deploy

Deployment the Chrome web store happen automatically in CI when the bext/release branch is updated. Releases are also uploaded to the GitHub releases page and tagged in git.

To release the latest commit on master, ensure your master is up-to-date and run

git push origin master:bext/release