Hiding Parent Div of Keywords With Chrome Extension

Question

I am new to Chrome extensions so I am having trouble knowing why I am not getting my expect results.

I have a script that allows you to add keywords. I want my program to keep track of the keywords and hide the parent div of the keywords. Essentially it would filter out stuff you do not want to see. Like, Justin Bieber or Kim Kardashian.

I can add the keywords with no problem but I cannot get the content to be hidden.

I think the problem is I may not be targeting the dom correctly of the page I am viewing.

Maybe missing a permission?

Could someone please tell me how to do this with an extension?

keywords.js

$(document).ready(function () {

$('#add').click( function() {
   var Description = $('#description').val();
  if($("#description").val() === '') {
    $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
    $('#alert').fadeIn().delay(1000).fadeOut();
    return false;
   }
   $('#keyWords').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
   $('#form')[0].reset();
   var keyWords = $('#keyWords').html();
   localStorage.setItem('keyWords', keyWords);
   return false;
});

if(localStorage.getItem('keyWords')) {
$('#keyWords').html(localStorage.getItem('keyWords'));
}

$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});

}); // End of document ready function


$(document).ready(function() {
  $("div p:contains(localStorage.getItem('keyWords')).parent('div').hide()");
}); //end of document ready function

This is my Manifest.json

{

 "name": "Wuno Zensoring",
  "version" : "1.0",
   "permissions": [
   "activeTab",
   "storage"
   ],
  "description": "This extension will search the document file for keywords and hide their parent div.",
  "icons": {                   
    "19": "icon19.png",
    "38": "icon38.png",
    "48": "icon48.png",
    "128": "icon128.png"  
  },    
  "browser_action": {
    "default_icon": "icon.png128",
    "default_popup": "keyform.html",
    "background_page": "keyform.html",
    "default_icon": {                   
      "19": "icon19.png",
      "38": "icon38.png",
      "48": "icon48.png",
      "128": "icon128.png"        
  }
  },
     "manifest_version": 2
}

My html file keyform.html

<!doctype html>
<html>
  <head>
    <title>Wuno Webpage Analyzer</title>
    <script src="jquery-1.11.3.min.js"></script>
        <script src="keywords.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <img src="icon48.png">

 <section>
<form id="form" action="#" method="POST">
<input id="description" name="description" type="text" />
<input id="add" type="submit" value="Add" />
<button id="clear">Clear All</button>
</form>
<div id="alert"></div>
<ul id="keyWords"></ul>
</body>
</html>

