Is "content_scripts" malfunctioning in Chrome version 38 and above?

Just recently, I created a Chrome Extension with the purpose of making all webpages utilize a specific font. Everything was functioning perfectly fine until yesterday (or possibly even earlier).

The crucial codes for this extension are:

manifest.json file details:

{
    ...

    "content_scripts": [{
        "matches":  ["http://*/*", "https://*/*"],
        "js": ["font.js"],
        "run_at":"document_start"
    }],
    "web_accessible_resources": ["font.css"]
}

font.js file contents:

var link = document.createElement("link");
link.href = chrome.extension.getURL("font.css");
link.type = "text/css";
link.rel = "stylesheet";
document.documentElement.insertBefore(link);

font.css file details:

* {
  font-family: "Microsoft Yahei Mono", "Microsoft Yahei", sans-serif !important; 
}

I am perplexed by the sudden malfunction and would greatly appreciate any insights into understanding what is causing this issue. Alternatively, if anyone has suggestions on alternative ways to execute the js file when initiating webpage documents, please share!

javascriptjsongoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools

Answer №1

Starting from Chrome 38, the browser now strictly follows the DOM standard and will throw an exception if the required argument is omitted in the .insertBefore method (refer to this link).

To resolve this issue in your code, you can utilize either of the following options:

document.documentElement.insertBefore(link, null);
// or
document.documentElement.appendChild(link);

I suggest opting for the "css" key instead of a content script to insert style sheets. By doing so, you no longer require the use of font.js file (plus, the styles will be applied immediately upon installation).

{
    "manifest_version": 2,
    "name": "my extension",
    "version": "1.0",

    "content_scripts": [{
        "matches":  ["http://*/*", "https://*/*"],
        "css": ["font.css"],
        "run_at":"document_start"
    }]
}

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

Issues persist with the Angular UI Tree Module: the removed callback is not functioning as

I am currently utilizing a module that can be found at the following URL: https://github.com/angular-ui-tree/angular-ui-tree Unfortunately, I am facing an issue with getting the removed callback to work properly. The accept callback seems to be functionin ...

javascriptangularjsangular-ui-tree

Struggling to right align Nav Items in Bootstrap React?

How do I adjust the alignment of my NavItem to the right? Currently, it is displaying aligned to the left. Are there any syntax errors present? <Navbar style={{backgroundColor:'#071425'}} collapseOnSelect expand="lg" variant=" ...

javascriptreactjsbootstrap-4react-redux

When conducting unit testing with Express, encountering an error message such as "`call of undefined`" may indicate that

In my current quest to test a node.js application using express, I encountered an issue. After successfully returning a simple 404.html page, I attempted to close the node http server, resulting in an error: Fatal error: Cannot call method 'call&apos ...

javascriptnode.jsunit-testingexpressnodeunit

Struggling to Make Div Refresh with jQuery/JS in my Rails Application

I'm currently facing an issue in my Rails app where I am unable to refresh a specific Div element. The Div in question is located in bedsheet_lines_index.html.erb <div id="end_time_partial" class="end_time_partial"> <%= render :partial ...

javascriptjqueryruby-on-railsajax

The fixed navigation bar is obscured by the address bar in Chrome mobile

After starting a new project, I encountered an issue with my fixed navbar while testing it on Chrome on mobile iOS. Initially, I believed it to be a browser bug, but after reviewing previous projects, I realized that they functioned properly with the fixed ...

htmlgoogle-chromemobilescrollcss-position

Troubleshooting: AngularJS Form Submission Failure

As a novice in Angular and not a JavaScript expert, I am facing challenges with form submission. My task involves loading movie showtimes from an http API and using ng-repeat to display them within a page container. The REST API requires a zipcode input, w ...

javascriptjqueryhtmlangularjsforms

Uncovering the Mystery: Extracting a Video Thumbnail from Brightcove Videos

Is there a way to extract the video thumbnail from Brightcove Video? <x:out select="$item/description" escapeXml="false" /> At the moment, the thumbnail is being retrieved within the description. ...

