-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update localization files (2024-02-17T01:32:35.156Z)
- Loading branch information
1 parent
3fb1d00
commit 478fb76
Showing
9 changed files
with
361 additions
and
116 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
nb/markdown/docs/develop/adding-an-icon-to-a-setting-name.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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` på `/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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
68
nb/markdown/docs/develop/userscripts/debugging-userscripts.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
19
nb/markdown/docs/develop/userstyles/debugging-userstyles.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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å --> |
Oops, something went wrong.