Struggling with modifying css attribute in a JQuery Chrome Extension

I have a basic chrome extension that I utilize on a specific URL to make slight adjustments to the page layout (such as color and position).

Now, I am attempting to apply the same modifications to a new URL. The code I am using for both URLs is identical, but it seems to work properly on one URL while failing on another.

Below is the code that is not functioning correctly. In this post, I have replaced the actual URL with SITE.

var url = window.location.href;
if (url.toLowerCase().indexOf('SITE') >= 0) {
    console.log ('Making CSS changes');

    $('.main-container').css({"background":"red"});

}

The element I am trying to modify is: 

<clr-main-container _ngcontent-c0="" class="main-container">

After checking my console, I can see 'Making CSS changes' being logged, but visually there are no apparent alterations.

This particular URL is accessed through HTTPS and has firewall protection. I am uncertain if the firewall may be blocking these modifications or something else is causing the issue.

If anyone has any insights or suggestions, please feel free to share. Thank you!

javascriptjquerycssgoogle-chrome-extension

Answer №1

I've implemented a similar solution for a snippet website, and it's working well:

$(function(){
  var url = window.location.href;
  console.log(url);
  if (url.toLowerCase().indexOf('stacksnippets') >= 0) { 
    console.log ('Amending CSS');
    $('body').css({"background":"red"});
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If the previous code didn't work, it may be due to another CSS rule on the same element with higher priority using !important.

Check this alternative approach:

$(function(){
  var url = window.location.href;
  console.log(url);
  if (url.toLowerCase().indexOf('stacksnippets') >= 0) { 
    console.log ('Amending CSS');
    $('body').addClass("red_bg");;
  }
});
.red_bg
{
background:red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

https://i.sstatic.net/3P0G0.gif

Answer №2

It may be beneficial to enclose your code within

$(document).ready(function() {
// your code
});

By doing this, the code will only execute once the page has fully loaded, ensuring that the element is present.

Additionally, I suggest checking out the Chrome extension called Stylebot. This tool allows you to apply custom CSS styles to any website and will remember them for future visits.

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

I am seeking advice on how to incorporate JavaScript to adjust slider values and add numerical values or prices. Any suggestions would

Seeking assistance with a unique project: I am currently developing a calculator that allows users to utilize sliders to select the best option for themselves across various categories. My experience with JavaScript is limited, so I decided to reach out h ...

javascripthtmlcssconstantsslider

Is there a way to designate whether the <ul> element is displayed horizontally or vertically?

For example: <ul> <li>a</li> <li>b</li> </ul> The default output is: ab But I am looking for: a b Is there a way to achieve this? ...

htmlcss

Dynamic counter with Javascript or Ajax functionality

Is there a way to create a counter using JavaScript or Ajax that preserves its count even when the page is refreshed? <script type="text/javascript"> var totalCount = parseInt(localStorage.getItem('counter')) || 0; document.getElementById ...

javascriptajax

Utilizing Jquery and Ajax for fetching data to incorporate with Highcharts within an HTML framework

I am tasked with creating a graph that displays data over time using an ajax request, and I am seeking assistance on how to properly integrate the data with Highcharts. Below is the code snippet for reference: JSP FOR RETRIEVING DATA: <%@ page import ...

jqueryhtmlajaxhighcharts

The transformation of Label properties is altered as a result of assigning the return value from a Javascript function

When working in a JavaScript function, I am assigning a value to a Label. The value is successfully assigned, but the properties of the label are reverting back to default values. document.getElementById("Label1").innerText = dispTime; Here, dispTime rep ...

jqueryasp.net

Accessing properties of objects using specific keys

In my coffeescript code, I am attempting to retrieve the keys from an object where the key matches a specific value. However, in addition to the object's own properties, I am also getting function properties in my result. This issue is causing an err ...

javascriptangularjscoffeescriptangularjs-ng-repeat

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Having trouble accessing a fully loaded Wordpress remotely through Wamp

After installing WAMP Developer Pro on my Windows 7 computer, a testing website was set up locally. Now, I am trying to test it on the LAN, but when accessing the page, only text appears without any images, themes, or styling. Apache is running on port 80 ...

phpcsswordpresswamp

Organize your table with CSS styling

Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below: [1][2] [1][2][5][6] [3][4] => [3][4][7][8] [5][6] [7][8] Wondering if this can be achieved using o ...

csshtml

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

Mistakes in design when transforming inline SVG to PNG format

One of my main objectives is to convert a <div> element that contains multiple inline svg images into a png file. The entire process must be carried out within the client's browser using JavaScript. I have experimented with various techniques: ...

javascriptcsssvgcanvg

What is the quickest and most effective method for toggling more than 10,000 checkboxes using Javascript/jQuery?

I am facing a challenge with a div that contains over 10000 checkboxes. Due to technical limitations, I have no choice but to work with this large number of checkboxes. This is not related to any academic task. <div class="well well-sm" style="min-hei ...

javascriptjqueryhtmldomoptimization

Unusual compilation issue encountered in Vue when trying to use a template for a slot

I encountered a strange issue where my Vue compiler was refusing to render the default named slot of a child component. Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first. Even my VSCode highlighted this problem a ...

javascriptvue.jsslot

Ways to swap webpack-dev-server for alternative servers such as express or apache

After using vue-cli to scaffold a Vue app, I am looking to set up a new web server instead of webpack-dev-server. I am interested in having a separate configuration file to customize the server settings, similar to using Node Express for production deploym ...

javascriptexpressvue.js

Is there a way to ensure that my code patiently waits until every iteration within a loop is executed before moving forward?

In my code, I am using a jQuery each function to iterate through a collection of HTML elements. During each iteration, I make use of the get method. My intention is to keep track of the successful get calls and display a count at the end. var numSuccessfu ...

jquerycallbackeach

How can I transfer a MongoDB collection to an EJS file in the form of a sorted list?

I have successfully displayed the collection as a json object in its own route, but now I want to show the collection in a list under my index.ejs file (I'm still new to ejs and MongoDB). Below is the code that allows me to view the json object at lo ...

javascriptnode.jsjsonmongodbejs

display child element at full width within a parent element that is not full width

I have a container with a maximum width of 1024px, and I want one of its child elements to take up 100% width starting from the left edge of the screen. Is there a way to achieve this without adding extra HTML markup? I know I can make the child element 1 ...

htmlcsswidth

Save the modal to a variable and display it when clicked

I am trying to create a modal and display it when a user clicks a button. However, I seem to be facing an issue where nothing happens when the button is clicked and there are no errors in the console. $( '.outlet' ).on('click', functio ...

javascriptjquery

Tips for updating an ASP.NET MVC page when the browser back button is pressed

Have you ever encountered the issue where clicking the browser back button on any ASP .NET MVC page does nothing, and the page does not update unless you hit F5 to refresh it? It seems that the main problem lies in making changes to the DOM of the page, s ...

javascript.netbrowserasp.net-mvc-5page-refresh

Create a bolded section within a TextField component using Material UI version 5

I am working with a TextField component that has a specific defaultValue set. Here is the code snippet: <TextField autoFocus={props.autoFocus} fullWidth defaultValue={props.defaultValue} value={text} onKeyPress={handleKey ...

javascriptcssreactjsmaterial-ui