用Chrome扩展隐藏关键字的父分区

Hiding Parent Div of Keywords With Chrome Extension

本文关键字：分区 关键字 隐藏 Chrome 扩展      更新时间：2023-09-26

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

我有一个脚本，可以让你添加关键字。我希望我的程序跟踪关键字并隐藏关键字的父div。从本质上讲，它会过滤掉你不想看到的东西。比如贾斯汀·比伯或者金·卡戴珊。

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

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

也许错过了许可？

有人能告诉我如何使用分机吗？

关键字.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>

您需要将项存储在数组中，因为: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 Fiddle示例中看到它的工作：https://jsfiddle.net/3u3fctth/4/

相关文章：