javascriptjqueryvideobrightcove

The v-autocomplete feature in vuetify doesn't allow for editing the text input after an option has been selected

Link to code on CodePen: CodePen Link When you visit the provided page and enter "joe" into the search box, choose one of the two Joes that appear. Try to then select text in the search box or use backspace to delete only the last character. You will no ...

javascripthtmlvue.jsautocompletevuetify.js

Retrieve an array containing various values of a single element with the help of Protractor

Currently, I am in the process of testing an application that showcases graphs using rickshaw and d3. The tests are being run with protractor and jasmine. It's worth noting that this question is not specific to this particular scenario but rather more ...

javascriptselenium-webdriverjasminepromiseprotractor

Utilizing Google Web Fonts in Gatsby with Custom Styled Components

While using createGlobalStyle from styled-components for global styling, everything seems to be working fine except for applying Google fonts. I have tried multiple ways but can't seem to get it to work. Here's the code snippet: import { createG ...

javascriptreactjsgatsbystyled-components

Transmit a batch of images in a single JSON request

Currently, I am in the process of developing a rest API that requires uploading multiple images with just one post request. My current approach involves creating an array of base64 strings for the selected images and then converting this array to a string ...

phpjqueryjsonbase64

Display temporary image if image is not located

I attempted to utilize the onerror attribute to display a placeholder image when the desired image is not found in the folder. The image path is dynamically generated from the backend. The code snippet below shows how I implemented this: <img class=&quo ...

javascripthtmlangular

Convert the first child of the element with the id "images" into a string using document.getElementById("images").children

When using the toString() method, it will display [object HTMLImageElement]. My goal is to get a string representation of the image element '<img src="..." />'. However, in Firefox, outerHTML returns undefined. Is there another way I can a ...

javascripthtmldom

Utilizing JSON instead of GeoJSON with AJAX in Leaflet

I am in search of a method to utilize JSON instead of GeoJSON with leaflet, making use of AJAX. The use of JSON and AJAX is imperative for this task. I have successfully called a JSON file using AJAX. However, I am now unsure about how to effectively util ...

javascriptajaxjsonleaflet

"Error message encountered while trying to execute a GET HTTP request with incorrect JSON formatting

Currently, I am working on retrieving a list of users from our software. The goal is to format the names and email addresses of these users into a list for comparison with other data sets in order to determine accuracy. I have included the code snippet I a ...

c#arraysjsonrestget

Tips for effectively passing "this" to direct the event initiator in react js?

I'm facing an issue where I am attempting to send a buttons object to a function and then access its properties within that function. Here's my button : <RaisedButton label="Primary" id = "1" onTouchTap={()=>this.buttonPress(this)} prima ...

javascriptreactjsmaterial-ui

Angular 5 - Strategies for excluding specific properties from Observable updates

Currently, I am in the process of developing a webpage where users can view and like various videos. The video content and user likes are stored in a database, and I have implemented two Angular services for handling data retrieval and storage. However, I ...

javascriptangularangular5angular2-observables

What is the best way to include React globally when running unit tests?

In my Rails project, I have integrated the react-rails gem, which sets up a global variable like this: window.React = React; While this is convenient for regular usage, it causes issues when running unit tests with Jest because the global React variable ...

javascriptruby-on-railsreactjsjestjsreact-rails

AWS Lambda Error: Module not found - please check the file path '/var/task/index'

Node.js Alexa Task Problem Presently, I am working on creating a Node.js Alexa Skill using AWS Lambda. One of the functions I am struggling with involves fetching data from the OpenWeather API and storing it in a variable named weather. Below is the relev ...

javascriptnode.jsamazon-web-servicesrequestaws-lambda

What could be causing the NaN error when parsing a number in Javascript?

I'm having trouble figuring out why I keep getting a NaN when I try to print a number with JavaScript. This code snippet is used in multiple places on the website and usually works without any issues. The URL where this issue is occurring is: Here ...

javascriptjqueryhtml