Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Chrome extension to edit page HTML and CSS not working

Johna

Frontend Developer
Staff Team
Guardian
Ok, so the last question I posted I didn't put the code in the </> thing, so I'm re-asking it here.

Hi everyone, I made this extension to view unlimited number of Quora pages without having to sign up by removing the sign up popup. I don't know what I did wrong, but it isn't working. My browser also doesn't give any errors.


Here's the code:

manifest.json
JSON:
{
    "manifest_version": 2,
    "name": "Quora Unlimited",
    "version": "1.0",
    "description": "This extension allows you to view unlimited number of Quora pages a day without needing an account.",
    "icons": {
        "16": "Icons/quoraLogo16.png",
        "32": "Icons/quoraLogo32.png",
        "48": "Icons/quoraLogo48.png",
        "128": "Icons/quoraLogo128.png"
    },
    "content_scripts": [
        {
            "matches": ["https://www.quora.com/*"],
            "js": ["JavaScript/signUpRemove.js"],
            "css": ["CSS/blurRemove.css"],
            "run_at": "document_end"
        }
    ]
}

signUpRemove.js
JavaScript:
const elements = document.getElementsByClassName("q-flex qu-alignItems--center qu-justifyContent--center qu-overflow--hidden qu-zIndex--blocking_wall");
while (elements.length > 0) elements[0].remove();

blurRemove.css
CSS:
.q-box qu-overflow--hidden {
    box-sizing: border-box;
    position: none !important;
    inset: 0px;
    filter: blur(0px) !important;
}

And here is the structure of my folder/directory:
Quora Unlimited ├ CSS | └ blurRemove.css ├ Icons | ├ quoraLogo16.png | ├ quoraLogo32.png | ├ quoraLogo48.png | └ quoraLogo128.png ├ JavaScript | └ signUpRemove.js └ manifest.json

Does anyone have any idea why the extension isn't working?

Thanks.
 
Solution
Ok It's working now.
Rather than deleting the sign up popup with JavaScript, I just hid it using CSS.

Here is my new code if any of you want to see it:

manifest.json
JSON:
{
  "manifest_version": 2,
  "name": "Quora Unlimited",
  "version": "1.0",
  "description": "This extension allows you to view unlimited number of Quora pages a day without needing an account.",
  "icons": {
    "16": "Icons/quoraLogo16.png",
    "32": "Icons/quoraLogo32.png",
    "48": "Icons/quoraLogo48.png",
    "128": "Icons/quoraLogo128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://www.quora.com/*"],
      "css": ["CSS/removeOverlayPopup.css"],
      "run_at": "document_end"
    }
  ]
}

removeOverlayPopup.css...
Ok It's working now.
Rather than deleting the sign up popup with JavaScript, I just hid it using CSS.

Here is my new code if any of you want to see it:

manifest.json
JSON:
{
  "manifest_version": 2,
  "name": "Quora Unlimited",
  "version": "1.0",
  "description": "This extension allows you to view unlimited number of Quora pages a day without needing an account.",
  "icons": {
    "16": "Icons/quoraLogo16.png",
    "32": "Icons/quoraLogo32.png",
    "48": "Icons/quoraLogo48.png",
    "128": "Icons/quoraLogo128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://www.quora.com/*"],
      "css": ["CSS/removeOverlayPopup.css"],
      "run_at": "document_end"
    }
  ]
}

removeOverlayPopup.css
CSS:
.q-box.qu-overflow--hidden {
  box-sizing: border-box !important;
  inset: 0px !important;
  filter: blur(0px) !important;
  position: relative !important;
}

.q-flex.qu-alignItems--center.qu-justifyContent--center.qu-overflow--hidden.qu-zIndex--blocking_wall {
  display: none !important;
}


And here is the new structure of my folder/directory:
Quora Unlimited ├ CSS | └ removeOverlayPopup.css ├ Icons | ├ quoraLogo16.png | ├ quoraLogo32.png | ├ quoraLogo48.png | └ quoraLogo128.png └ manifest.json
 
Solution

New Threads

Buy us a coffee!

Back
Top Bottom