Remove support for INJECT_JS_PLUGIN and INJECT_JS_MODULE_PLUGIN

Content Security Policy for extensions does not allow injecting
arbitrary JS.

We have considered passing a list of URLs from the extension to the
web app instead, but that is non-trivial to do, because they also
cannot access the `window` object of each other. The extension could
add an element to the DOM and set an attribute on that. The web app
would then read the attribute and load those plugins instead of the
ones listed in the server config. Apart from adding complexity the
disadvantage is that the web app would have to be changed, and thus
you could not use the concept for existing open source servers.

There is a trivial workaround though: You can just redirect an exsiting
plugin to your new plugin. Every Gerrit server typically has a plugin
that can be replaced during development, so this is not much of a
limitation.

Google-Bug-Id: b/317481553
Release-Notes: Remove INJECT_JS_PLUGIN and INJECT_JS_MODULE_PLUGIN
Change-Id: If954960ad56aba5595c6ec029ce8211fcb6ec5b0
8 files changed
tree: 4c0a65e06d0e53c57df0e74279ca812a21f3a6c6
  1. data/
  2. src/
  3. webpack/
  4. .gitignore
  5. .prettierrc
  6. demo.png
  7. package-lock.json
  8. package.json
  9. README.md
  10. release-notes.md
  11. tsconfig.json
README.md

Gerrit FE Dev Helper

Gerrit FE Dev helper is a Chrome extension that will focus on helping frontend developers on Gerrit development.

As mentioned in readme from polygerrit-ui, we already support to start your local host for developing / debugging / testing, but it has quite a few restrictions:

  1. No auth support
  2. Restart needed to switch hosts
  3. Not easy to test plugins

To solve these pain points, Tao Zhou created this Chrome extension. It proxies all assets requests or any requests to a local HTTP server, and has the ability to inject any plugins exposed by the local HTTP server.

Features

See in release notes and Features below.

Install

The easiest is to install from the Chrome web store here: https://chrome.google.com/webstore/detail/gerrit-fe-dev-helper/jimgomcnodkialnpmienbomamgomglkd.

After you have installed and enabled the extension, you should see something similar to demo.png.

BUILD

To build from source:

npm install
npm run build

Then you should have gerrit_fe_dev_helper.zip that you can test with.

How to use

  1. For Gerrit core development, start the local Gerrit dev server to host app code locally
yarn start

Or if you are developing a plugin, serve your plugin via a local HTTP server via any means.

Example:

npx http-server -c-1 --cors
  1. Go to any Gerrit sites, enable the extension by clicking the icon
  2. You should see a red notice show up in the bottom right of the page: Gerrit dev helper is enabled, and now your Gerrit assets should be loaded from your local HTTP server
  3. Change files locally and refresh the page, you should have the changes immediately

The extension comes with a set of default rules, but you can change the rules by clicking the extension icon again.

The extension supports different type of rules:

  1. block: block a certain request
  2. redirect: redirect a url to another url
  3. injectHtmlCode: inject a piece of html code to the page
  4. addReqHeader: to add arbitrary header when you send a request
  5. addRespHeader: to add arbitrary header when you receive a request
  6. rRespHeader: to remove arbitrary header on any response

How to use dev helper with js plugins

For existing plugins just redirect from the where the plugin is normally loaded from to http://localhost:8081/plugins/my-plugin.js and put your local plugin file into the polygerrit-ui/app/plugins folder.

For new plugins you also have to use a redirect rule, because the Chrome extension is not allowed to inject JavaScript from arbitrary source by Content Security Policy. The easiest option is to pick the most simple or irrelevant plugin that your Gerrit server has, and redirect from that.

Testing a new version

  • Execute npm run build.
  • Go to chrome://extensions/.
  • Turn on Developer Mode.
  • Click Load Unpacked.
  • Choose the dist directory.

As a Google developer you will have to add a key to the manifest.json in the dist/ directory as documented here: http://go/extension-identification#i%E2%80%99m-developing-a-chrome-extension-on-my-computer

Publish a new version to the Chrome Webstore

This section is for members of Google's developer team only.

Contact

Please don't hesitate to contact dhruvsri@google.com for support on this extension.