5
\$\begingroup\$

I wrote a Chrome browser extension to hide Top Content posts from Quora, which bother users following too few topics.

A user's feed in Quora.com starts as a list of posts relevant to the user, including a set of "Top Content" posts. As the user scrolls down the page, it loads more posts for them to view.

My extension triggers its initial removal when the DOM loads, and removes all Top Content posts currently visible to the user. This in itself triggers Quora to load in more posts.

My extension responds to the new load by running again and removing the Top Content posts again.

This seems to work well, but I'm concerned about Performance. In some cases, Quora goes through and loads the entire user's feed over a much shorter time, even without action from the user.

Github is available here.

main.js

var QuoraExtension =
{
/* Initialize Quora Extension */
main: function()
{
    QuoraExtension.hideContent();
},

/* Hide Selected Content From Quora */
hideContent: function()
{
    $(document).ready(
        function()
        {
            //Run the clean out as soon as possible
            QuoraExtension.hideTopContent();

            /*
                Now, we add a listener for when the DOM tree is updated,
                when it is, we check for more content to hide.

                Timeouts are used to prevent infinite loops of removals
                Removal of content can sometimes trigger another check,
                so timeouts prevent us from using too much processing
             */
            var hideTopContentTimeout = null;

            document.addEventListener("DOMSubtreeModified", function() {
                if(hideTopContentTimeout) {
                    clearTimeout(hideTopContentTimeout);
                }
                hideTopContentTimeout = setTimeout(QuoraExtension.hideTopContent, 500);
            }, false);
        }
    );
},

/* Hide Top Content sections */
hideTopContent: function()
{
    var $topContent = jQuery("span:contains('Top content on Quora')").closest('.pagedlist_item');
    $topContent.hide();
}
};

// Initialize QuoraExtension if JQuery is available
if(!!jQuery)
{
    QuoraExtension.main();
}

manifest.json

{
"manifest_version": 2,

"name": "Quora Extension by 2NickPick",
"description": "Utilities for using Quora.com",
"version": "0.1",

"permissions": [
    "activeTab"
],
"content_scripts": [
    {
        "matches": ["https://*.quora.com/*"],
        "js": ["lib/jquery/1.7.2/jquery.min.js", "main.js"],
        "runat": "document_start"
    }
]
}
\$\endgroup\$
3
\$\begingroup\$

Interesting question,

  • I would place the bulk of your comments on top, they stop the flow of the reading
  • I would experiment with $.remove() instead of $.hide();, otherwise you might actually run into memory and performance problems. I am thinking that with $.remove() you might not even need the timeouts any more.
  • Manifest looks fine
  • Your indenting is off, use something like jsbeautifier
  • This is shorter and more readable

    $("span:contains('Top content on Quora')").closest('.pagedlist_item').hide();
    

    than

    var $topContent = jQuery("span:contains('Top content on Quora')").closest('.pagedlist_item');
    $topContent.hide();
    
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.