Why won't my Chrome content script load even though I have the correct syntax and have tried troubleshooting?

I'm facing an issue with my extension where the file content.js is not being loaded on any webpage despite trying multiple troubleshooting steps. I've tried different permissions, changing site patterns, reinstalling, restarting Chrome, adjusting run_at values, checking policies, and adding debug statements to my code without success. What could be causing this problem?

Here is a snippet from my manifest.json:

{
  "manifest_version": 3,
  "version": "1.0.0",
  "name": "Debug",
  "short_name": "Debug",
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

Here is the content of content.js:

document.addEventListener("DOMContentLoaded", () => {
  document.body.style.color = "red";
});

Just to note, this is a small debugging extension I created for another main extension. Both content scripts are failing to load, although Bitwarden's content script is visible in the dev tools.

Answer №1

Content scripts can be viewed in a separate tab within the sources tab. To access them, simply click on the right arrow and select content scripts. Additionally, the event listener for DOMContentLoaded was incorrect because the script is loaded only after the document has been fully loaded. The problem was resolved by removing it.

Update: The issue stemmed from attempting to import code from another file.

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

Loop through with <li> inside a <td> tag

I need help figuring out how to place a list of items inside a table row using ng-repeat in AngularJS. Here is my attempted code: <td> <div ng-repeat="x in total.count"> ...

After I click on an operator button, the display on my HTML calculator does not reset

function aClick(){ if(a === undefined){ numberButtons.forEach(button => { button.addEventListener("click", addNumber) }); operatorButtons.forEach(button => { button.addEventListener(' ...

Issue with onresize event not triggering when checking window width

After successfully attaching the onresize listener to the body tag, I encountered an issue when I modified my code to access the window.innerWidth and window.innerHeight properties. Strangely, my resize event only fires once. <script type="text/javas ...

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

Tips for consolidating JavaScript assets in Mean.io

Recently, I started using Mean.io and encountered an issue while trying to include an external .js file in my package. Unfortunately, I seem to be doing it incorrectly as the file is not being added to aggregated.js. This is the approach I have taken: im ...

Tomcat running on AWS ElasticBeanstalk does not support JSON input

I developed a spring MVC application using the spring tools for eclipse and deployed it on a tomcat 7 environment on AWS Elastic Beanstalk. However, I encountered an error when trying to return JSON. 406- The resource identified by this request is only c ...

Exploring JSON Parsing with jQuery

My API returns the following JSON: {"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 1}, "objects": [{"cost": 1000, "amount": "$10 Gift Card", "id": 2, "resource_uri": "/api/amount/2/", "slug": "10-gift-card"}]} While I a ...

Applying custom CSS to individual divs based on their text height using jQuery

I have a grid consisting of multiple boxes each sized at 280px by 280px, and I am seeking a way to vertically align text within hover overlays on each box. While my current code successfully aligns the text for the first box, I am encountering issues due ...

Track the number of views each month using PHP and MySQL to generate dynamic jQuery charts

I am currently utilizing jQuery with chart.js to display the view counter based on month using PHP and MySql. Each page view is inserted into MySql in the following format : | id | ip | page | date(timestamp) | | 1 | 138.86.20.20 | test.p ...

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

I keep a notebook that contains the following entries: https://i.stack.imgur.com/MLdO0.png For information on OneNote APIs, you can refer to this link (paragraph class selected already) https://learn.microsoft.com/en-us/javascript/api/onenote/onenote.p ...

how to use serializeArray() to create an array with named keys

I am struggling with a piece of HTML code : <input type="checkbox" name="search-form[filters][category][12]" value="cat-12" autocomplete="off" checked="checked" /> <input type="checkbox" name="search-form[filters][category][14]" value="cat-14" au ...

Personalize JSON Output

Currently, I am working on incorporating jqvmap into my project. The original format of my json response is as follows: [ { "Count": 10, "ProvinceCode": 34 }, { "Count": 6, "ProvinceCode": 59 } The required format for jqvmaps is as shown ...

What is the method to execute a prototype function within another prototype?

I am facing an issue with my JavaScript class and need some help to resolve it. MyClass.prototype.foo = function() { return 0; } MyClass.prototype.bar = function() { return foo() + 1; } Unfortunately, when I try to run the program, it throws an ...

immutable.js - updating specific nodes within intricate and deeply nested objects

I am looking to replace a fragment of my JSON object with another part using immutable.js. Consider the example below where we have a more complex and nested object. I want to update/replace the node with "id": "F" with a different edited node. As per th ...

AngularJS: Issue with directive function not being executed

I created a directive in my code, but for some reason the function I provided to define the directive is not being called. It was working perfectly fine before, and now it just suddenly stopped without any clear explanation. Below is the code snippet of m ...

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

I have been working on positioning certain elements in the app and I have found a method that seems to work, using code like this: <v-toolbar fixed></v-toolbar> Another option is something along these lines: <v-toolbar app></v-toolb ...

Supporting server-side routing with NodeJS and Express for AngularJS applications

My current setup includes NodeJS + expressJS on the server and AngularJS on the client side. The routes defined in my AngularJS controller are as follows: app.config(function($routeProvider,$locationProvider) { $routeProvider .when('/field1/:id&apo ...

The object's value might be undefined, despite having null checks in place

Currently using Typescript 4.0.5 and encountering a persistent Object is possibly undefined error message My local state includes a .csv file uploaded by the user const [currentLine, setCurrentLine] = useState<File>(); The useEffect function monit ...

The event listener is activated before the HTML element is selected for clicking

I've encountered a strange issue while using the addEventListener method on an HTMLElement within a function that is triggered onload. The problem is that the method seems to be getting executed before I even attempt to click on the element in the HTM ...

What steps can I take to prompt Jackson to throw an error if a value for a primitive is not specified in the JSON?

Here is the code snippet: import com.fasterxml.jackson.databind.ObjectMapper; import java.io.IOException; public class Main { public static void main(String[] args) throws IOException { System.out.println(new ObjectMapper().readValue("{} ...