Giter VIP home page Giter VIP logo

scratchaddons's Introduction

Scratch Addons logoScratch Addons

Chrome Web Store Firefox Add-ons

About

Scratch Addons combines new and existing features and themes for the Scratch website and project editor into one easy-to-access and configurable browser extension. The mission is to provide a centralized, up-to-date platform for community development of new features and themes for Scratch.

Scratch Addons screenshot

About addons

An addon mainly consists of one or more userscripts (written in JavaScript) or userstyles (written in CSS) that run on the Scratch website or project editor.

Each addon declares its own addon manifest (addon.json file). This file specifies under which circumstances each one of its userscripts and userstyles should be injected into the page. It also contains user-facing information, such as the description of the feature, and information about the addon's settings.

Userscripts work similarly to extension content scripts running in the "main world" (the unprivileged context where chrome.* extension APIs are not available). Userscripts have access to addon.* APIs. They can use these built-in utilities for various purposes: waiting until a certain element exists on the page, listening to settings change events, getting a reference to the Scratch VM object, etc.

Addons are designed to be compatible with each other. They are also developed with performance, internationalization, accessibility, and privacy in mind.

Read the documentation for more information about addons.

About the extension

The Scratch Addons browser extension provides a settings page where users can enable, disable and configure addons. The extension interprets addon manifests, stores the user's settings, and provides APIs to userscripts. A new version of the extension is released to the stores regularly with new addons and features.

Addons beyond the Scratch Addons browser extension

Other open-source projects (such as Scratch forks) can also make use of the addons. For example, the TurboWarp and Adacraft project editors allow you to use most of the editor addons without installing browser extensions, and even while offline (TurboWarp Desktop).

File structure

Addons

  • addons-l10n: Translation for addon strings (one file per addon).
  • addon-api: Implementation of the addon.* JavaScript APIs.
  • addons: Each addon has its own directory, which must include an addon manifest file named addon.json.
  • libraries: Third-party libraries and other utilities, some of which are used by addons.

Others

  • .github: GitHub templates, workflows, and contributing files.
  • _locales: Translation strings for the browser extension (excluding addons).
  • background: Background scripts for the extension.
  • content-scripts: Content scripts, which among other things, execute userscripts and inject userstyles to the page.
  • images: Logos, screenshots and icons (excluding addon-specific images).
  • popups: Addon pages that are only accessible through the extension popup (for example, Scratch Messaging).
  • webpages: The settings page, extension popup, and other pages.

Installation

No building is required. The best way to download the source is with Git:

git clone https://github.com/ScratchAddons/ScratchAddons.git

For browser support information and other installation methods, check the documentation.

Loading the extension (Chrome)

To load the extension into most Chromium-based browsers, go to chrome://extensions, turn on developer mode, click "Load unpacked", and select the ScratchAddons folder.

Loading the extension (Firefox)

Go to about:debugging, select "This Firefox", click "Load Temporary Add-on...", and select the manifest.json file in the ScratchAddons folder.

Note

Firefox extensions loaded this way are removed when the browser is closed.

Contributing

Suggestions and bug reports

If you found a bug or have a suggestion create an issue after checking for duplicates. Alternatively, you can use our feedback page instead.

If you found a security vulnerability, please follow the instructions in our Security Policy instead.

Code

Before contributing code, please read our contributing guidelines.

We recommend using Visual Studio Code as the code editor.

Translations

Translations are handled by Transifex. If you are interested in translating the extension, read Joining the Localization Team.

Documentation

The Scratch Addons Docs are available at https://scratchaddons.com/docs/.

Most of the documentation is located in website-v2 (repository of the ScratchAddons.com website) in the /content/docs directory.

License

Scratch Addons is licensed under the terms of the GNU General Public License v3.0.

Other third-party libraries used are listed on /libraries/README.md.

scratchaddons's People

Contributors

apple502j avatar boomerscratch avatar chiroyce1 avatar cst1229 avatar dnin01 avatar explosion-scratch avatar functionalmetatable avatar garbomuffin avatar gducrash avatar github-actions[bot] avatar grahamsh-llk avatar hans5958 avatar iqnite avatar jeffalo avatar lisa-wolfgang avatar mxmou avatar mybearworld avatar nexensys avatar norbiros avatar pufferfish101007 avatar redguy12 avatar rgantzos avatar samq64 avatar scratchaddons-bot[bot] avatar tacodiva avatar thecolaber avatar towerofnix avatar weredime avatar worldlanguages avatar zenithrogue avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

scratchaddons's Issues

[Feature] Throw addon.settings.get(optionId) if option ID is invalid

Is your feature request related to a problem? Please describe.

Right now, it returns undefined, which can cause problems and even make you not notice misspellings.

Describe the solution you'd like

Make the function throw when the option ID isn't present in the manifest. Addons can't dynamically create settings, so there are no situations where throwing would be unexpected.

[Feature] addon.tab.getScratchVM() (Function.prototype.bind trap)

Is your feature request related to a problem? Please describe.

Many addons that interact with the editor will likely want a direct reference to the Scratch VM object.

