►
Description
Having fun with Rust everywhere possible. With a short insight into the skeleton of a web extension, we are going to manipulate websites to our liking. Including a small dive into a comfortable build setup for a full-blown web extension.
About Karl Grasegger
Passionate web developer with a love for trying out new things.
Rust Linz at https://rust-linz.at
Twitter: https://twitter.com/rustlinz
Speak at Rust Linz: https://sessionize.com/rust-linz
A
A
My
experiences
today
are
from
trying
to
port
a
web
extension
from
javascript
to
rust
because
after
I
built
it,
I
just
realized.
Hey.
We
have
web
assembly.
What
stuff
can
I
do
with
it
and
yeah?
So
I
just
sat
down
and
started
trying
to
build
this
web
extension
and
yeah.
The
purpose
of
this
talk
is
just
to
give
a
little
insight
into
the
bits
and
pieces
how
to
piece
together
to
get
something
working.
A
We're
gonna
build
yeah,
not
great
stuff,
but
it's
in
rust.
So
it's
awesome
anyway.
Right
now
that
I
told
you
why
we
did
that
or
why
we
do
it.
Let
me
tell
you
how
a
bit
about
web
extensions
for
those
who
don't
know
those
are
the
add-ons
you
can
install
in
chrome
and
firefox
in
microsoft,
edge
and
even
in
safari.
A
A
At
the
heart
of
web
extension,
there's
a
manifest
json,
that's
basically
a
bunch
of
metadata.
What
resources
you
want
to
load
and
the
rest
of
the
structure
of
the
web
extension
is
really
up
to
you.
So
that's
good,
because
we
have
a
lot
of
flexibility
when
we
want
to
automate
stuff
and
then
I'm
just
going
to
show
you
a
really
simple,
manifest
json.
A
That's
just
telling
the
browser
hey.
I
have
the
extension
named
carl's,
github
enhancer,
that's
add
that's
vital
info
to
github
repos.
It
has
a
content,
script
that
matches
the
domain
github.com.
So
we
have
a
permission
model
and
with
the
content
script
matching
you
can
basically
just
say:
hey.
I
don't
need
every
domain.
I
just
need
this
domain.
We
also
have
other
permission
models
which
I
will
come
back
to
later
and
yeah.
So
we
have
this
manifest
json.
We
have
some
files
somewhere.
A
How
do
we
distribute
it?
It's
basically
just
a
zip
file
when
you
upload
your
extension
to
the
chrome
or
firefox
web
store
or
extension
gallery.
You
just
upload
a
zip
file
except
for
safari,
because
that
needs
to
be
different.
You
build
a
whole
app
out
of
it.
Luckily,
there's
an
easy
command
to
do
that,
so
we
don't
have
to
play
around
with
xcode
yeah
so
that
that
was
a
short
introduction.
A
A
A
A
A
A
A
That's
really
one
of
the
first
steps
I
took
with
my
non-rust
extension
to
just
get
some
output
anywhere
to
see
if
it's
working
and
let's
jump
into
the
code.
I
have
a
scripts
folder
here
which
contains
sub
projects
which
contain
the
extension
scripts,
and
this
is
really
really
simple
when
you
work
with
the
book.
Sorry,
when
we
work
with
the
web
extensions,
we
work
with
a
web
assembly,
so
everything
you
know
from
working
with
webassembly.
Another
project
applies
here
too.
A
And
we
just
import
the
log
one
function
from
websis
and
put
a
js
value
in
there
and
that's
our
console
output,
but
that's
not
really
much
and
it's
not
changing
something
about
the
website.
So
the
next
thing
I
did
was
just
search
any
element
I
could
alter
in
an
easy
fashion
and
for
github
I
choose
to
replace
the
logo.
A
A
A
A
A
So
in
the
other
example,
I
imported
the
log1
function
into
my
code,
so
I
can
log
to
the
console,
but
there's
actually
another
way.
I
can
just
import
the
log
function
from
javascript
the
way
that's
working,
I'm
defining
my
function,
that's
named
log
and
it
gets
a
message
which
is
a
string
pointer
now
the
wasn't
binding
macro
has
some
settings.
Basically
that's
about
name
spacing.
A
A
Okay
and
then,
of
course,
we
need
some
entry
point
to
run
this
code
and
you
can
either
export
a
function
to
javascript
and
then
call
it
from
the
javascript
part.
But
I
just
want
to
write
rust
here.
Not
a
single
line
of
javascript
is
in
this
whole
project.
So
what
we
do?
Instead,
we
define
a
public
main
function
and
we
export
it
with
wealth
and
bank
again
again
and
it
was
a
start
parameter.
A
A
A
A
A
B
A
As
I
said,
visual
studio
code
is
not
much
help
with
the
setup
because
it
gets
hella
confused
with
the
top
level
cargo
tunnel,
but
yay.
Thank
you.
It
worked
very
nice.
So
let's
look
at
a
new,
manifest
json
in
our
content
scripts.
We
now
have
a
second
object
that
matches
github.com
and
that
loads.
Our
now
github
logo
replacement
js.
So
in
the
background
it
automatically
generated
the
github
local
replacement
version
and
made
this
whole
thing
working.
A
A
A
A
A
A
It's
spelled
differently.
So,
according
to
the
best
practices
in
rust,
it's
a
snake,
no,
not
snake
case,
it's
an
underscore
in
all
letters
in
javascript.
It
would
be
written
like
that.
So
that's
a
difference,
and
just
so
you
know
where
I
get
this
query
selector
from
it's,
not
the
best
thing,
because
the
a
element
here
has
no
id.
So
we
have
to
trust
github
to
not
change
anything
about
it
too
much
and
I
chose
to
go
with
the
a
with
the
area
label
home
page
as
a
query.
Selector.
A
A
A
Yeah,
I'm
going
to
pause
here
for
my
moment
we're
going
to
come
back
to
the
logo
wrapper
and
how
to
change
the
element
down
down
there.
What
we
do
need
to
do,
first,
which
I
totally
overlooked
as
we
we
need
to
create
an
image
element
before
we
can
replace
or
to
replace
the
svg
and
the
logo.
We
need
an
image
element
to
place
in
there.
A
We
could,
of
course,
just
write
text
in
there,
but
with
an
html
image
element,
we
automatically
get
the
right
thing
and
I'm
just
going
to
import
so
websites
exports
all
this,
these
different
elements
as
their
own
type,
which
must
be
a
heck
of
a
lot
of
work,
but
they
are
defined
somewhere.
So
they
export
it
that
way,
and
we
can
just
yeah
we
we
need
an
image
url,
because
we
need
an
image
element.
A
B
B
A
A
And
with
the
type
we
we
get
some
things
we
can
set
and
one
of
those
things,
so
we
can
set
the
attributes
source
as
an
attribute
and
if
you
just
create
an
html
element,
it
doesn't
have
the
attribute
source.
So
it's
really.
I
was
surprised
how
strictly
typed
this
stuff
is
at
this
point
right,
so
we
have
a
function.
That's
named
set
source
and
yeah.
A
A
A
A
Now
we
also
need
to
do
something
else,
and
again
this
is
kind
of
we.
We
do
it
in
rust,
because
we
can.
We
need
to
add
a
bit
of
styling
because
it's
not
vertically
aligned
that
way,
and
that
was
a
bit
of
a
learning
curve
here,
because
we
can't
set
the
style
directly
via
set
style,
but
with
web
assembly
we
have
to
get
a
style
context,
some
frameworks,
let's
say,
and
then
in
this
style
we
have
now
we
set
the
css
text.
A
Again,
I'm
only
doing
this
because
I
can
and
rust
not
because
it's
the
best
way
to
do
it.
You
can
just
include
css
with
webassem
with
with
web
extension.
It's
really
really
easy,
so
that
wouldn't
be
a
problem.
Okay,
so
we
have
image
element
with
the
right
css
class.
How
do
we
display
it
and
depending
on
if
we
found
a
logo,
wrapper
up
here
so
back
here
and
that's
an
option?
A
A
To
image
element
outer
html,
that's
honestly,
just
something
I
use
away
from
javascript.
I
don't
know
if
the
outer
html
is
needed
here,
but
we
need
to
get
some
text.
We
want
to
put
into
the
other
text
so
that
works
and
if
we
have
no
wrapper
we're
gonna,
just
log
to
the
console
and
the
logo.
Red
bar
was
not
found.
A
We
search
for
an
existing
logo
up
here,
then
we
get
the
image
url,
because
when
we
use
an
extension
there's
I'm
going
to
show
you
in
a
moment
what
the
generated
url
is
and
then
we
search
for
the
element
on
the
page.
No,
then
we
create
a
new
element
on
the
page
set
some
properties,
and
then
we
set
the
new
element
as
the
content
of
the
old
element.
A
A
A
This
is
prelude
loaded
by
the
wasm
pack
crate
and
in
the
end,
at
the
bottom
we
load
and
we
use
the
same,
get
url
here.
We
just
used
to
generate
a
url
to
our
wesson
file
and
we
run
that
through
wasn't
bind
again,
and
this
should
result
in
yeah
github
having
a
nice
logo
for
the
first
time
in
its
history
from
a
really
good
product.
So
for
those
who
don't
know,
this
is
the
gitlab
logo
and
I
kind
of
love
gitlab.
A
So
wasn't
a
no-brainer
for
me
to
put
the
logo
of
the
better
product
on
here,
as
you
can
see
when
I
reload
there's
a
little
delay
in
there,
but
we
get
the
new
github
logo
and
we
could
do
anything
here
and
we
could
the
way
I
altered
this
logo.
We
can
alter
anything
on
this
website,
so
we
could
change
all
the
colors
to
pink.
We
could
change,
I
don't
know
we
could
load
in
new
fonts.
A
A
A
A
A
I
spent
way
too
much
on
this
time
on
this
build
process
really
way
too
much
time,
but
it
was
so
much
fun.
I'm
gonna
jump
into
the
cargo
tunnel
a
bit.
I
have
this.
A
cargo
uses
tomml
and
I
can
just
use
my
own
keys
in
there
and
add
new
arrays
and
stuff.
So
what
I
did
was
I
don't.
I
didn't
want
to
manage
two
version
strings.
I
didn't
want
to
manage
two
authors
and
stuff,
so
I
just
thought
hey.
A
It
would
be
cool
if
I
have
it
all
in
one
place
and
when
I
bump
my
rust
version,
my
great
version,
I
just
get
the
correct
manifest
for
it,
so
I
did
exactly
that
and
the
web
extension
metadata
web
extension
is
just
stuff.
I
used
to
generate
the
manifest
json
in
the
end,
so
jump
into
the
build
rs
create
manifest
is
a
really
really
bad
function,
because
it's
so
big
and
not
split
it
up,
but
anyways
it
works.
A
A
We
have
content
scripts
and
background
where
I
put
stuff
in.
We
are
not
yet
at
the
background,
but
I'm
going
to
touch
on
it
a
bit
later
and
we
set
some
variables
metadata
and
what
I
did
then
is
I
just
copy
over
the
artifact
path
and
that's
named
script
here,
but
oh
yeah
right
that
that's
name
script
here
shouldn't
be
named
script.
It
should
be
named
file.
But
basically,
what
I
do
here
is
we
have
this
web
accessible
resources?
A
A
But
if
it's
a
tommel
extension
I
search
for.
I
have
a
little
function.
That
gets
me
a
clean
package
name
and
then
I
call
a
function.
That's
named
build
script
and
to
build
this
web
assembly.
I
use
a
great
that's
called
wesenpack
and
the
cool
thing
is:
that's,
usually
a
cli
command.
So
I
would
go
onto
my
console,
let's
change
it
to
scripts
and
I
would
say
western
pack,
hello
lens.
A
A
I
just
imported
the
crate
up
here,
wesson
pack
and
I'm
using
it
directly
in
here,
so
I'm
that
those
are
the
western
pack
build
options,
and
this
is
the
western
pack
command
and
I'm
running
that
directly
in
my
build
script,
because
that
way
I
have
way
better
control
over
error
handling.
Theoretically,
in
the
end,
it
didn't
matter,
but
it
was
fun
to
do
and
yeah.
So
in
the
I
need
to
adjust
the
javascript
a
bit
because
usually
the
javascript
just
loads
wasn't
bindgam
at
bindgen
and
then
expects
you
to
load
your
wesum
yourself.
A
So
I
didn't
want
to
do
that
for
every
script.
I
want
to
write
in
the
future,
so
I
load
this
whole
thing
into
my
memory.
I
add
at
the
end
this
little
wes
bind
cam.
Let
me
pick
it
out
here.
This
was
at
the
bottom,
so
this
gets
automatically
placed
for
every
script
and
if
I
load
two
scripts
into
the
same
page,
which,
for
example,
if
I
have
two
separate
scripts
for
github.com,
could
happen
the
let
at
the
top
of
javascript
of
the
javascript
code
that
wasn't
bind
again.
A
I
can't
rebind
the
value,
and
so
I'm
wrapping
this
whole
thing
in
an
anonymous
function
that
gets
called
so
that's
some
stuff.
I
stumbled
upon
that
was
in
a
way
of
automating
all
the
things
yeah,
but
now
I
can
relax
and
lean
back
and
just
let
my
build
rs
do
all
the
things
I
don't
need
to
do
from
hand
yeah.
So
we
it
builds
my
project
here
and
if
it's
successful
it
pushes
the
js
file
to
my
scripts
from
the
content
scripts
and
it
pushes
my
wason
file
into
the
web.
Accessible
resources.
A
This
is
what
it
looks
like
if
you
just
call
a
command,
and
so
I
could
have
used
this
to
run
western
pack
at
this
point,
for
example,
but
we're
using
yarn
to
install
the
polyfill
for
chrome
and
edge
yeah,
that's
the
build
rs.
I
don't
know
from
the
timing.
I
could
jump
into
the
existing
code
and
write
a
bit
talk
a
bit
about
what
else
I
did.
B
A
I
have
yeah,
I'm
just
gonna
jump
in
here.
At
some
point
I
had
a
little
code
that
just
showed
me.
If,
if
you
go
on
the
web
extension
repository
in
github,
you
get
an
alert
in
javascript.
That's
saying:
hey!
You
installed
this
extension
on
this
in
this
day
and
then
I
realized
hey
at
the
beginning.
I
had
this
code.
A
A
Now
the
save
setting
accesses
browser,
storage,
local,
that's
part
of
the
web
extension
api
to
save
settings
of
your
extension.
You
could
also
in
firefox
use
sync
and
just
like
that
you
wrote
an
extension
that
settings
with
the
firefox
account
stuff
by
the
way.
Other
detail
here
is
the
js
name
for
this
function
is
set,
but
I
renamed
it
to
save
setting,
because
it's
a
bit
more
clear
what
this
function
does
when
I
use
it
down
the
line
and
yeah.
A
A
A
You
need
to
load
into
the
web,
accessible
resources
and
the
easiest
way
to
just
get
done
is
to
just
make
it
internet
explorer,
f,
compatible
11
compatible,
so
you
have
one
code
file,
that's
not
importing
stuff
and-
and
you
can't
use
javascript
modules,
so
you
can.
You
can't
use
modern
web
technologies
like
importing
javascript
from
the
files
directly.
A
So
this
is
where
I
was.
I
think
it's
just
cool
that
the
way
I
built
it
here.
I
can
use
modules
in
my
code
without
using
a
comp,
I
think
complicated,
a
web
pack
setup.
That's
I
tried
it.
It
didn't
work,
okay,
so
I
have
the
shared
folder
and
here's
my
install
time.
So
I
just
created
a
new
crate.
That's
named
shared-
and
here
I
can
put
everything
in
that's
needed
at
one
at
more
than
one
place
in
my
project
and
yeah.
A
It
reports
the
current
date.
If
you
wanted
to,
I
don't
even
know
what
the
get
new
install
date.
Oh,
yes,
that's
the
fallback.
If
we
have
an
error
in
this
already
existing
install
time,
because
here
we
access
the
saved
install
time
and
if
that's
empty,
we
request
a
new
one
on
and
we
return
that
that's
the
logic
here
yeah.
So
this
is
just
a
pubmod,
so
it's
exposed
and
then
I
can
use
my
install
time
in
my
other
crates.
B
First,
let
me
say
thank
you
for
the
presentation
so
far
and
thank
you
for
sharing
it
with
us.
I
personally
love
talks
where,
where
you
give
the
reason
for
why
you
do
it
because
you
can
it's
really
it's
really
funny
and
it
was
interesting
and
it
wasn't
aware-
or
let's
say
I
wasn't
familiar
with
this
technology-
I
have
a
question.
I
understood
that
many
of
the
things
you
did
just
was
just
because
out
of
curiosity,
could
you
think
of
real
world
reasons
where
you
would
say?
A
Well,
for
me,
it's
a
really
complicated
web
extension.
I
would
prefer
to
write
in
rust
just
because
of
all
the
benefits
like
type
safety,
and
also
I
have
this
module
system
without
the
for
me
really
complicated,
webpack
setup,
which
I
couldn't
get
to
work
so
for
me.
In
the
end,
it
was
what
was
easier
to
use
modules
in
the
rust
world
than
it
was
to
use
modules
in
javascript
and,
as
always
with
web
assembly.
I
think
it's.
The
real
benefit
lies
in
applications
that
use
the
same
code
on
a
server
part.
A
B
A
A
A
A
B
Okay.
Okay,
thank
you.
Thank
you
very
much
for
answering
this
question.
I
asked
the
audience:
do
you
have
any
additional
questions
by
the
way
I
was
really
impressed
by
your
by
your
build
script.
I
really
enjoyed
it
by
the
way.
Will
you
share
the
location
of
the
code?
Can
we
take
a
look
at
it
on
github.
B
A
A
B
Okay,
carl,
I
don't
get
any
further
questions
now,
but
I've
seen
we
got
a
lot
of
thumbs
up
on
on
youtube
and
things
like
that,
so
it
seems
that
people
were
enjoying
your
talk
and
it
was
very
interesting.
It
is
a
topic
that
normally
many
of
us
don't
touch
every
day.
So
therefore
it
was
great
to
to
see
how
this
is
done.
Thank
you
very
much
for
taking
the
time,
and
I
can
assume
that
it
was
a
lot
of
time
preparing
this
talk.