What does the markup you are trying to manipulate look like? — Adam Konieska, Dec 23 '15 at 19:04
You've also got a misplaced quote in your `$("div p:contains(localStorage.getItem('keyWords')).parent('div').hide()");`You probably want `$("div p:contains("+localStorage.getItem('keyWords')+")").parent('div').hide();` — Adam Konieska, Dec 23 '15 at 19:07
Thank you for point that out. But it still does not hide anything.. Basically if one of the keywords being held in local storage I want the whole parent div to become hidden. Is this a logical way to handle this and any clue how to target the document from my extension? — wuno, Dec 23 '15 at 19:13
What is being stored in keywords? If its a single string it will work as you've written (see this JS fiddle example: https://jsfiddle.net/3u3fctth/) but for multiple strings you're going to need to iterate over them individually. — Adam Konieska, Dec 23 '15 at 19:17
Well It is a list of strings. I am allowing users to store as many keywords as they want. So the app will hide everything they dont want to see. So I need a for loop? — wuno, Dec 23 '15 at 19:19
Correct. See this JS fiddle example with a loop: https://jsfiddle.net/3u3fctth/1/ — Adam Konieska, Dec 23 '15 at 19:20
this should work then? for(var i = 0; i < multiStr.length; i++) { $("div p:contains("+localStorage.getItem('keyWords')+")").parent('div').hide(); } — wuno, Dec 23 '15 at 19:23
No, that wont work. It depends on how the data is structured in keyWords. Is it an array, an object, a comma separated list, etc? — Adam Konieska, Dec 23 '15 at 19:24
I am using local storage setItem and getItem I am understanding it as it only takes strings, but I assumed it was adding them in as an array, Does this make sense to you? http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage — wuno, Dec 23 '15 at 19:27
In my code I am using the setItem and getItem function with local.storage but when I use the methods I print the list on the screen in the order they were entered like this, $('#keyWords').prepend("
It doesn't look like you are creating them as an array. In fact, you're storing all the HTML thats in #keyWords in localstorage. Double check that, and the JSON in that SO question you linked would help you get them into an array. — Adam Konieska, Dec 23 '15 at 19:34
But I need them in local storage so I can save them each time the user closes browser moves around etc. — wuno, Dec 23 '15 at 19:38
Or are you saying keep in local storage, push to array uses the array in the loop the way you suggested and my app will work? — wuno, Dec 23 '15 at 19:38

Adam Konieska · Accepted Answer · 2015-12-23T21:12:01.883

You need to store the items in an array, since :contains() can process only a single string.

Updated Code:

var keyWordArray = [];
//if the existing local storage was not an array, delete it
if(localStorage["keyWords"].substr(0,1) != '[') {
    //empty local storage
    localStorage["keyWords"] = '';
} else {
    //parse the array, and store it in keyWordArray
    keyWordArray = JSON.parse(localStorage["keyWords"]);
}



$(document).ready(function () {

    $('#add').click( function() {
    var Description = $('#description').val();
    if($("#description").val() === '') {
        $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
        $('#alert').fadeIn().delay(1000).fadeOut();
        return false;
        }

    $('#form')[0].reset();
    var keyWords = $('#keyWords').html();

    //add the new keyword to the array
    keyWordArray.push(Description);
    //overwrite the array in localStorage with the new, updated array
    localStorage["keyWords"] = JSON.stringify(keyWordArray);
    //call loadKeyWords() to rebuild the UL and hide any matching elements
    loadKeyWords();
    return false;
    });


    function loadKeyWords() {
    //clear the existing data
        $('#keyWords').html('');
    //for all the items in the array...
        for(var i = 0; i < keyWordArray.length; i++) {
        //add them to the UL
            $('#keyWords').append('<li><input id="check" name="check" type="checkbox">'+keyWordArray[i]+'</li>');
      //and hide any DOM elements that have the keyword
      $("div:contains('"+keyWordArray[i]+"')").hide();    
        }
    }

    $('#clear').click( function() {
        window.localStorage.clear();
        location.reload();
        return false;
    });

    loadKeyWords();
}); //end of document ready function

Summary of Changes

Added an array keyWordsArray to track all the keywords.

Added JSON to convert the array to a string for local storage, and convert it back to an array when needed.

Added a function loadKeyWords() to hide any matching paragraphs, and add keywords to the element ul#keyWords.

Removed the extra $(document).ready and consolidated the code into one ready function.

Example:

You can see it working in this JS Fiddle Example: https://jsfiddle.net/3u3fctth/4/

Hmm this broke my app... The list of keywords is not appearing after I enter them. And it is also not hiding the parent divs on a page. This is very confusing to me cause you are doing this a much different way then I was. I appreciate your help but I was using setItem and getItem. Your way is bad ass if it will work.. I would hate to switch gears here and it not work. — wuno, Dec 23 '15 at 20:04
What error are you getting? The syntax shouldnt matter, `var x = localStorage["keyWords"]` is the same as `var x = localStorage.getItem('keyWords')` — Adam Konieska, Dec 23 '15 at 20:39
No error. It is not displaying the list of keywords after I add them, and it is not hiding the keywords on the page when i navigate to any page with the keyword on it. — wuno, Dec 23 '15 at 20:48
Check the console. You've probably got existing data in `localStorage["keyWords"]` thats breaking it. — Adam Konieska, Dec 23 '15 at 20:54
SyntaxError: Unexpected token u That error is normally seen when the value given to JSON.parse is actually undefined. So, I would check the code that is trying to parse this - most likely you are not parsing the actual string shown here. — wuno, Dec 23 '15 at 20:55
Thats coming from the existing stuff you have stored in `localStorage["keyWords"]` during your previous attempts. Run `localStorage["keyWords"] = ''` in the console to clear the existing data. — Adam Konieska, Dec 23 '15 at 20:58
Ok now when I add a keyword I get SyntaxError: Unexpected end of input and still the list does not populate and it does not hide anything from the page. — wuno, Dec 23 '15 at 21:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98858/discussion-between-adam-konieska-and-nichodiaz). — Adam Konieska, Dec 23 '15 at 21:03

Hiding Parent Div of Keywords With Chrome Extension

1 Answers1

Updated Code:

Summary of Changes

Example: