The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

I have a website https://example.com where users can adjust their site preferences, including enabling night mode. To enhance the user experience, I developed a Chrome extension for https://example.com that transforms Chrome's new tab with a custom newtab.html file. My goal is to synchronize the new tab appearance with the user's chosen preferences stored in a cookie on https://example.com, such as activating night mode through CSS adjustments.

In my manifest file, I specified the necessary permissions:

"permissions": [ "*://*/*", "http://*/*", "https://*/*", "https://example.com", "tabs", "cookies", "contextMenus", "webRequest", "webRequestBlocking", "webNavigation", "activeTab", "storage", "alarms" ]

Within newtab.html, I included the following script:

<script type="text/javascript" src="js/newtab.js"></script>

The content of newtab.js consists of the code snippet below:

var cookie = chrome.cookies.get({url: "example.com", name: "preferences"}); 
console.log(cookie);

However, an error message appears in the console:

Uncaught TypeError: Error in invocation of cookies.get(object details, function callback): No matching signature.

I am seeking assistance in understanding what I may be doing incorrectly. How can I successfully retrieve the cookie from example.com within the newtab.html page to dynamically modify its CSS?

Thank you for your anticipated support and guidance in resolving this issue.

javascripthtmlcsscookiesgoogle-chrome-extension

Answer №1

chrome.cookies.get() utilizes a callback as the second parameter due to its potential delay in returning a result. The issue arises when the function provided as the second parameter is undefined (which occurs when no second parameter is passed), causing a mismatch with the required callback function signature. To resolve this error, consider implementing the following approach:

chrome.cookies.get({url: "http://example.com", name: "preferences"}, cookie => {
  console.log('received cookie:', cookie);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlinked Checkbox in Angular Bootstrap Modal Controller

I am currently utilizing the modal feature from Bootstrap 3's Angular fork, and I am facing an issue with using a checkbox within the modal and retrieving its value in my main controller. The checkbox value is properly bound in the view but not in th ...

javascriptangularjstwitter-bootstrap

Folding without extending

My button has a div inside it with content. I've set it up so that when the div is clicked, the collapsed content expands. The hover effect changes color and pointer as expected. But for some reason, clicking on the div doesn't expand the content ...

javascripthtmlcss

Getting the chosen value from a dropdown menu on form submission using PHP

How to Populate a Combo Box from a Database in PHP? <td>Item Name:</td> <td><select name="items"> <option value="0" selected="selected"> Choose</option> <?php while($row = mysql_fetch_ass ...

javascriptphphtmlforms

Preventing the callback nightmare in nodeJs / Sharing variables with nested functions

Let's simplify this scenario: const generateUrl = (req, res) => { const id = req.query.someParameter; const query = MyMongooseModel.findOne({'id': id}); query.exec((err, mongooseModel) => { if(err) { / ...

javascriptnode.jsexpresscallbackmongoose

Is the sidebar hidden only in Internet Explorer 7 and specifically not shown on one particular page?

So, I've been working on a website using Wordpress and created some custom page templates. However, I recently discovered that the sidebar on this specific page doesn't show up in IE 7. This page is using the lawyer.php template. I'm not su ...

csswordpresssidebar

Error: The Vuex store is not defined in the Vue.js component when attempting to access it using

I've recently set up a new vue-cli webpack project with Vuex. I have initialized my Vuex store in store.js like so: import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: {} }); export default store; ...

javascriptvue.jsvuex

Utilizing React, generate buttons on the fly that trigger the display of their respective

Looking for a way to dynamically display 3 buttons, each of which opens a different modal? I'm struggling to figure out how to properly link the buttons to their respective modals. Here's the code I've attempted so far: Button - Modal Code: ...

javascriptreactjsbuttonmodal-dialog

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

javascripthtmljquerycsstwitter-bootstrap

How can I retrieve the position of a div or an image within a div (specifically the top and left coordinates) and incorporate these values into CSS?

I'm currently working on a website that is dynamic and utilizes bootstrap. I am looking to incorporate an animation where the dynamic thumbnails in the col-md-4 div zoom to 100% when clicked, appearing at the center of the container. I am struggling ...

javascriptjqueryhtmlcss

Can you explain the concept of "entity-body" in relation to Digest Authentication?

Incorporating digest authentication and noticing mention of "entity-body" in the document for auth-int authentication. Is this referring to the HTML header and body, or just the HTML header section? For more information on digest authentication, check out ...

htmlauthenticationdigest-authentication

Reduce the size of JavaScript code in the browser with minification/obfuscation

I am looking for a way to minify/uglify a JavaScript snippet directly in the browser without using tools like webpack or grunt. I have tried using uglify js and other solutions, but they all seem to require the fs module which is not available on the cli ...

javascriptminifyuglifyjs

Guide to implementing Infinite AJAX Scroll in jQuery with a continuous loop

Being a beginner in javascript, I am eager to learn new techniques. I am currently working on implementing an infinite Ajax scroll into my code. Here is a snippet from my php page: <div class="row row-sm padder-lg "> <?php foreach ($top->fee ...

phpjqueryhtmlajaxjquery-ias

Using CSS syntax to target a class within an element distinguished by its unique id

Consider the following code snippet: <div id="dogs" class="content">hello</div> <div id="frogs" class="content">hello</div> <div id="hogs" class="content">hello</div> <div id="logs" class="content">hello</div&g ...

css

Retrieve the row id from the table by clicking on a button in a modal box using jQuery

I am encountering a challenge with a small task due to my limited experience in jQuery. I have a table where each row has an icon. When the icon is clicked, a modal box appears with some content. After closing the modal box, I want to retrieve the table ro ...

javascriptjquery

Steps to show the chosen index value in an alert pop-up using Ionic 2 framework

I'm in the process of trying to showcase a selected index value within an Ionic 2 alert box. However, I'm struggling to find the correct method to display it in the Ionic prompt. This pertains to the home.ts import { Component } from '@ang ...

javascriptangulartypescriptionic2angular2-template

Animate out Material UI element with zoom effect and then remove it from the

I'm currently working on a dynamic user interface that allows for adding and removing items dynamically. Each item has both an add and remove button, with a special animation effect using Zoom. While this works smoothly when adding new items, I encoun ...

javascriptreactjsmaterial-ui

Issue encountered while attempting to deactivate button until numerical data is entered in the OTP field using Vuejs

otp_value: '', isFadeout: false, verifyOtp() { this.disabled = true; this.otpBtnClicked = false; this.verified = true; }, <input class="o ...

javascriptvue.js

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...

javascriptvue.jsfrontendvue-routervue-composition-api

Once the data is retrieved and the old image is deleted, attempting to upload the new image still results in the old image being displayed in the Next.js application with React Query

async function fetchTour() { const response = await api.get(`/tour/${router.query.slug}`); return response.data; } const { data: tourData, isLoading, isFetching, isTourError: isError, } = useQuery(['fetchTour', router.que ...

javascriptreactjsnext.jstanstackreact-query

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

htmlcss