surfer/docs/content/guides/includingAddons.md
2024-07-06 21:24:05 +02:00

88 lines
2.2 KiB
Markdown

+++
title = "Including addons"
weight = 10
+++
# Including addons
Gluon provides an automated system for including extensions in your project. The addons are downloaded and included during the `download` build step. Addons can be included in the project config (`surfer.json`).
```json
{
// Your options here
"addons": {
"ublock": {
"id": "uBlock0@raymondhill.net",
"url": "https://github.com/gorhill/uBlock/releases/download/1.39.0/uBlock0_1.39.0.firefox.xpi"
}
}
}
```
Note that the `id` is the gecko application id specified in the `manifest.json`.
```json
{
// ...
"browser_specific_settings": {
"gecko": {
"id": "uBlock0@raymondhill.net",
"strict_min_version": "60.0"
}
}
// ...
}
```
## Specifying location in customizable ui
By default, when adding an addon with a toolbar button, it will be placed next to the hamburger menu. However, you may want to place it somewhere else. To do this, you must change the customizable ui in a similar way to how you would when removing pocket.
You are going to want to open `engine/browser/components/customizableui/CustomizableUI.jsm`. At the top, you want to import the `ExtensionCommon` module.
```js
const { makeWidgetId } = ChromeUtils.import(
'resource://gre/modules/ExtensionCommon.jsm'
).ExtensionCommon
```
Then, add a constant with the id of the addon at the top of the file, for example:
```js
const kUBlockOriginID = 'uBlock0@raymondhill.net'
```
Now, you can go down to the `navbarPlacements` array (around line 240) and add
```js
`${makeWidgetId(kUBlockOriginID)}-browser-action`,
```
To the array where you want the icon to appear, for example:
```js
let navbarPlacements = [
'back-button',
'forward-button',
'stop-reload-button',
Services.policies.isAllowed('removeHomeButtonByDefault')
? null
: 'home-button',
'spring',
`${makeWidgetId(kUBlockOriginID)}-browser-action`,
'urlbar-container',
'spring',
'save-to-pocket-button',
'downloads-button',
AppConstants.MOZ_DEV_EDITION ? 'developer-button' : null,
'fxa-toolbar-menu-button',
].filter((name) => name)
```
Finally, export the changes you have made:
```sh
surfer export-file browser/components/customizableui/CustomizableUI.jsm
```