"How can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

I have been in the process of creating a Chrome Extension, and unfortunately, when I tried to make it work on specific URLs, I encountered an issue. While Chrome has options like exclude_matches and exclude_globs for this purpose, there seems to be a bug in Chrome when using these options along with CSS - it simply does not work.

I am looking for alternative methods to inject my CSS only on certain domains (excluding a few rather than allowing many). I am aware that I can use JavaScript to add the CSS at the end of the existing file, but this causes a delay in displaying the CSS, which is quite noticeable.

If anyone has any suggestions or ideas on how to achieve this without affecting performance, please let me know. Perhaps there is a way to link the CSS file via JavaScript without the need for domain exclusion since exclude_matches works well with JS files. Any input is appreciated, especially considering Google's delayed response in fixing this year-old bug!

EDIT: In anticipation of questions about Programmatic Injection, I would like to clarify that I am unsure about its functioning. To provide an example, we can consider the following links (with the last one being where I do not want the CSS implemented) in case someone wants to share a sample solution.

http://example.com/
http://example.com/random/
http://example.com/random/example/

Also, while I understand that Google's example involves using a button to trigger the CSS application, I prefer having it initialize upon page load. Thank you once again!

javascriptcssgoogle-chromegoogle-chrome-extension

Answer №1

To overcome this bug, it is recommended to either create a list of all matching URLs in the manifest file or utilize the insertCSS API as a workaround.

Code Sample #1

This code snippet injects CSS into the current tab whenever the browser action icon is clicked. Ensure that there is no default_popup specified in your manifest, otherwise the onClicked event will not trigger.

//This event triggers when a browser action is clicked
chrome.browserAction.onClicked.addListener(function (tab) {
    // This injects content.css into the current tab
    chrome.tabs.insertCSS(null, {
        file: {
            file: "content.css"
        },
        "all_frames": true //for all frames
    });
});

Code Sample #2

Utilize any Tab APIs for filtering and injecting CSS into a matching set of pages.

Select an appropriate API and inject CSS accordingly.

//Use an API to filter pages for a matching List
chrome.tabs.(SOME API HERE).addListener(function (RELATED DEFINITION) {
    //Inject CSS for a tab
    chrome.tabs.insertCSS(tabId, {
        file: {
            file: "content.css"
        }, //Any file to inject
        "all_frames": true //Inject to all Frames
    });
});

For more information, you can visit this link.

References

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

What is the best way to enhance specific sections of Django content by incorporating <span> tags, while maintaining the original paragraph text format?

I am currently in the process of trying to showcase a paragraph of text (content) from django. However, my aim is to incorporate <span class="modify"> into particular words that match pre-defined words located within a referenceList within the paragr ...

pythonhtmlcssdjangodjango-templates

Stylish Sudoku Grid Design with CSS-Grid Borders

I have designed a sudoku puzzle and I am seeking assistance with CSS to style it. My goal for styling using CSS is illustrated here... https://i.stack.imgur.com/nrA47.png What I currently have appears like this... https://i.stack.imgur.com/zpNp6.png T ...

cssreactjsbordercss-gridsudoku

Exploring Angular 8 HTTP Observables within the ngOnInit Lifecycle Hook

Currently, I am still a beginner in Angular and learning Angular 8. I am in the process of creating a simple API communication service to retrieve the necessary data for display. Within my main component, there is a sub-component that also needs to fetch ...

javascriptangulartypescriptrxjs

What is the best way to access HTML attributes within a JavaScript function when working with a dynamic element?

When a user interacts with an HTML element on my website, I aim to display the attributes of that specific element in a new browser tab. An example of such an HTML element is: <a id="d0e110" onclick="GetWordFile(this.id)" attr1="attr1_value" attr2="at ...

javascripthtmlxslt

Multiplication and Division with Unit-ed Values in CSS calc() Function

