I have a chrome extension which will add a button to images on a website. When the button is clicked it saves the image id within a cookie. I then have a separate React application which gets the cookie and uses the image id.
I originally had my code in manifest 2 and I am updating to manifest 3. I am using js-cookie with my chrome extension and within my react application to get and set my cookies.
When using js-cookie, although the code works as it should and I am able to get the cookie to set and get, I get an error in my background.js console: 'ReferenceError: Cookies is not defined'
How am I supposed to use a library like js-cookie? I read that you can use bundlers like webpack, but my chrome extension is quite small. If possible I would like to not do that. I tried to load a script in my popup.html but still get the error. Any help is appreciated. Thanks
// manifest.json
{
"name": "Chrome extension anem",
"version": "1.0.0",
"manifest_version": 3,
"description": "description",
"permissions": [
"activeTab",
"alarms",
"declarativeContent",
"scripting",
"storage",
"tabs",
"webNavigation",
],
"host_permissions": [
"*://*.hello.com/*",
],
"background": {
"service_worker": "background.js",
},
"content_scripts": [
{
"matches": [
"*://*.hello.com/*",
],
"js": ["node_modules/js-cookie/dist/js.cookie.js", "content.js"],
"run_at": "document_start"
}
],
"externally_connectable": {
"matches": [
"*://*.hello.com/*",
]
},
"action": {
"default_popup": "views/popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
//popup.html
<!DOCTYPE html>
<html>
<head>
<script src="../../node_modules/js-cookie/dist/js.cookie.js"></script>
<script src="./popup.js"></script>
<style>
#root {
width: 180px;
}
.some-classname {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<label class="some-classname">
Click
</label>
</div>
</body>
</html>
// background.js I am using a background port within content.js for when the below are called. I did not add all code for privacy reasons.
const getCookie = async () => {
return new Promise(async (resolve, reject) => {
try {
resolve(Cookies.getJSON(lblCookie) || [])
} catch (error) {
reject(error)
}
});
};
const setCookie = async (cookieList) => {
return new Promise(async (resolve, reject) => {
const { tab } = await getTab();
const url = new URL(tab.url);
const domain = `.${url.hostname.split('.').slice(1).join('.')}`;
try {
resolve(Cookies.set('cookieName', cookieList, { expires: 3, domain: domain }));
} catch (error) {
reject(error);
}
});
};