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

乌诺

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

我有一个脚本,可让您添加关键字。我希望我的程序跟踪关键字并隐藏关键字的父div。本质上,它将过滤掉您不想看到的内容。就像贾斯汀·比伯或金·卡戴珊。

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

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

可能缺少许可?

有人可以告诉我如何使用扩展程序吗?

keyword.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>
亚当·科涅斯卡(Adam Konieska)

您需要将项目存储在数组中,因为: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()隐藏所有匹配段落的功能,并向element添加了关键字ul#keyWords

删除了多余的部分$(document).ready,并将代码合并为一个就绪函数。

例子:

您可以在此JS小提琴示例中看到它的工作:https : //jsfiddle.net/3u3fctth/4/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Chrome扩展程序:无法从标签中提取关键字

来自分类Dev

使用多个多功能框关键字的Chrome扩展程序

来自分类Dev

Google Chrome扩展程序:多功能框关键字如何使用?

来自分类Dev

赤裸的“扩展”关键字

来自分类常见问题

“如果打算隐藏则使用新关键字”警告

来自分类Dev

Mustache.js使用“链接”关键字扩展行为

来自分类Dev

为什么Java / Scala使用扩展/实现关键字?

来自分类Dev

为什么Java / Scala使用扩展/实现关键字?

来自分类Dev

通过关键字在Django多对多中查询模型继承中的父级

来自分类Dev

通过关键字在Django多对多中查询模型继承中的父级

来自分类Dev

何时为小部件父级构造函数添加“ this”关键字?

来自分类Dev

用于访问父元素的“this”关键字

来自分类Dev

具有构建器模式的“动态”关键字隐藏了扩展方法

来自分类Dev

使用此关键字dojo模块事件处理程序

来自分类Dev

使用'this'关键字的事件处理程序未按预期工作

来自分类Dev

通过在Java中使用“ this”关键字来解释“ this”关键字的功能和实例变量隐藏的概念

来自分类Dev

C宏:如何隐藏__at关键字?

来自分类Dev

基于关键字的CPython扩展文档

来自分类Dev

了解继承和关键字“扩展”

来自分类Dev

扩展:finally关键字是什么?

来自分类Dev

扩展:finally关键字是什么?

来自分类Dev

如何使用IN关键字?

来自分类Dev

使用IN关键字查询

来自分类Dev

使用或过滤关键字

来自分类Dev

JavaScript 使用 (this) 关键字

来自分类Dev

@final 关键字的使用

来自分类Dev

App Store关键字:使用“商标”关键字

来自分类Dev

是否有一个Google Chrome浏览器扩展程序,其功能类似于Firefox的关键字快速搜索书签?

来自分类Dev

如何使用“常规”(关键字)参数或父项实例初始化继承的对象

Related 相关文章

  1. 1

    Chrome扩展程序:无法从标签中提取关键字

  2. 2

    使用多个多功能框关键字的Chrome扩展程序

  3. 3

    Google Chrome扩展程序:多功能框关键字如何使用?

  4. 4

    赤裸的“扩展”关键字

  5. 5

    “如果打算隐藏则使用新关键字”警告

  6. 6

    Mustache.js使用“链接”关键字扩展行为

  7. 7

    为什么Java / Scala使用扩展/实现关键字?

  8. 8

    为什么Java / Scala使用扩展/实现关键字?

  9. 9

    通过关键字在Django多对多中查询模型继承中的父级

  10. 10

    通过关键字在Django多对多中查询模型继承中的父级

  11. 11

    何时为小部件父级构造函数添加“ this”关键字?

  12. 12

    用于访问父元素的“this”关键字

  13. 13

    具有构建器模式的“动态”关键字隐藏了扩展方法

  14. 14

    使用此关键字dojo模块事件处理程序

  15. 15

    使用'this'关键字的事件处理程序未按预期工作

  16. 16

    通过在Java中使用“ this”关键字来解释“ this”关键字的功能和实例变量隐藏的概念

  17. 17

    C宏:如何隐藏__at关键字?

  18. 18

    基于关键字的CPython扩展文档

  19. 19

    了解继承和关键字“扩展”

  20. 20

    扩展:finally关键字是什么?

  21. 21

    扩展:finally关键字是什么?

  22. 22

    如何使用IN关键字?

  23. 23

    使用IN关键字查询

  24. 24

    使用或过滤关键字

  25. 25

    JavaScript 使用 (this) 关键字

  26. 26

    @final 关键字的使用

  27. 27

    App Store关键字:使用“商标”关键字

  28. 28

    是否有一个Google Chrome浏览器扩展程序,其功能类似于Firefox的关键字快速搜索书签?

  29. 29

    如何使用“常规”(关键字)参数或父项实例初始化继承的对象

热门标签

归档