Having trouble with the functionality of a Chrome extension content-script JavaScript that is set to run at document_end

Currently, I am in the process of developing a Google Chrome extension that is designed to hide the "news" section located on the right-hand side of Facebook, along with the ads displayed on the right side. Additionally, the background color is meant to be changed to black.

At this moment, I am facing an issue where upon loading Facebook, the news and white background briefly appear for a split second before disappearing. It appears that setting the run_at attribute to document_end causes my JavaScript code to run after the page has already been loaded. I have attempted using both document_start and document_idle with similar outcomes. How can I prevent the news section from showing up altogether?

manifest.json:

{
  "manifest_version": 2,

  "name": "FB_Trending_Hide_ChromeExtension",
  "description": "This extension will hide the trending news section of Facebook",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png"
  },
  "content_scripts": [{
    "run_at": "document_end",
    "matches": ["*://*.facebook.com/*"],
    "js": ["content.js"],
    "all_frames": true
  }],
    "permissions": [
    "tabs", "*://*.facebook.com/*", "activeTab"
  ]
}

content.js:

document.getElementById("pagelet_trending_tags_and_topics").style.display = 'none';
document.getElementById("pagelet_ego_pane").style.display = 'none';
document.body.style.background = 'black';
javascriptgoogle-chromegoogle-chrome-extensioncontent-script

Answer №1

It appears that employing CSS, specifically a "css", within the content_scripts entry is more suitable than utilizing JavaScript, "js". Utilizing CSS can simplify the process since considerations about dynamically added elements are unnecessary.

My recommendation would be to implement something like this:

manifest.json (content_scripts segment only):

  "content_scripts": [{
    "run_at": "document_start",
    "matches": ["*://*.facebook.com/*"],
    "css": ["facebookContent.css"],
    "all_frames": true
  }],

facebookContent.css:

#pagelet_trending_tags_and_topics {
    display:none !important;
}
#pagelet_ego_pane {
    display:none !important;
}
body {
    background:black !important;
}

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

Integrate Ruby parameter into JavaScript in Rails

I have a div that I want to turn into a link to another page. Typically, we achieve this using link_to link. <% for item in @items %> <%= link_to "Item", item %> # -> or <%= link_to(item) %> <% end %> However, I need the ent ...

javascriptjqueryruby-on-railsruby

Forward users to specific date and time on Everwebinar link

Is there a way to automatically redirect visitors of my custom Everwebinar confirmation page (on my domain) to a specific URL at a set date and time that is included in the confirmation page URL? Here is an example of what the confirmation page URL looks ...

javascriptredirect

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

Every page on Nextjs displaying identical content across all routes

I recently deployed a Next.js app using docker on AWS infrastructure. While the index page (/) loads correctly, I've noticed that the content of the index is also being loaded for every other route, including api routes, as well as the JavaScript and ...

javascriptamazon-web-servicesdockernext.jsdockerfile

What could be causing my asynchronous JavaScript/Node.js function to bypass a significant portion of the code?

Upon calling the function below: async function sql_func(){ console.log('anothertest') async () => { console.log('third test') try { await sql.connect('heres the connection data') ...

javascriptnode.jsasync-await

Securing a single component within a named view router in Vue.js

Within my routes configuration, I have a named view route set up: let routes = [ { name: "home", path: '/', components: { default: Home, project: ProjectIndex } } ] The goal is to ...

javascriptvue.jsbabeljsvue-router

What is the reason for Google Chrome extension popup HTML automatically adding background.js and content.js files?

While using webpack 5 to bundle my Google Chrome extension, I encountered an issue with the output popup HTML. It seems to include references to background.js and content.js even though I did not specify these references anywhere in the configuration file. ...

typescriptwebpackgoogle-chrome-extension

Having trouble getting useFieldArray to work with Material UI Select component

I am currently working on implementing a dynamic Select field using Material UI and react-hook-form. While the useFieldArray works perfectly with TextField, I am facing issues when trying to use it with Select. What is not functioning properly: The defau ...

javascriptreactjstypescriptmaterial-uireact-hook-form

A Node.js feature that enables atomic file replacement, triggering watchers only once

I have a unique scenario where I need to handle two types of processes. One process is responsible for writing a file, while the other processes are required to read it whenever there is a change. In my research, I came across fs.watch as a solution to ke ...

javascriptnode.jswatch

The process of displaying only the month name as the title in Full Calendar

Is there a way to display the Full Calendar title with only the month name instead of "month name year name"? Here is my code attempt: $('#calendar').fullCalendar({ header: { left: 'prev', center: 'title' ...

javascriptjquery

Is it possible to update only the inner text of all elements throughout a webpage?

Scenario After coming across a thought-provoking XKCD comic, I decided to craft a script that would bring the comic's concept to life: javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+ ...

javascripthtmlinnerhtmlinnertext

Factory not properly updating AngularJS controller

I am facing an issue with two controllers and one factory in my AngularJS application. The first controller sends an http request to a server, receives a string in response, and stores it in the factory. However, the second controller does not update with ...

javascriptangularjs

Troubleshooting JavaScript's onchange Function Dysfunction

Here is the code snippet I am working with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-2.2.1.min.js"></script> <script src="slike.js"></script> ...

javascriptjqueryhtml

What exactly do `dispatch` and `commit` represent in vuex?

Recently, I came across a Typescript project in Vue.js with a Vuex store that had the following code: async getUserProfile ({ dispatch, commit }: any) {} I found working with any cumbersome as it doesn't provide helpful autocomplete features in the ...

javascriptvue.jsvuejs2flowtypevuex

How can I retrieve the span html element without using a class with ajax?

Trying to work with Ajax syntax for the first time, I have this HTML code. <div class="select2-container select2" id="s2id_ServiceID-2-1" style="width: 100%;"> <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabind ...

javascripthtmlajax

The Angular directive is failing to refresh the data on the Google Map

I created a directive called "myMap" to incorporate a Google map into my application. However, I am facing an issue when attempting to update the longitude and latitude values for a different location using a controller function. The directive does not ref ...

javascriptangularjsangularjs-directive

Guide on including a JavaScript file in HTML during execution on Node.js

I have developed a basic nodeJs server with the following code in my server.js file: var http = require('http'); var fs = require('fs'); var path = require('path'); var server = http.createServer(function(req, resp){ // P ...

javascripthtmlnode.js

Ensuring all fetch requests are completed successfully before dispatching an action in React-Redux

I'm currently developing a React application and utilizing Redux to manage the state. Here is a snippet of the code: category-arrows.component.jsx: import React, { Component } from 'react'; import { connect } from 'react-redux'; i ...

javascriptreactjsreduxfetch

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Scrollmagic - Creating dynamic effects by animating body and div backgrounds using multiple tweens

I'm currently developing a website that utilizes scrollmagic to smoothly transition the color of the active div (each set to size of the screen) from black back to white as you scroll down. The issue I am facing is that the body background color does ...

javascriptjqueryhtmlscrollmagic