Is it possible that CSS files are not being excluded from content scripts in manifest.json?

I am looking to create a chrome extension that enforces a specific CSS style on all websites except for Gmail. However, I am facing an issue where the code in the content scripts section of the manifest.json file is not working as expected. Even though I have specified that Gmail should be excluded from using the css style defined in font.css, it is still being applied.

"content_scripts":  [{
    "matches":  ["http://*/*", "https://*/*"],
    "exclude_matches": ["*://mail.google.com/*"],
    "css":  ["font.css"]
}]

Even after trying the solution suggested here by changing exclude_matches to exclude_globs, the issue persists.

This problem seems to have been reported before as Bug #100106 on this platform. Does anyone have any suggestions on how to resolve this issue? Are there any alternative methods that can be used to achieve the same goal?

cssjsongoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools

Answer №1

To manually filter pages using CSS injected from custom JavaScript code, a simple test was conducted with success in Chrome 31.0.1650.63:

manifest.json:

{
    "manifest_version": 2,
    "name": "Custom Styles",
    "description": "Inject custom CSS",
    "version": "1.0",
    "content_scripts": [{
        "matches":  ["http://*/*", "https://*/*"],
        "js": ["style.js"],
        "run_at":"document_start"
    }],
    "web_accessible_resources": ["style.css"]
}

style.js

if (location.hostname.indexOf(".example.com") == -1) {
    var link = document.createElement("link");
    link.href = chrome.extension.getURL("style.css");
    link.type = "text/css";
    link.rel = "stylesheet";
    document.documentElement.insertBefore(link);
}

style.css

body {
    background-color: #f0f0f0;
}

This technique injects the style.css script into all non-example pages.

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

Achieving a tidy layout with child divs inside a parent div

I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution. This results in an unsightly amount of space. The divs that ...

htmlcss

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

formstwitter-bootstrapcssinput

What is the best way to center the startIcon material ui icon?

I'm having trouble keeping the icon button centered on my page. When I add left: "0.5rem" to the sx prop, it ends up pushing the button icon even further away from center. I'd prefer not to use makeStyles to manually override the position. Any ad ...

cssreactjsmaterial-ui

Spin a child element by clicking on its parent component

I am looking to create a unique animated effect for the arrows on a button, where they rotate 180 degrees each time the button is clicked. The concept involves rotating both sides of the arrow (which are constructed using div elements) every time the con ...

javascripthtmlcss

Attempting to transform UNIX Epoch time to regular date format extracted from JSON<Object>

Trying to convert Unix epoch time into a standard date format using JSON. Snippet from the JSON file: {"success":true,"lastUpdated":1621365664405 An implementation is as follows: import requests import json from datetime import dateti ...

pythonjsonpython-3.xdatetime

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

javascriptjqueryhtmlcss

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code: $primary: #e84c22; $theme-colors: ( primary: $primary, ); @import "~bootstrap/scss/bootstrap.scss"; Currently, the color looks like this: https://i.sstatic.net/lbL ...

htmlcsstwitter-bootstrapsassbootstrap-5

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

php json with multiple dimensions

Unable to retrieve the deepest values from my json object, which contains an array of images listed as: { "imgs":[ { "Landscape":{ "2":"DSCF2719.jpg", "3":"DSCF2775.jpg", "4":"IMG_1586.jpg", ...

javascriptjqueryjson

Trouble with jQuery: Background color fade in/fade out effects not functioning

Issue with changing background color during FadeIn and FadeOut effect. Whenever I click on the "whatup" link, my button should blink with alternating red and white colors. Below is the HTML code: <a id="blkwhatsup" href="#" >whatup</a> <in ...

jquerycssfadeinfadeout

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

Utilize Rails to extract and store deeply nested JSON data in a database

When working with rails (4), my goal is to extract data from an external API and then store it in my database. Here's an example of the JSON format I may encounter: { "name" : "Mercedes-Benz", "commonName: "Mercedes", "vehicles" : [ { "name" ...

ruby-on-railsrubyjsonparsingruby-on-rails-4

Having trouble getting the JSONP request to render properly, encountering persistent errors

Need assistance with JSONP Rendering to HTML. The request is present in the source code, but I keep encountering errors on the foreach line. Any help would be greatly appreciated. <meta name="viewport" content="width=device-width, initial-scale=1"&g ...

javascriptjson

Developed a hierarchical JSON format using a JavaScript array

I am aiming to generate a properly structured nested JSON file from an array, with unique key values. Currently, I can only output the JSON without any nesting. The desired structure to be displayed in the console is : { "Key" : "data1", "header" ...

javascriptarraysjson

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

Are you searching for a way to make text inside a container wrap to a new line and have the container expand downwards if needed? Update <div class="modal hide fade" id="modalRemoveReserve" style="display:none;"> <div class="modal-header"&g ...

csshtml

The background suddenly vanishes once the background-image property is set to no-repeat

I'm currently attempting to add a background image to my WordPress website. .content:before { content: ""; background-image: url("gfx/SevenWonders.jpg"); /*background: #fff;*/ background-size:600px 700px; background-repeat: no-repeat; position: absol ...

csswordpressbackground-repeat

The MVC 5 view is unable to display an HTML image when adding it within an appended div

Currently, I am working with ASP.net MVC5 at a novice level. I'm faced with the challenge of creating a div that displays an image using a JavaScript function. Here is the code snippet I have: function showLoadingImage() { $('#submit_Em ...

javascripthtmlcssasp.net-mvcmodel-view-controller

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

What is the best way to arrange these containers in a horizontal stack?

Check out the code snippet at: https://codepen.io/shayaansiddiqui/pen/YzGzeOj I'm looking to align these boxes horizontally, how can I achieve that? <div> <div class="container"> <img src="#" ...

htmlcss