Describe the solution you'd like

A new method inside addon.tab that resolves to the VM object when it's found.

Describe alternatives you've considered

Make the promise reject if the VM won't ever be found? Not sure how that would work.

Additional context

Code here: https://gist.github.com/BoomerScratch/0592337050810244236d69a4267b3913

Allow addons to use extension icon double click?

I got used to clicking once on the Scratch Notifier extension icon to open messages. Here, it wouldn't work since we want to implement popups (#16). Maybe we could find a way to trigger an action when the icon is double clicked, and allow the user to choose which addon can listen to that event.

[New addon] view unshared/deleted projects

Describe the new addon
when you get to a project 404 page maybe an addon can exist that attempts to see if it exists and then display it/link to it with scratch-gui or something idk

Link to the new addon
this is a suggestion but i think i'll try making it

Settings API for addons

Should work in all execution contexts, and be an event target.
"Child" settings, like the ones in the scratch-notifier addon, should only return true if their parent setting is enabled.

[Feature] Telling the user that there is an update available

We can use chrome.runtime.getManifest().version to get the current extension version, and then we can fetch the manifest on raw.githubusercontent.com. We can also fetch the CRX file from the chrome web store, extract it and read the manifest.json for more accuracy, but that requires more work and libraries.

If the manifest version doesn't equal, the user will be notified. We need to discuss a way to notify the user. If the user then opens the pop-up (the window that appears when clicking the extension icon), a message will appear saying that there is an update available. It also tells the user how to update the extension.

In the options page, there should also be a switch that disables/enables update notifications (enabled by default) and a number input which allows the user to change the update check interval. (I recommend 1 hour as the default value)

(I know that Chrome updates extensions automatically, but this is just something useful idk)

Userstyle collection

Here are the userstyles that I have collected so far:

Scratch forum editor buttons .svg’s
https://github.com/JeffaloBob/material-scratch-forum-editor-buttons
Forum quote beautifier:
https://github.com/BoomerScratch/userstyles/blob/master/scratch-forum-quote-code-beautifier.user.css
Forum post scrollbars:
https://github.com/BoomerScratch/userstyles/blob/master/scratch-forum-quote-code-beautifier.user.css
Scratch forums long signatures and scratch blocks scrollbarifier:
https://sheeptester.github.io/hello-world/userscripts/scratch-forums.user.css
Scratch dark mode (by _nix)
https://gist.github.com/towerofnix/806550f907da63f63f55bb39c99789bf

(I am in the process of archiving these)

Allow addons to use the context menu

Allow addons to add "right click extension icon" actions. However because of browser limitations, I think only about 5 addons could do this at the same time.
We should also consider allowing addons to add menu items when right clicking inside the Scratch website.

Notifications should be an optional permission

We should request the notification permission (and others potentially) only when the user enables an addon or addon setting that needs it. This is important to get approved in Chrome Web Store.

Iconify Won't Work On Extensions Page

Describe the bug

To Reproduce

Open the options page. See Not Working icons
Open console
See
not available

index.html:121 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-rHlxGRx2sBxFirVgDiDAJcH8G0KjhzqrwHXB4CNXtak='), or a nonce ('nonce-...') is required to enable inline execution.
index.html:1 Refused to load the script 'https://code.iconify.design/1/1.0.7/iconify.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Expected behavior

Icons should work

Device (please complete the following information):
ChromeOS

Privacy policy and/or security policy

Is your feature request related to a problem? Please describe.

Privacy policy: people sometimes want to know which data gets collected, and more. We can create a privacy policy for that.
Security policy: a security policy can be used to tell people what they need to do if they found a security vulnerability.

Describe the solution you'd like

For a privacy policy: create a PRIVACY.md markdown file.
For a security policy: create a SECURITY.md markdown file, or go here.

[New addon] exactcount by mxmou

Describe the new addon

Exact count is a JavaScript program that shows the exact number of projects in a Scratch studio, even if it's larger than 100.

Link to the new addon

https://github.com/mxmou/exactcount

Should probably not be enabled by default since it requires multiple requests. Or it could be enabled by default, but require user interaction.

Settings page mockup

Pls @GDUcrash
Make a pull request with mockup HTML/CSS for the settings page. Then I can make it reactive for Vue. Having an UI to interact with while developing is nice.

[New addon] image uploader

Describe the new addon
it uploads images

Link to the new addon
https://github.com/jeffaloBob/scratch-image-uploader

it comes in userscript/extension version, (although the userscript is a super hacky way of doing it...) i'm not really sure how this whole project works, but i'm assuming porting my thingy can't be too hard and its super cool so it must be there...

Allow for multiple addons using badge

And we should let users choose what addon can use the badge.
Also, what would happen if the addon the user configured to use the badge got disabled? 🤔

License discussion

