Question

我是Chrome扩展程序的新手，所以我很难知道为什么我没有得到我期望的结果。

我有一个允许您添加关键字的脚本。我希望我的程序能够跟踪关键字并隐藏关键字的父div。基本上它会过滤掉你不想看到的东西。比如Justin Bieber或Kim Kardashian。

我可以毫无问题地添加关键字，但我无法隐藏内容。

我认为问题是我可能没有正确定位我正在查看的页面的dom。

也许错过了许可？

有人可以告诉我如何使用扩展程序执行此操作吗？

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

这是我的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
}

我的html文件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>

Answer 1

您需要将项目存储在数组中，因为:contains()只能处理单个字符串。

更新的代码：

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

变更摘要

添加了一个数组keyWordsArray来跟踪所有关键字。

添加了JSON以将数组转换为字符串以进行本地存储，并在需要时将其转换回数组。

添加了一个功能loadKeyWords()来隐藏任何匹配的段落，并为元素ul#keyWords添加关键字。

删除了额外的$(document).ready并将代码合并到一个就绪函数中。

实施例

你可以看到它在这个JS小提琴示例中工作：https://jsfiddle.net/3u3fctth/4/

使用Chrome扩展程序隐藏关键字的父级Div

1 个答案:

更新的代码：

变更摘要

实施例