Skip to content

Commit

Permalink
Update localization files (2024-02-17T01:32:35.156Z)
Browse files Browse the repository at this point in the history
  • Loading branch information
scratchaddons-bot[bot] committed Feb 17, 2024
1 parent 3fb1d00 commit 478fb76
Show file tree
Hide file tree
Showing 9 changed files with 361 additions and 116 deletions.
10 changes: 10 additions & 0 deletions nb/markdown/docs/develop/adding-an-icon-to-a-setting-name.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: Legge til et ikon på et innstillingsnavn
---
For å legge til et ikon til et innstillingsnavn uten å [forårsake] (https://github.com/ScratchAddons/ScratchAddons/pull/1529) [krasj] (https://github.com/ScratchAddons/ScratchAddons/commit/ead64b9da1434e7ed593c141cba7b02addd70a54),

- Pass på at ikonfilnavnet ikke inneholder bindestreker.
- Skriv `@ICONFILENAME.svg` innstilling navn på `addon.json`
- Legg til `ICONFILENAME.svg``/images/icons/` hvis det mangler.
- Rediger `/background/load-addon-manifests.js` for å legge til `iconfilenameIcon: "@ICONFILENAME.svg",`
- Rediger `/addons/scratch-notifier/notifier.js` for innstillinger for Scratch Notifier.
23 changes: 23 additions & 0 deletions nb/markdown/docs/develop/getting-started/addon-basics.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
title: Addon Basics
---

## Hva er egentlig en tillegg?
Faktisk er en tilleggsfunksjon ikke mye mer enn et brukerskript, en brukerstil eller en kombinasjon av begge deler. Hvis noen av disse er relatert, gjør vi dem til en del av samme tilleggsfunksjon, under ett navn. For eksempel har tilleggsfunksjonen "Scratch 3 Developer Tools" et brukerskript som er ansvarlig for å legge til en søkeboks i redigeringsverktøyet, og en brukerstil som legger til CSS i den boksen.

## Hva er en brukerskript?
Et brukerskript er en bit JavaScript-kode som kjører sammen med en Scratch-fane. Du kan spesifisere hvor dette brukerskriptet skal kjøre, for eksempel bare på prosjektsider. Brukerskript er lignende innholdsskript på nettleserutvidelser, og hvis du noen gang har brukt en brukerskriptbehandler, vil du legge merke til at disse er omtrent det samme.
Brukerskript er nyttige for å endre oppførselen til Scratch-nettstedet, for eksempel å legge til eller fjerne knapper fra navigasjonslinjen.

## Hva er en brukerstil?
En brukerstil er lik en brukerskript; du kan også spesifisere URL-mønstre for dem. Imidlertid injiserer brukerstiler CSS i stedet for JavaScript. De brukes ofte sammen med brukerskript for å style elementer som er lagt til av dem, men de kan også brukes til å style native Scratch-elementer. Når det er tilfelle, kaller vi dem vanligvis "temaer".

## Konseptuelt, hva bør være en tilleggsfunksjon?
Du lurer kanskje på om det er en bedre idé å lage en ny tillegg, eller endre en eksisterende.
Hvis 2 tillegg deler noen av disse, bør de sannsynligvis slås sammen.
- Både trenger, eller trenger ikke, tillatelser som krever brukerinteraksjon (som varsler).
- De deler mye kode.
- Brukeren ville forvente at tillegget tilbyr begge funksjonene.
- Hvis de blir separert, vil de forstyrre hverandre.

Husk at tillegg kan tilpasses av brukeren - å legge til ny funksjonalitet påvirker ikke gamle brukere av tillegget, med mindre vi med vilje gjør det.
68 changes: 68 additions & 0 deletions nb/markdown/docs/develop/userscripts/debugging-userscripts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: Feilsøkingstips
description: Tips to easily debug userscripts, and edge cases to consider.
---

Tips to easily debug userscripts, and edge cases to consider.

## Tips

### Det er ikke alltid nødvendig å laste inn utvidelsen på nytt.

Det er ikke nødvendig å laste inn utvidelsen på nytt ved å gå til `chrome://extensions` når du endrer kilden til allerede eksisterende JavaScript- eller CSS-filer. I slike tilfeller er det nok å laste inn siden på nytt.

### Use the addon.* API from the console

For development, you may choose to expose the `addon` object as a global variable, so that it can be accessed within the browser console.

```js
export default async function ({ addon, console }) {
window.addon = addon;
// ...
}
```

### Set breakpoints with the "debugger" keyword

The `debugger;` keyword in JavaScript will freeze the page when ran, if the developer tools are open. Setting breakpoints is useful to inspect the value of local variables during execution.

### Filter console messages by addon ID

Enter the addon ID on the "filter" console search bar to only view logs and warnings, as well errors logged with `console.error()`. Keep in mind that this will hide all exceptions, unless you're explicitly logging them in your code.


## Edge cases


### Scratch project page and editor


#### The DOM is destroyed after going inside or outside the editor

Scratch creates all HTML elements each time the user clicks "see inside" or "see project page", and destroys the old ones.
This can usually be fixed by using `addon.tab.waitForElement` or the `urlChange` event.

#### The Scratch editor language can be changed without a reload

Unlike the Scratch website, the Scratch editor will not reload when changing the language. When selecting a different language, Scratch might destroy and re-create some HTML elements.

#### Other situations to consider

- The project editor may be used without a defined project ID (for example, when logged out).
- The editor might switch from LTR to RTL (or viceversa) without requiring a page reload.


### Scratch website

#### scratch-www pages don't reload after logging in

Unlike scratchr2 pages, scratch-www pages do not force a page reload after logging in. For example, if you go to a project page while being logged out, then log in, the page will not reload. This also affects studios, the messages page, etc.
In contrast, all Scratch pages reload after logging out.

#### Project pages never return 404s

Even if the project is unshared or doesn't exist, Scratch returns a 200 HTTP status code. The "our server is Scratch'ing its head" message is added dynamically to the page by Scratch.

#### Other situations to consider

- Each of the 4 tabs inside studios have different URLs, but do not trigger a browser navigation. Addons that affect any of the 4 pages should run, no matter the initial URL.
108 changes: 108 additions & 0 deletions nb/markdown/docs/develop/userstyles/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
---
title: Brukerstyler
description: Userstyles are CSS rules that affect Scratch pages. They can apply styles to existing Scratch UI, as well as to elements that were added to the page by addons.
---

Userstyles are CSS rules that affect Scratch pages. They can apply styles to existing Scratch UI, as well as to elements that were added to the page by addons.


## Declaring userstyles in the addon manifest

{{< admonition warning >}}
**Some changes require an extension reload** from `chrome://extensions` to take effect, such as updating the addon manifest file.

It's not necessary to reload the extension when changing the source of an already existing userstyle CSS file. In those cases, reloading the page is enough.
{{< /admonition >}}

Userstyles are declared inside a "userstyles" array, similarly to userscripts.

Each item of the array must have the following properties:
- `"url"`: the relative URL to a CSS file.
- `"matches"`: the list of Scratch pages where the userstyle will be applied. See [matches](/docs/reference/addon-manifest/#matches) for more information.
- `if`: a list of conditions that may toggle whether the userstyle is currently applied or not. See [userstyle.if](https://scratchaddons.com/docs/reference/addon-manifest/#if) for more information.

Example manifest:
```json
{
"name": "Scratch Messaging",
"description": "Provides easy reading and replying to your Scratch messages.",
"userstyles": [
{
"url": "styles.css",
"matches": ["projects", "https://scratch.mit.edu/", "profiles"]
},
{
"url": "resize.css",
"matches": ["projects"],
"if": {
"settings": {
"resize": true
}
}
},
],
"settings": [
{
"name": "Resize messages",
"id": "resize",
"type": "boolean",
"default": false
}
],
"tags": ["community"],
"enabledByDefault": false
}
```


## Dynamically toggling userstyles after page load

It is usually unnecessary to use a JavaScript userscript to dynamically toggle whether a userstyle is active on the page in response to the user changing settings.

- Including `dynamicEnable: true` in the addon manifest will allow the extension to dynamically inject userstyles if the addon has been enabled (for the first time) after loading the page.
- Including `dynamicDisable: true` in the addon manifest will allow the extension to dynamically remove or reinject userstyles if the addon has been toggled, without requiring a page reload.
- Including `updateUserstylesOnSettingsChange: true` in the addon manifest will re-evaluate "if" conditions that depend on user settings without requiring a page reload. The extension will remove or inject userstyles accordingly.


## Accessing addon settings from CSS

Userstyles can easily obtain color and numerical settings through CSS variables. They can also access settings from other enabled addons.

The CSS variables always follow the `--addonId-settingId` format. Setting IDs are always converted from kebab-case to camelCase.

These CSS variables are always available for all enabled addons and no manifest property is necessary to expose them. They are also synchronized with user settings without requiring a page reload.

```css
.sa-progress-bar {
/* Color setting */
background-color: var(--progressBar-bgColor);

/* Color setting with fallback */
border-color: var(--editorDarkMode-border, #fc7c24);
/* If editor-dark-mode is disabled, the fallback will be used instead */

/* Numerical setting */
height: calc(1px * var(--progressBar-height));
}
```


## Custom CSS variables

If a userstyle needs to choose between one of two values based on a background color (text contrast) or an addon setting, JavaScript isn't necessary. These conditions, among others, can be declared in the addon manifest through [customCssVariables](/docs/reference/addon-manifest/#customcssvariables), and the userstyle can simply reference that CSS variable.


## Applying styles only inside the editor

The extension automatically toggles a class name on the `<body>` element when the user enters or exits the project editor.

For example, styling `<input>` elements inside and outside the editor differently:
```css
.sa-body-editor input {
/* Only applies if `addon.tab.editorMode` is `editor` or `fullscreen` */
}

body:not(.sa-body-editor) input {
/* Only applies if `addon.tab.editorMode` is NOT `editor` nor `fullscreen` */
}
```
19 changes: 19 additions & 0 deletions nb/markdown/docs/develop/userstyles/debugging-userstyles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: Feilsøkingstips
description: Tips for enkel feilsøking av brukerstiler, og kanttilfeller å vurdere.
---

Tips for enkel feilsøking av brukerstiler, og kanttilfeller å vurdere.

## Tips

### Det er ikke alltid nødvendig å laste inn utvidelsen på nytt.

Det er ikke nødvendig å laste inn utvidelsen på nytt ved å gå til `chrome://extensions` når du endrer kilden til allerede eksisterende JavaScript- eller CSS-filer. I slike tilfeller er det nok å laste inn siden på nytt.

<!-- TODO: bruk injectAsStyleElt for tillegg som må injiseres raskt for å unngå blink (for eksempel mørke moduser) -->


<!-- ## Kanttilfeller -->

<!-- Ingen ennå -->
Loading

0 comments on commit 478fb76

Please sign in to comment.