Тёмный

How to make a Chrome Extension #5 - Saving and retrieving data in the background 

JerryHacks
Подписаться 913
Просмотров 6 тыс.
50% 1

Have you always wanted to learn how to make a Chrome Extension? In this video tutorial series, we'll build a chrome extension together that uses notifications, reading and saving data, making API calls, and much more!
In this video, we will connect the popup.js file with the background.js file by sending messages. We'll also save data in the background and retrieve data to pre-populate the data on the popup window.
Remember to like and subscribe so you can get notifications when a new video is uploaded!
Github source code: github.com/jerryhacks/global-...
Chapters:
00:00
00:38 What the background.js file does
01:15 Creating the message listener in the background.js
01:55 What the data param in the message listener does
02:42 How to send messages from the popup to the background script
03:30 How to see the background.js console logs
04:10 Getting value from inputs and sending to background file
06:09 How to store data locally
06:45 Why the popup window doesn't save your inputted data
07:15 How to retrieve our local saved data
07:55 Setting the popup.html inputs to our saved data
08:36 Ending

Наука

Опубликовано:

 

4 янв 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 13   
@akramsoubaa
@akramsoubaa Год назад
Great Vid! One of the few channels I've seen on how to build Chrome Extension in depth. Keep up the great content!
@AliEl-Sheikh
@AliEl-Sheikh Год назад
Thank you for the course. I enjoyed every minute of your lecture ❤❤
@PragyaJain-oj8sn
@PragyaJain-oj8sn 4 месяца назад
hie jerry can u tell me where is the data getting stored in application tab ?? Like if I inspect the popupfile so where I can see my stored data?
@aneeshraj5299
@aneeshraj5299 Год назад
👏👏👍
@dtaktlq1296
@dtaktlq1296 7 месяцев назад
Great video, I've learned a lot through your videos. I'm a beginner and i have no background in coding. I have a question, i'm kinda lost in chrome.local.get location ID, StartDate, and EndDate. But where did we retrieve the value of these from? they're in strings meaning they are words right? If you can explain more about const prefs and if statement, it would be great. Thank you so much
@jerryhacks
@jerryhacks 7 месяцев назад
Hi dtaktlq, when we use "chrome.storage.local" that means we're fetching from the local storage of the browser. The locationId, startDate, and endDate are pulled from the extension window when the user clicks the Start button by using the element value that we have written at the top under "// ELEMENTS". We put those three element values in a JSON object called "prefs" and send it to the "chrome.runtime.onMessage" switch where it gets saved to the local storage using "chrome.storage.local.set(prefs)" in handleOnStart. Once the values have been set, we can pull those saved values using "chrome.storage.local.get".
@syedfarazahmad
@syedfarazahmad Год назад
Nice work
@denisradovanovic8778
@denisradovanovic8778 Год назад
Hi Jerry, as of recent I don't get any output in service worker console log. Only when I ran Inspect in popup it will show me onStart/onStop message on console (popup.html) with an origin (in this case it will add background.js). Did you ever face this issue?
@denisradovanovic8778
@denisradovanovic8778 Год назад
Also since last week nothing get's exchanged between background.js and popup.js :/ Not sure what am I doing wrong. I can attach my 2 scripts if you can provide any help.
@denisradovanovic8778
@denisradovanovic8778 Год назад
OK, the solution was to clear the cache. First I have tried in regular chrome and it didn't work. Tried in incognito - worked without any issues. Last thing was to clear the cache and it helped. QQ - are you using any VS code extensions for writing new extensions code?
@denisradovanovic8778
@denisradovanovic8778 Год назад
Nope, storage not working for me :(
@denisradovanovic8778
@denisradovanovic8778 Год назад
Aaaand I am an idiot - Prettier added extra brackets that I didn't see. Javascript didn't complain but the Chrome did :D
@jerryhacks
@jerryhacks Год назад
I am glad you were able to get it working! Are you also using ESLint? I may make another tutorial on ESLint + working on a chrome project
Далее
I Built My First Google Chrome Extension!
20:52
Просмотров 55 тыс.
Самая редкая видеокарта NVIDIA
1:00
iPhone 16 - 20+ КРУТЫХ ИЗМЕНЕНИЙ
5:20
#samsung #retrophone #nostalgia #x100
0:14
Просмотров 13 млн