"Attempting to use a Chrome Extension to apply inline styles is not producing

Question

"Attempting to use a Chrome Extension to apply inline styles is not producing

Despite my attempts to search on Google, I have been unable to find a solution.

I am currently working on developing a Chrome extension with the specific goal of changing/inserting the style.display property for one or more elements. This task would normally be straightforward, but I am facing issues getting it to function properly within an extension.

The manifest.json file:


{
    "name": "My app",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Do thing.",
    "permissions": [
        "tabs", "http://*/",
"tabs", "https://*/"
    ],
    "content_scripts": [
        {
            "matches": ["https://www.facebook.com/*"],
            "js": ["myapp.js"],
            "run_at": "document_end"
        }
    ]
}

and the myapp.js file:


document.getElementById("rightCol").style.display="none";

However, the code does not seem to be having any effect.

javascript google-chrome google-chrome-extension

Answer 1

Answer №1

Perhaps the element is dynamically added to the page after the document_end event is triggered. A simple solution could be to inject CSS instead of a script, which would streamline the process.

Following these steps should help achieve your goal, unless the webpage itself is programmatically overriding this rule:

Modify the manifest file to update the content_scripts section as shown below:

"content_scripts": [
    {
        "matches": ["https://www.facebook.com/*"],
        "css": ["myapp.css"]
    }
]

Create and use the following myapp.css:

#rightCol { 
    display:none !important;
}

Answer 2

Perhaps the element is dynamically added to the page after the document_end event is triggered. A simple solution could be to inject CSS instead of a script, which would streamline the process.

Following these steps should help achieve your goal, unless the webpage itself is programmatically overriding this rule:

Modify the manifest file to update the content_scripts section as shown below:

"content_scripts": [
    {
        "matches": ["https://www.facebook.com/*"],
        "css": ["myapp.css"]
    }
]

Create and use the following myapp.css:

#rightCol { 
    display:none !important;
}

Answer 3

Answer №2

Apologies for the delay in my response. I discovered that the issue was not with the script itself, but rather with Chrome requiring a restart after each change.

To address the problem of the bars not always hiding, I made an adjustment to myapp.css by adding the following code:

document.addEventListener("DOMSubtreeModified", listener, false);

I then implemented the hiding functionality within the listener function (encased in a try/catch block in case it was off-screen).

Now everything works perfectly and the extension is even available in the Chrome web store :) If anyone is interested, you can find the link here: https://chrome.google.com/webstore/detail/hide-facebook-adsfacebook/pkconkhalmgfkbikgonhonmmlbkkoonc

Answer 4

Apologies for the delay in my response. I discovered that the issue was not with the script itself, but rather with Chrome requiring a restart after each change.

To address the problem of the bars not always hiding, I made an adjustment to myapp.css by adding the following code:

document.addEventListener("DOMSubtreeModified", listener, false);

I then implemented the hiding functionality within the listener function (encased in a try/catch block in case it was off-screen).

Now everything works perfectly and the extension is even available in the Chrome web store :) If anyone is interested, you can find the link here: https://chrome.google.com/webstore/detail/hide-facebook-adsfacebook/pkconkhalmgfkbikgonhonmmlbkkoonc

"Attempting to use a Chrome Extension to apply inline styles is not producing

Answer №1

Answer №2

Similar questions

Having an issue with discord.js and node.js modules not exporting correctly? The returned statement is not functioning as

What could be causing this jQuery to malfunction?

Is there a way to create a Vue component that can process dynamic formulas similar to those used in

Make sure to blur all images whenever one of them is clicked

What could be causing the $httpProvider.interceptors to unexpectedly return an 'undefined' value?

VueJS allows for seamless image uploading using either a gallery of images or input files

Should mutators be encapsulated within a class contained in a JS Module for better code organization and maintainability?

Sometimes, JQuery struggles to set input values accurately

using ng-class or ng-style for displaying error messages when validating a text area content

Vue: Develop a master component capable of displaying a sub-component

JavaScript and CSOM updates cause SharePoint list item properties to disappear

How can I trigger an event to append a UL element using

The installation of robotjs via npm failed due to issues encountered while trying to build the binaries

The propagation of SVG events from embedded images via the <image> elements

ReactJS encountered an error: [function] is not defined, July 2017

Using VueJS for reactive binding效果

Encountering crashes when trying to map JSON data onto React components

I am looking to dynamically print countries from an array in my code based on the selected option

Display with organized information, Arrange with unprocessed data in DataTables.net

Please note: With React 18, the use of ReactDOM.render is no longer supported. Instead, we recommend using create