Question 263579 in CSS Question posted in
Some basic documentation can be found here.

Edge Extension that Overrides CSS

When a PDF is loaded in Edge there is a Save and SaveAs button I want to remove. This occurs for pdfs loaded from web servers as well as local files.
buttons to remove

I have the extension loaded and the popup is working, however, I cannot seem to get the CSS to override the page. The CSS needed is:

` button#save, button#saveAs {   display: none !important;   cursor: not-allowed;   pointer-events: none; }`

Here is my manifest.json:

`{

"name": "CSS Override",
"version": "0.0.5",
"manifest_version": 3,
"description": "Override CSS on any website",

"icons": {
    "16": "icons/favicon.png"
},

"action": {
    "default_icon": {
        "16": "icons/favicon.png"
    },
    "default_title": "CSS Override",
    "default_popup": "popup/popup.html"
},

"permissions": ["activeTab", "scripting"],

"content_scripts": [
    {
        "matches": ["<all_urls>", "file:///*", "http://*/*", "https://*/*"],
        "css": ["css/content.css"],
        "all_frames": true
    }
]

}

`

Here is the "SaveAs" button removed with custom CSS style added in developer console:

SaveAs button removed

I hope this is enough information! I’ve read tons of KBs and googled and asked other developers I know but this is stumping everyone!

Things I have tried:

  • Read through Chrome documentation on extension building
  • Googled different variations of my question and read through forums, blogs, stockoverflow etc,
  • Asked ChatGPT
  • Reached out to some professional developers I know (they haven’t worked with edge extensions before)
  • Cried
Tags:

2

Answers


  1. 0

    Check CSS Specificity: Ensure that your CSS selectors (button#save and button#saveAs) have enough specificity to override any existing styles. You might need to use more specific selectors or use !important if necessary.

    Inspect Element: Use the browser’s developer tools to inspect the elements and confirm that your CSS rules are being applied. Check if there are any conflicting styles that might be overriding yours.

    Try Different Selectors: Instead of using button#save and button#saveAs, try using more general selectors like .save or .saveAs. This can sometimes help in cases where the specific IDs are being overridden.

    Check for JS Interference: Sometimes, JavaScript on the page can dynamically alter the DOM or styles. Make sure there are no scripts modifying these buttons after the page has loaded.

    Test on Different PDFs: Make sure to test on various PDFs to ensure that the issue is not specific to a particular PDF file.

    Debugging in Popup: Consider adding some debugging statements in your popup script to ensure that the script is being executed and that it’s targeting the correct elements.

    Edge Extension Documentation: Double-check Microsoft Edge’s extension documentation for any specific nuances or requirements for manifest v3.

    Consider Using JavaScript: If CSS alone doesn’t work, you might need to use JavaScript to manipulate the DOM and remove the buttons. This can be done in your content script.

    Based on the information you’ve provided, it appears that you’ve set up your manifest file and content script correctly.

    Login or Signup to reply.
  2. 0

    Unfortunately, just like K J said, you can’t remove that button, or rather, you just can’t style the built-in PDF viewer. It is designed as a plugin, and you can’t treat it as DOM, which means it can only be modified by the plugin. You can read this answer for more details.

    If you want to customize a PDF viewer, I suggest you create your own instead of modifying the built-in PDF viewer. You can try some libraries like PDF.js.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search