"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

Unable to use Office.context.mailbox.item.displayReplyAllForm with attachments on outlook.live.com as well as receiving internal server errors when using the Outlook API

When using office.js outlook add-ins, the displayReplyAllForm with attachments function is opening the reply form without attachments in outlook.live.com. However, it works perfectly fine in outlook.office.com. Is there any workaround for this issue? Off ...

javascriptoffice365office-jsoutlook-web-addins

Ways to deselect checkboxes and eliminate validation requirements

Below is the HTML code snippet that I am working with: <div class="form-group"> <div class="input-group"> <label for="daterange-vacancy" class="input-group-addon">Van</label> ...

javascriptjqueryhtmlcheckboxcalendar

Creating a regular expression to match special characters using JavaScript

I'm making an attempt to verify certain characters in my code. If the input field contains specific characters for each character, it will return true; otherwise, it will return false. function isChar(value) { //Creating a regex pattern to permit ...

javascriptregex

How can you include a comma between two objects within a string, excluding the last object, using JavaScript?

I have a string object stored in a variable passed from another class. My question is how can I add a comma between two objects, excluding the last object? Below is my code snippet: { "id":"57e4d12e53a5a", "body":"asdas", "publishe ...

javascriptjsonparsingobject

How can I access the data variables from a JSON request within a function?

My task involves loading multiple JSON files from an array called bunchOfData, with each file having a corresponding URL. How can I access my variable "myI" within the processData function? for(var i = 0; i < bunchOfData.length; i++){ $.getJS ...

javascriptjqueryjsonfunctionvariables

An application using AJAX that supports multiple languages

I am currently developing a web application that heavily relies on JavaScript and AJAX. One of the requirements for this app is to support multiple languages. For server-side translation, I have implemented a template engine in PHP which handles translati ...

phpjavascriptajaxmultilingualtemplate-engine

The variable is only recognized within the function and not outside of it

Seeking assistance as a newcomer in debugging and implementing code, I have been trying various approaches to pass a base64string into JotForms for generating images in PDF format. Below is the screenshot of the error encountered. View error here The foll ...

javascripthtmlfunctionvariablesjotform

Leveraging an array to store data within highcharts

When I input the data directly in high charts, it works perfectly: $(function () { $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtit ...

javascriptarrayschartshighcharts

Is it necessary to include a promise in the test when utilizing Chai as Promised?

Documentation provided by Chai as Promised indicates the following: Note: when using promise assertions, either return the promise or notify(done) must be used. Examples from the site demonstrate this concept: return doSomethingAsync().should.eventua ...

javascriptangularjsangular-promisechaichai-as-promised

Limit express to only allow AJAX requests

Currently working on an Express app where I aim to restrict access to the routes exclusively through AJAX requests. Aware that this involves using the X-Requested-With header, but uncertain of how to globally block other request types. Any suggestions or ...

javascriptnode.jsexpress

Issue: Bidirectional binding functionality is not functioning properly within the user interface modal

I'm currently working on displaying data in a modal, but I'm facing issues with getting two-way binding to work properly. In my HTML code: <div class="cta-actions"> <div class="action"><a class="btn btn-lg btn-max">Send a pa ...

javascriptangularjsangular-ui-bootstrap

The Full Screen Button on Google Maps isn't functioning properly in a third-party mapping application

Below you will see the '+' icon which is also supposed to function as the full screen button. https://i.stack.imgur.com/IMvHa.png However, when clicked on, it does not expand to full screen as intended. I have attempted using some basic jQuery ...

javascriptjquerygoogle-mapsfullscreen

JQuery fails to retrieve accurate width measurements

Utilizing this code snippet, I have been able to obtain the width of an element and then set it as its height: $(document).ready(function(){ $(".equal-height").each(function(){ var itemSize = $(this).outerWidth(); cons ...

javascriptjqueryhtmlcss

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

javascripthtmlreact-redux

How can I send a current variable through PHP?

I have a pressing deadline and I need some guidance before moving forward. Can someone please advise if what I'm attempting is feasible or if there's a quicker solution? I encountered some problems with an accordion menu, so as a temporary fix, ...

javascriptphpjqueryhtmlcss

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

My Ionic App runs smoothly in the browser when using ionic serve. However, I encounter issues with routing when running the app in Ionic View (view.ionic.io) after uploading it with ionic upload. The index.html loads but nothing within <div ui-view=""& ...

javascriptangularjsangular-ui-routerionic-framework

What could be the reason my CSS styles are not taking effect when trying to flip an image?

I am facing an issue with an app that has a two-sided HTML element. The goal is to flip the element when a user clicks a button. I have been experimenting with different approaches without success. Here is the code snippet I have been working on: HTML < ...

htmlcssvue.js

Tips for preventing unstyled content flash when updating CSS files dynamically

The following jQuery function is used to replace CSS files: function UpdateTheme(theme) { var links = $("link"); var _t = theme; $.each(links, function (i, link) { var _h = $(link).attr('href'); _updatedHr ...

javascriptjqueryhtmlcss

Displaying a list of text elements in a React component

Can someone help me figure out why my React app is not rendering a flat array of strings with the following code? {array.length > 0 ? ( <div> <h5>Email list</h5> <div style={{ paddingLeft: "50px", ...

javascripthtmlreactjsjsx

What is the best way to format a date input field so that when a user enters a year (yyyy), a hyphen (-

Need help with date formatting in the format yyyy-mm-dd. Seeking a way to prompt user input for the year and automatically append "-" to the date as needed. Also utilizing a datepicker tool for selecting dates. ...

javascripthtmljquerydatepicker