0

I have been trying to create a Google Chrome extension that changes the class name of an element and deletes an element from a webpage. I haven't been able to get this to work. Throughout my testing, I think that when I try to change an HTML element, it tries to change the HTML from popup.html instead of the current webpage I am on.

How could I fix this?

Here is an example of my code:

manifest.json:

{
    "manifest_version": 2,

    "name": "Tester",
    "version": "0.1.0",
    "browser_action": {
        "default_popup": "popup.html"
    },

    "permissions": [
        "activeTab",
        "tabs"
     ],

     "content_scripts": [{
       "js": ["popup.js"],
       "matches": ["<all_urls>"]
     }]
}

popup.html:

<html>
    <body>
        <h1>TestExtension</h1>
        <button id="thisButton">Click Me</button>
    </body>
</html>

popup.js:

document.addEventListener('DOMContentLoaded', function() {
    var buttonEvent = document.getElementById('thisButton');
    buttonEvent.addEventListener('click', function() {

        document.getElementByClassName("className").className = ""; // Changes body's class name
        document.getElementByClassName("otherClass").remove(); // Removes HTML element
    });

}, false);
Jack
  • 15
  • 5
  • Looks like you want a content script. Content scripts run on the webpage. [Content Scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) – Invizi Oct 06 '21 at 22:31
  • Also add a matches array in your manifest file, so the script knowns what pages to run on. – Invizi Oct 06 '21 at 22:35

0 Answers0