I'm back with another post about Chrome extensions! This time I wanted to explore how to store data locally using the chrome.storage API.
In this ...
For further actions, you may consider blocking this person and/or reporting abuse
It was quite easy to follow along and understand as a beginner. But I have a doubt regarding the "page.service.js" file. What is that file actually? If I rename it to say just "page.js" at appropriate places, the code breaks and suddenly it cannot find the PageService.savePage function in "background.js" script. Can anyone explain? Links to further resources on the same will be much appreciated. Thank you.
Hi Dilbwag! The
page.service.jsis a regular file containing a class. I just got into the habit of naming my data access files using the suffix.service, but it could've been calledpage-service.jstoo, for example.The reason your code breaks when you change the file's name is that you must also change the references to the file in the following places:
manifest.json: Where you declare the background scripts, search for thepage.service.jsentry at the end of thescriptsarray and replace it with the new filename (e.g.page.js)popup.html: At the end of thebodytag, we added a script tag referencingpage.service.js. It should be replaced to reference the new filename.Updating the filename in those 2 places should do it. Hope it helps! :)
It does work now. Thank you so much. Also, are you planning on continuing this series for updating it to manifest V3?
Yes! You read my mind 😂 I'm actually working on an article about Manifest V3 right now. My plan is to do an overview and then go through the steps to migrate this sample extension to v3 :)
Cool😁 Will be waiting for it!!!
This post is really creative, I have never thought about doing so👍👍
Thank you! 😊
For example:
X extension is installed in Google Profile 1
X extension is installed in Google Profile 2
Is the data
chrome.storage.localaccessible to other google profiles where the same extension is installed under the same device?Or is it only local to one google profile?
I use local storage for chrome extensions. For me I use this as send state like redux. Local storage is good to save not sensible data on a browser. But I think the point is local storages are 3 for a tab(contents.js), background, and popup. It's nice information!
Hi,
Thank you for making this guide I trying to make an extension for the first time and this is really helpful. I've followed your steps here and created a service class called PageService that contains my storage methods(static methods) and added the file to my popup.html as you've shown but when I try to call any of the static methods from my popup.js file I keep getting an error saying PageService is not defined. I've tried numerous attempts to fix it, but do you have any suggestions?
I can see you are able to call them without any trouble so not sure what I'm missing.
Hi! Could it be that the
<script src='page.service.js'></script>is missing in your popup.html? Or maybe the filename/path is different than mine?This is the error I get
popup.js:64 Uncaught (in promise) ReferenceError: PageService is not defined at HTMLButtonElement.
This has been a great help as I was planning on building a simple chrome extension, but have no background in javascript. Helped me get through a bunch of the pieces. I could not find a license declared in your repo. What license do you intend the code to be shared under?
Super useful. How can you do the same for a Firefox Addon?
Thanks! I'm planning to cover how to adapt a chrome extension so it works on firefox in a future post :)
Pretty nice and useful guide, thanks a lot
Glad you found it useful 😊