Giving Scratch 3 "Inspect Element Surgery"!

chexbox

I decided to play with the inspector on firefox. Here's my what I learned:

Each block has a “hitbox”. It is a <rect> html svg element which opacity is usually 0.

I changed the font. It is amazing how many times the font is defined.

I made everything red! (font still changed)

Image switched with my own.

Scratch does not like small screens:

Share what you've learned about Scratch 3.0 and it's styling below!

Last edited by chexbox (April 18, 2018 13:44:42)

LuckyLucky7

I was able to make some blocks' name empty;
I deleted some elements trying to do this.

ryadyl

I'm trying to use inspect element to recreate “hacked blocks” in scratch 3.0. I was trying to make

if (answer) then

end

so that the password would be “true” and you could not find this by looking inside. I have not currently succeded, but I feel that I am getting close.

Garamol56

Run

document.querySelector("[class^=target-pane_target-pane]").classList.toggle("reversed"),document.querySelector("[class^=gui_flex-wrapper]").classList.toggle("reversed");

In your browser's console to swap the side of the editor

JGames101

Garamol56 wrote:
Run
document.querySelector("[class^=target-pane_target-pane]").classList.toggle("reversed"),document.querySelector("[class^=gui_flex-wrapper]").classList.toggle("reversed");
In your browser's console to swap the side of the editor

That doesn't do anything, there's no reversed class. Use

document.querySelector("[class^=target-pane_target-pane]").style.flexDirection = "row-reverse",document.querySelector("[class^=gui_flex-wrapper]").style.flexDirection = "row-reverse";

Instead.

Last edited by JGames101 (Jan. 5, 2019 23:32:55)

infinitytec

I'm using this to help me make themes.

LuckyLucky7

JGames101 wrote:

Garamol56 wrote:
Run
document.querySelector("[class^=target-pane_target-pane]").classList.toggle("reversed"),document.querySelector("[class^=gui_flex-wrapper]").classList.toggle("reversed");
In your browser's console to swap the side of the editor

That doesn't do anything, there's no reversed class. Use

document.querySelector("[class^=target-pane_target-pane]").style.flexDirection = "row-reverse",document.querySelector("[class^=gui_flex-wrapper]").style.flexDirection = "row-reverse";

Instead.

This might potientally help me make a Scratch 3 mod where the stage is on the left! Thanks!

NitroCipher

Just added the swapping to Theme3, thanks JGames101!

ItsDaBeans

That doesn't do anything, there's no reversed class. Use

document.querySelector("[class^=target-pane_target-pane]").style.flexDirection = "row-reverse",document.querySelector("[class^=gui_flex-wrapper]").style.flexDirection = "row-reverse";

Instead.

Wow that works!

iiBus

ryadyl wrote:
I'm trying to use inspect element to recreate “hacked blocks” in scratch 3.0. I was trying to make
if (answer) then
doesn't make sence
end
so that the password would be “true” and you could not find this by looking inside. I have not currently succeded, but I feel that I am getting close.

That doesn't make sence

SpeedDesign

can you do small blocks with this?

infinitytec

SpeedDesign wrote:
can you do small blocks with this?

I have not gotten that to work.

Sheep_maker

SpeedDesign wrote:
can you do small blocks with this?

The blocks are rendered using SVGs generated by JavaScript; even if you manage to update every single SVG, it'll all get reset if you don't update the JavaScript variables as well

frodewin

Sheep_maker wrote:
SpeedDesign wrote:
can you do small blocks with this?
The blocks are rendered using SVGs generated by JavaScript; even if you manage to update every single SVG, it'll all get reset if you don't update the JavaScript variables as well

So as far as I understood making the blocks smaller is difficult. But would it be possible to increase font size and weight within a block so that the block text is still readable when viewed in 50% size?

Sheep_maker

frodewin wrote:
Sheep_maker wrote:
SpeedDesign wrote:
can you do small blocks with this?
The blocks are rendered using SVGs generated by JavaScript; even if you manage to update every single SVG, it'll all get reset if you don't update the JavaScript variables as well

So as far as I understood making the blocks smaller is difficult. But would it be possible to increase font size and weight within a block so that the block text is still readable when viewed in 50% size?

Increasing the font size and weight would increase the text width, but each text part (eg block labels and inputs) and the block width itself is dependent on the width of the text before it; increasing the width would result in overlapping and overflowing text

--Explosion--

iiBus wrote:
ryadyl wrote:
I'm trying to use inspect element to recreate “hacked blocks” in scratch 3.0. I was trying to make
if (answer) then
doesn't make sence
end
so that the password would be “true” and you could not find this by looking inside. I have not currently succeded, but I feel that I am getting close.
That doesn't make sence

What you can do for hiding a password is translate a string to numbers and then do some sort of mathematic function that us hard to reverse on that number and then when the user enters a password it checks that aginst the actual encrypted version, that way it is very hard to crack

NitroCipher

staffordboys wrote:
iiBus wrote:
ryadyl wrote:
I'm trying to use inspect element to recreate “hacked blocks” in scratch 3.0. I was trying to make
if (answer) then
doesn't make sence
end
so that the password would be “true” and you could not find this by looking inside. I have not currently succeded, but I feel that I am getting close.
That doesn't make sence
What you can do for hiding a password is translate a string to numbers and then do some sort of mathematic function that us hard to reverse on that number and then when the user enters a password it checks that aginst the actual encrypted version, that way it is very hard to crack

Take a look at this project I made ~2.5 years ago https://scratch.mit.edu/projects/135744907 , it does exactly what @staffordboys is saying.

Last edited by NitroCipher (May 25, 2019 05:00:35)

klasky1

iiBus wrote:
ryadyl wrote:
I'm trying to use inspect element to recreate “hacked blocks” in scratch 3.0. I was trying to make
if (answer) then
make sence for the {if (answer) then
...
end} block
end
so that the password would be “true” and you could not find this by looking inside. I have not currently succeded, but I feel that I am getting close.
That doesn't make sence

it is. works in snap.

Last edited by klasky1 (May 23, 2019 11:46:05)

Creeper_Bomb

ryadyl wrote:
I'm trying to use inspect element to recreate “hacked blocks” in scratch 3.0. I was trying to make
if (answer) then

end
so that the password would be “true” and you could not find this by looking inside. I have not currently succeded, but I feel that I am getting close.

The answer is 1. Binary code uses 1s and 0s. Computers use binary code as true & false. 1 = true.

Kami-ko

Ha ha …. inspect is blocked on my (school) computer …. haha … *starts crying*

Discuss Scratch