Since this is an userscript collection, I think it is better to make the license compatible with common licenses, so I recommend GPL. For example, if a user requests his GPL-licensed userscript (griffpatch's dev tool for example) to be added, we will have to reject it, and I don't want this to happen! So I recommend using GPL.
There are still incompatible licenses, but they are usually very rare so it becomes a small issue after switching to GPL.
What license do you think we should choose?

Millions Of Userscripts To Add

Hello! I am very interested in Scratch extensions and userscripts; I use them on a daily basis. Here are some a userscripts you guys should add:

https://github.com/mxmou/exactcount (Is there a way to show comment, curators, and managers too?)
https://github.com/WorldLanguages/studioToolsBookmarklet (This is amazing.)
https://github.com/WorldLanguages/animatedThumbnailsBookmarklet (You should add a button on the scratch project sites themselves to add a new thumbnail. Also add a way to change thumbnails via MyStuff page.)
https://github.com/WorldLanguages/FollowersNumberEnabler (Just amazing, maybe add a # of favorites, comments, curated studios & following studios.)
https://github.com/WorldLanguages/isOnlinev2 (When I used this, it led me to a porn site. Make a working version of this that will also show if the person is online or not-found to the left of the follower button-, as long as they also use the add-on. )

I know it's a lot and some of this might not be possible, but these would be amazing.
(Can't wait to test out the addon on chrome when it's ready! If you guys have a beta, let me in plz. 😀

Implement popups

Would allow us to port Griffpatch's messaging extension into the extension popup, and potentially let users customize what popup to use (or if we let them move between them, their order)

Muting notifications

We should allow users to globally mute notifications by using the context menu.

Document addon.* APIs

  • addon.self
  • addon.auth
  • addon.account
  • addon.fetch
  • addon.browserTabs & addon.browserWindows
  • addon.notifications
  • addon.badge
  • global

Add griffpatch's developer tools

I think it does "weird" stuff by adding a trap to addEventListener. To avoid addons from interfering with each other, such traps should be handled by the addon handler and maybe we should provide a Scratch editor specific API.

addon.tab.* API

Allow userscripts to know basic stuff about the page they're currently on.

Remove CSP: and use a service worker instead?

You'll want to kill me for this lol, @BoomerScratch, yes I finally want to remove the CSP (but for other reasons)

I believe specifying unsafe-eval in the CSP might cause delays in extension reviews in the Chrome Web Store, sadly, because it's a hint we might be using remote code (we aren't). So, let's try to avoid any issues.
So if we move to a service worker model that allows addon JS files to become modules without us doing it by adding something like export default async function(addon, /* ... */) { at the start of the file, we can then use dynamic import like const addon = await import("url"); addon.default(); to run an addon persistent script, removing the requirement for a CSP since we're not using eval. Technically using eval and changing the code in the service worker produce identical results, but the last approach doesn't require any special manifest declarations to work, which should help with Chrome Web Store review times. The service worker won't be hard to read, so even if we get reviewed, it should be clear there's no remote code execution coming from the service worker. Without a CSP and without a hard to read service worker, a reviewer will easily tell we're not RCEing.
Content scripts aren't affected, and should continue to use eval() because our service worker only works in the background page, however for consistency we should wrap them in an async function as well (oh and TODO: I should make sure these evals are in strict mode as well).
Oh, and with this change, top level await could be used by addon scripts! :)
Only downside I see for this is a few more milliseconds before launching background addons, and the fact the Sources tab in devtools will show export default async function(addon, /* ... */) { at the start of the file, which might affect line number indicators, unless we make the first line of the real file go next to that, which might look weird, but at least line numbers will match.

[Feature] Automated linting

We can use ESLint for linting code automatically on pull requests and commits. Note: this requires a package.json. EDIT: noticed it isn't needed 😉 It is only required for generating a .eslintrc.json file.

[Bug] Options page fails to load in firefox

Describe the bug

Firefox send this warning:

Reading manifest: Warning processing options_page: An unexpected property was found in the WebExtension manifest.

To Reproduce

Just load it in firefox.

Expected behavior

Make options page behave normally.

Screenshots

图片

Device (please complete the following information):

  • OS: Win10
  • Browser: firefox
  • Version: none

Additional context

Write explainers

Explain persistent scripts (formerly background scripts), userscripts, frames (formerly popups).
Explain scope when running multiple scripts.
Clarify they always use strict mode.

Community health files checklist

These files are community healthfiles in the community profile here

  • Description (Technically not a file)
  • README
  • Code of conduct (#35)
  • Contributing guideline
  • License
  • Issue templates
  • PR templates
  • Repository admins accept content reports

[Bug] TypeError on handle-fetch.js

Describe the bug

Error in event handler: TypeError: Cannot read property 'startsWith' of undefined at chrome.webRequest.onBeforeSendHeaders.addListener.urls (chrome-extension://aeepldbjfoihffgcaejikpoeppffnlbd/background/handle-fetch.js:12:26) at subEventCallback (extensions::webRequestEvent:81:32)

To Reproduce

Not sure, happened while browsing other stuff, then saw the log in the devtools I left open.

Expected behavior

The code should check if details.initiator and details.originUrl are strings. (TODO: look at MDN, when would they not be?)

Device (please complete the following information):

Latest Chromium

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.