CSS injection not working in Chrome extension content script

I'm attempting to add a CSS file to the PayPal homepage, but I'm encountering issues with it not working properly. Here is the manifest file I am using:

{
    "manifest_version": 2,
    "name": "Paypal Addon",
    "version": "1.0",
    "description": "example",
    "permissions": ["https://www.paypal.com/*"], 
    "background": {
    "scripts": ["background.js"],
"persistent": false
},
    "content_scripts": [
{
"matches": ["https://www.paypal.com/*"],
"css": ["style-fix.css"],
"js": ["jquery-2.1.0.min.js", "contentScript.js"]

}]
}

Here is the content of the CSS file style-fix.css:

body {
color: red !important;
}

Can anyone provide insight into why the CSS changes are not being applied? Thank you

javascripthtmlcssgoogle-chrome-extension

Answer №1

The CSS is applied correctly, but it appears to be invisible. Try the following solution:

* {
    color: red;
}

All text in the document is styled with a higher priority, except for the copyright notice.

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

The most basic form of req.body will consistently be devoid of any content

I am currently working on passing basic data from the client to the server using a POST request for testing purposes. However, I am encountering issues with receiving empty or undefined logs on req.body. Server: //jshint esversion:6 const express = requi ...

javascriptnode.js

Safari seems to have trouble running Javascript, unlike all the other browsers which handle it just fine

I've encountered an issue with a script that duplicates form fields when a "Same as Billing" checkbox is checked in one form and transfers the data to another. Everything works smoothly except in Safari, where it fails to transfer the state selection ...

javascriptjqueryhtml

Exploring the mechanics behind jQuery selectors

Currently, I'm working on the Interactive website: Push menu training exercise on codecademy. However, I am a bit confused about jquery selectors. Specifically, in the example provided below, why does the 'menu' html element require a ' ...

jqueryhtml

Should padding be added to container-fluid in order to ensure consistent spacing on all devices from left to right?

After creating a webpage, I realized that it wasn't responsive. Now I am in the process of recreating the page and have a dilemma on whether to use container or container-fluid. Based on some blogs I've read, container-fluid seems like a better o ...

cssbootstrap-4

Harnessing the power of VUE.js: Exploring the versatility of V-bind with Array and

I've encountered an issue with an app I'm currently working on. In my project, I am utilizing Vue.js to create the front-end and attempting to apply two classes to a div within a v-for loop. The first class is bound with a filter that functions ...

javascriptcssclassvue.js

Creating a unique seal, badge, or widget in Django is a fun and rewarding project

Here are some examples of what I want to accomplish: View the gif showcasing the function Visit https://sectigo.com/trust-seal Check out another gif demonstrating the function Explore https://www.carandtruckremotes.com/ Don't miss this gif showin ...

javascriptpythondjango

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

GitHub Repo: https://github.com/shadowwolf123987/Gun-Identification-App I'm currently facing an issue in passing the values of two C# variables from the code block defined in my view to the corresponding html tags within the same view. Unfortunately, ...

c#htmlasp.net-core-mvc

core.js encountered an issue at line 6210: TypeError - The function this.service.addDepartment does not exist

Whenever I attempt to click the 'Add' button on a web application that I'm constructing, an error pops up. core.js:6210 ERROR TypeError: this.service.addDepartment is not a function at AddEditDepComponent.addDepartment (add-edit-dep.componen ...

javascriptbootstrap-modalangular10

Is there a way to determine in JavaScript whether an HTML element contains no visible data, such as text or images?

In my web application, I have a feature that eliminates specific elements from a webpage. After the initial filtering, I am looking to remove all divs that previously held content but no longer do. For instance, after the first pass, an element may appear ...

javascripthtmlfirefox-addon-webextensions

What is the best way to calculate the variance between the most recent and previous data points in an array in the span of an hour using JavaScript

Here is an array of objects I am working with: 0: {time: '2021-12-02T23:53:54.062Z', value: 558316} 1: {time: '2021-12-03T00:53:53.959Z', value: 558452} 2: {time: '2021-12-03T01:53:53.934Z', value: 558588} 3: {time: '2021 ...

javascriptarraysangulardatetimedifference

Transforming jquery code into angularjsAre you looking to migrate your

I am currently struggling with converting a jQuery function into an AngularJS function. Here is the specific code snippet: $('p').each(function() { $(this).html($(this).text().split(/([\.\?!])(?= )/).map( function(v){return '< ...

javascriptjqueryangularjs

Revamping JSON structure by identifying id references

I recently attempted to update the city name within the JSON object provided below. "City":[ { "Name":"Delhi", "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd", "Towns":[ ...

javascriptjsonapi

Error: The Rollup module is unable to locate the 'jquery' file

I've been facing an issue while trying to bundle a vuejs single file component using rollup. The error message that keeps popping up is Module not found: Error: Can't resolve 'jquery'. Despite spending countless hours on this problem, I ...

javascriptvue.jsvuejs2vue-componentrollupjs

Retrieving form elements in Angular

I need to extract the element name and class from a form passed to a function. Is there a way to accomplish this? On the HTML side: <form name="test"> <div> <input type="text" class="test1" name="test2"/> </div> ...

javascriptangularjs

Tips on displaying inline span text within an anchor element, above the anchor text

Check out the code I've created below: .tooltip1 { z-index: 1; position: relative; } .tooltip1 .tooltiptext { visibility: hidden; width: 300px; ...

htmlcsspositionz-index

Is it possible to assign unique QFont types to individual Unicode characters?

I have a unique challenge of displaying multiple international scripts within the same string in a QLabel. For example, the text on the QLabel might look like this: چاچي चाची ćāćī (dim. of ćāćā, q.v.), s.f. A paternal aunt (=ćaćī ...

htmlunicodefontsinternationalizationqt4

What could be causing the jQuery change function to stop working after loading HTML with AJAX?

When loading a form, I use AJAX to dynamically populate a select element from a PHP file. Previously, my change function was working fine (it displayed another input when 'other' was selected). However, after implementing the dynamic AJAX populat ...

javascriptjqueryajax

Utilizing ngRepeat to build intricate rows within a table

I have a unique collection that appears as follows: { "10": {}, "12": { "20": { "value": 1, "id": 1, }, "100": { "value": 12, "id": 1, } }, "14": { "10 ...

javascriptangularjs

Tips for updating the text shown in an md-select box without affecting the underlying model

Using the Angular material library directive md-select, I have implemented a feature to display country codes to users. When a country is selected, I want to show only the country's dialing code in the select box. For example, if the user selects Ind ...

javascriptangularjsangular-material

Leveraging the 'window' object as a dependency in the useEffect hook within NextJS

I'm encountering an issue where I need a function to run when the type of window.performance.getEntriesByType("navigation")[0].type changes. I attempted to use useEffect for this purpose, but it resulted in a 'window is not defined&apos ...

javascriptreactjsnext.js