Can you perform multiplication or division with unit-based values using calc() (such as 100%, 5px, etc)? For instance, I wanted to try something like this: width: calc(100% * (.7 - 120px / 100%)); Expecting it to result in something similar to (if 100% ...

csscss-calc

trouble encountered while sending data to php using ajax and json

Despite trying multiple solutions, my script is still not working properly. It functions without the $_POST value and without JSON, but when both are included, it fails to work. The error message displayed by the function is as follows: <b>Notice< ...

javascriptphpjqueryjsonajax

Implementing a loading animation effect using AJAX that requires a loop delay and sleep functionality

My jquery ui dialog is loaded via ajax with a partial view from the server. Initially, the dialog opens as a dialog-ajax-loader and then animates/grows to fit the content once the call returns. The issue arises when the dialog content gets cached or the a ...

javascriptajaxcachingsleep

Reacting to URL Changes but Failing to Load the Requested Page

Welcome to my App Component import React, { useEffect } from 'react'; import './App.css'; import Navbar from './components/layout/Navbar'; import Landing from './components/layout/Landing'; import { BrowserRouter as ...

javascriptreactjsreact-router

Spinning a CSS object around an axis

Trying to add a unique touch to my image rotation with CSS. While familiar with rotating around x, y, and z axis, I want to achieve a diagonal rotation this time. Wondering if there's a way to tweak the y axis for a more slanted effect on my image? ...

javascripthtmlcss

In order to ensure JavaScript can be universally applied to all images, it needs to be made more generic

I have developed JavaScript functions to enable zoom in and zoom out functionality for an image through pinching gestures. Now, I aim to refactor the code below so that I can include it in a shared JavaScript file. var scale = 1; var newScale; ...

javascripthtml

Passing an HTML5 video element as a prop in Vue.js

I am attempting to pass an HTML5 video as a property from a parent component to a child component in Vuejs. Parent Component: <template> <div> <video ref="video"> <source src="@/assets/video.mp4" type= ...

javascriptvue.js

Is there a way to transform a .pcm file to a wav file using node.js?

I'm working on a project that generates a pcm file from a stream and saves it after the stream finishes. Now, I am looking for a way to convert this .pcm file to a .wav or another audio format using an npm package. Can anyone suggest a solution or poi ...

javascriptnode.jsnpmaudiodiscord.js

Preventing default link behavior when a linked element is clicked: A guide

I need help with a link code that I am having trouble with: <a href="page.html" class="myLink"> Link text <div class="toggle">x</div> </a> My goal is to prevent the link from navigating when users click on the x within the tog ...

javascriptjquery

The minimum height increases as the inner divs expand

Can you help me with the code below? html <div class="content"> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> ...

htmlcss

What is the best way to navigate through a complex array in React that includes objects and nested arrays?

I have been working on a JavaScript array that includes subobjects with arrays nested in them. My goal is to iterate through the entire parent object using React. Although I attempted the following approach, unfortunately it did not yield the desired outco ...

javascripthtmlarraysreactjsjson

ReactJS - What makes ReactJS unique compared to other technologies?

Hey there! I'm currently trying to figure out why this specific code snippet was successful while my previous one wasn't. I've included both snippets below: SUCCESSFUL CODE: handleInputChange = (e) => { let { value } = e.target; ...

javascriptreactjsreact-redux

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

Currently, I am using the open source project openhtmltopdf but I have encountered a certain issue. Within a div-element, I have a p-tag with text-align: right styling. The text is aligned correctly to the right until there is a line break due to the widt ...

htmlcssopenhtmltopdf

Structuring Server Side Code with Node.js and Express

I am faced with the task of restructuring my server and its components. My goal is to streamline the process by segregating different functionalities. app.post("/login", function(request, response) { }); app.post("/register", function(request, response) ...

javascriptnode.jsexpress

The Chrome debugger fails to display variable values when hovering the mouse over them

After creating a basic React app using the command "npx create-react-app my-app --template typescript", I encountered an issue where the values were not appearing in Chrome dev tools when I added a breakpoint in the code. Is this expected behavior for a Re ...

reactjstypescriptgoogle-chromegoogle-chrome-devtools

Removing HTML tags from a string while preserving specific tags in JavaScript

Here is a JavaScript string that I am working with: var test = "<p>test</p> FOLER.PRODUCTS<12345><level-2>"; I'm trying to remove the HTML tags from the string because the service I'm using doesn't accept them. Here ...

javascripthtml