Javascript 加载后在网站上执行chrome扩展_Javascript_Html_Css

Javascript 加载后在网站上执行chrome扩展

javascript html css

Javascript 加载后在网站上执行chrome扩展,javascript,html,css,Javascript,Html,Css,我对stackoverflow甚至编程都是新手。我刚刚开始学习在线编程，我正在尝试做我的第一个谷歌扩展。（但因为我是一个完全的新手，代码可能看起来也很糟糕——而且效率不高）我想做一个google扩展，根据google扩展的popup.html中的复选框值隐藏/显示论坛上的某些线程（与facebook、instagram、twitter等相关）我的大部分代码都在工作。如果单击google扩展，将显示一个弹出窗口，并可以设置复选框。点击“instellingen bewaren”按钮后，这些

我对stackoverflow甚至编程都是新手。我刚刚开始学习在线编程，我正在尝试做我的第一个谷歌扩展。（但因为我是一个完全的新手，代码可能看起来也很糟糕——而且效率不高）

我想做一个google扩展，根据google扩展的popup.html中的复选框值隐藏/显示论坛上的某些线程（与facebook、instagram、twitter等相关）

我的大部分代码都在工作。如果单击google扩展，将显示一个弹出窗口，并可以设置复选框。点击“instellingen bewaren”按钮后，这些设置将保存到chrome.storage并实施。此外，当你在论坛上点击chrome扩展时，会根据你上次的设置过滤线程

我的问题是，我希望在论坛页面加载时进行过滤。我现在总是要点击chrome扩展图标来开始过滤。如果我转到论坛的另一个页面，我需要再次单击扩展以再次开始过滤

我有一种感觉，我正在尝试的所有事情都会导致在加载popup.html后执行代码，而不是加载论坛页面（至少这是我在查看两个页面的控制台并执行一些console.log命令时得出的结论）

我尝试过的事情：

创建background.js文件并使用命令（同时更新了manifest.json文件）：chrome.tabs.onUpdated.addListener
将其放置在my content.js文件中： document.addEventListener（“DOMContentLoaded”，过滤器）；或 chrome.tabs.onUpdated.addListener 或窗户

这是当前代码：

manifest.json

{
  "manifest_version": 2,
  "name": "  Schifters tool",
  "permissions": [ "tabs", "activeTab", "storage" ],
  "version": "0.1",
      "icons": {
      "128": "images/S-128.png",
      "16": "images/S-16.png",
      "48": "images/S-48.png"
   },
   "browser_action": {
      "default_icon": "images/schifters.png",
      "default_popup": "popup.html"
   },   
   "description": "  Schifters Tool",
   "content_scripts": [
    {
      "matches": [
        "https://schifters.be/viewforum.php*"
      ],
      "js": ["content.js"]
    }
  ]
}

{
  "manifest_version": 2,
  "name": "  Schifters tool",
  "permissions": [ "tabs", "activeTab", "storage" ],
  "version": "0.1.1",
      "icons": {
      "128": "images/Schifters.png",
      "16": "images/Schifters-16x16.png",
      "32": "images/schifters-32x32.png"
   },
   "browser_action": {
      "default_icon": "images/schifters.png",
      "default_popup": "popup.html"
   }, 
   "description": "  Schifters Tool",
   "content_scripts": [
    {
      "matches": [
        "https://schifters.be/viewforum.php*"
      ],
      "js": ["content.js", "popup.js"]
    }
  ]
}

popup.html

<!doctype html>
<html>

<head>
  <title>Schifters Tool</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
 </head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <a href="https://schifters.be/index.php" target="_blank">Schifters Tool</a>
      <span href="https://schifters.be/index.php" class="version">(1.0.0)</span>
    </h1>
  </div>
   <form> 
   <div class="activeerFilters">
   <p>Geef aan welke posts verborgen moeten worden:</p>
  </div>
  </form>

   <form>   
   <div class="filters">
    <label for="facebook"><input id="facebook" type="checkbox" name="filtering"> Facebook wedstrijd</label>
 </div>
  </form>

  <button id="save">Instellingen bewaren</button>
  <div id="status"></div>
  <script src="content.js"></script> 
</body>

</html>

<!doctype html>
<html>

<head>
  <title>Schifters Tool</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">

</head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <a href="https://schifters.be/index.php" target="_blank"><img class="logo-icon" src="images/Schifters.png"></a> <a href="https://schifters.be/index.php" target="_blank">Schifters Tool</a>
      <span href="https://schifters.be/index.php" class="version">(0.1.1)</span>
    </h1>
  </div>

   <form> 
   <div class="activeerFilters">
   <p>Geef aan welke posts verborgen moeten worden:</p>
   <p><label for="activeerFilters"><input id="activeerFilters" type="checkbox" name="activeerFiltering">Activeer de filter opties</label></p>
  </div>
  </form>

   <form> 

   <div class="filters">


    <label for="gespeeld"><input id="gespeeld" type="checkbox" name="filtering"> <a href="#"><img src="./images/GESPEELD.png" alt="GESPEELD"></a> GESPEELD</label>
    <label for="facebook"><input id="facebook" type="checkbox" name="filtering"> <a href="#"><img src="./images/facebookWedstrijd.png" alt="Facebook wedstrijd"></a> Facebook wedstrijd</label>
  </div>
  </form>


  <button id="save">Instellingen bewaren</button>
  <div id="status"></div>
  <script src="content.js"></script> 
  <script src="popup.js"></script> 
</body>

</html>

toonFacebook.js

{
// place all posts in an Array
 const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));

// show facebook posts
for (var i = 0; i < topics.length; ++i) {
//    console.log(topics[i].textContent);
    if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
        console.log('ok')
            topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "";
} else {
//      console.log('nok')
    }
  }

}

{
// place all posts in an array
 const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));

// hide all facebook posts
for (var i = 0; i < topics.length; ++i) {
//    console.log(topics[i].textContent);
    if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
        console.log('ok')
            topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "none";
} else {
//      console.log('nok')
    }
  }

}

{
//将所有柱放置在一个数组中
const topics=Array.from（document.querySelector（'[class=“forumbg”]'））.queryselectoral（'ul>li'）；
//显示facebook帖子
对于（变量i=0；i


verbergFacebook.js
{
// place all posts in an Array
 const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));

// show facebook posts
for (var i = 0; i < topics.length; ++i) {
//    console.log(topics[i].textContent);
    if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
        console.log('ok')
            topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "";
} else {
//      console.log('nok')
    }
  }

}

{
// place all posts in an array
 const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));

// hide all facebook posts
for (var i = 0; i < topics.length; ++i) {
//    console.log(topics[i].textContent);
    if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
        console.log('ok')
            topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "none";
} else {
//      console.log('nok')
    }
  }

}

{
//将所有柱放置在一个数组中
const topics=Array.from（document.querySelector（'[class=“forumbg”]'））.queryselectoral（'ul>li'）；
//隐藏所有facebook帖子
对于（变量i=0；i

就像最后两个js一样。那里有很多额外的文件。每次一个用于隐藏特定类型的线程，另一个用于显示特定类型的线程
也许把这段代码放在大约20个不同的文件中效率不高？但是我无法让我的复选框值在这些.js文件中工作
我希望chrome扩展在加载论坛页面后立即过滤论坛上的线程（基于上次的复选框设置）
显示扩展弹出窗口或更改复选框设置并单击popup.html页面上的按钮时，“过滤器”选项已起作用。
但最后一个函数对我来说是个谜：）
提前通知 我让它工作了。（多多少少）
设置如下所示：
Manifest.json
{
  "manifest_version": 2,
  "name": "  Schifters tool",
  "permissions": [ "tabs", "activeTab", "storage" ],
  "version": "0.1",
      "icons": {
      "128": "images/S-128.png",
      "16": "images/S-16.png",
      "48": "images/S-48.png"
   },
   "browser_action": {
      "default_icon": "images/schifters.png",
      "default_popup": "popup.html"
   },   
   "description": "  Schifters Tool",
   "content_scripts": [
    {
      "matches": [
        "https://schifters.be/viewforum.php*"
      ],
      "js": ["content.js"]
    }
  ]
}

{
  "manifest_version": 2,
  "name": "  Schifters tool",
  "permissions": [ "tabs", "activeTab", "storage" ],
  "version": "0.1.1",
      "icons": {
      "128": "images/Schifters.png",
      "16": "images/Schifters-16x16.png",
      "32": "images/schifters-32x32.png"
   },
   "browser_action": {
      "default_icon": "images/schifters.png",
      "default_popup": "popup.html"
   }, 
   "description": "  Schifters Tool",
   "content_scripts": [
    {
      "matches": [
        "https://schifters.be/viewforum.php*"
      ],
      "js": ["content.js", "popup.js"]
    }
  ]
}

popup.html
<!doctype html>
<html>

<head>
  <title>Schifters Tool</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
 </head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <a href="https://schifters.be/index.php" target="_blank">Schifters Tool</a>
      <span href="https://schifters.be/index.php" class="version">(1.0.0)</span>
    </h1>
  </div>
   <form> 
   <div class="activeerFilters">
   <p>Geef aan welke posts verborgen moeten worden:</p>
  </div>
  </form>

   <form>   
   <div class="filters">
    <label for="facebook"><input id="facebook" type="checkbox" name="filtering"> Facebook wedstrijd</label>
 </div>
  </form>

  <button id="save">Instellingen bewaren</button>
  <div id="status"></div>
  <script src="content.js"></script> 
</body>

</html>

<!doctype html>
<html>

<head>
  <title>Schifters Tool</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">

</head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <a href="https://schifters.be/index.php" target="_blank"><img class="logo-icon" src="images/Schifters.png"></a> <a href="https://schifters.be/index.php" target="_blank">Schifters Tool</a>
      <span href="https://schifters.be/index.php" class="version">(0.1.1)</span>
    </h1>
  </div>

   <form> 
   <div class="activeerFilters">
   <p>Geef aan welke posts verborgen moeten worden:</p>
   <p><label for="activeerFilters"><input id="activeerFilters" type="checkbox" name="activeerFiltering">Activeer de filter opties</label></p>
  </div>
  </form>

   <form> 

   <div class="filters">


    <label for="gespeeld"><input id="gespeeld" type="checkbox" name="filtering"> <a href="#"><img src="./images/GESPEELD.png" alt="GESPEELD"></a> GESPEELD</label>
    <label for="facebook"><input id="facebook" type="checkbox" name="filtering"> <a href="#"><img src="./images/facebookWedstrijd.png" alt="Facebook wedstrijd"></a> Facebook wedstrijd</label>
  </div>
  </form>


  <button id="save">Instellingen bewaren</button>
  <div id="status"></div>
  <script src="content.js"></script> 
  <script src="popup.js"></script> 
</body>

</html>

在此设置中，加载页面时线程被隐藏（基于popup.html文件中复选框的最后设置）。
在popup.html文件中更改设置时，也会应用这些更改。
因此，它似乎正在发挥作用
然而，我在控制台中遇到一些错误（我不知道这是否是一个问题）。
当我转到popup.html文件的控制台时，出现以下错误：
未捕获的TypeError:无法读取null的属性“addEventListener”
在popup.js:48
它指的是这一行代码：
document.getElementById('save').addEventListener('click', save_options);

var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li')); 

这似乎合乎逻辑，因为“论坛网页”没有保存按钮（该按钮位于popup.html文件中）。
我是否需要更改代码中的任何内容来避免这种情况？或者我可以忽略它吗
另一个错误在popup.html控制台中：
未捕获的TypeError:无法读取null的属性'querySelectorAll'
在content.js:1
它指的是这一行代码：
document.getElementById('save').addEventListener('click', save_options);

var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li')); 

我认为这是因为从popup.html页面运行时，“document.”应该更改为“chrome.tabs.”。但我觉得奇怪的是，论坛线程被正确隐藏。如果我们不能将论坛线程放置在一个数组中，那么如何从popup.html文件中执行此操作。。（多多少少）
设置如下所示：
Manifest.json
{
  "manifest_version": 2,
  "name": "  Schifters tool",
  "permissions": [ "tabs", "activeTab", "storage" ],
  "version": "0.1",
      "icons": {
      "128": "images/S-128.png",
      "16": "images/S-16.png",
      "48": "images/S-48.png"
   },
   "browser_action": {
      "default_icon": "images/schifters.png",
      "default_popup": "popup.html"
   },   
   "description": "  Schifters Tool",
   "content_scripts": [
    {
      "matches": [
        "https://schifters.be/viewforum.php*"
      ],
      "js": ["content.js"]
    }
  ]
}

{
  "manifest_version": 2,
  "name": "  Schifters tool",
  "permissions": [ "tabs", "activeTab", "storage" ],
  "version": "0.1.1",
      "icons": {
      "128": "images/Schifters.png",
      "16": "images/Schifters-16x16.png",
      "32": "images/schifters-32x32.png"
   },
   "browser_action": {
      "default_icon": "images/schifters.png",
      "default_popup": "popup.html"
   }, 
   "description": "  Schifters Tool",
   "content_scripts": [
    {
      "matches": [
        "https://schifters.be/viewforum.php*"
      ],
      "js": ["content.js", "popup.js"]
    }
  ]
}

popup.html
<!doctype html>
<html>

<head>
  <title>Schifters Tool</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
 </head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <a href="https://schifters.be/index.php" target="_blank">Schifters Tool</a>
      <span href="https://schifters.be/index.php" class="version">(1.0.0)</span>
    </h1>
  </div>
   <form> 
   <div class="activeerFilters">
   <p>Geef aan welke posts verborgen moeten worden:</p>
  </div>
  </form>

   <form>   
   <div class="filters">
    <label for="facebook"><input id="facebook" type="checkbox" name="filtering"> Facebook wedstrijd</label>
 </div>
  </form>

  <button id="save">Instellingen bewaren</button>
  <div id="status"></div>
  <script src="content.js"></script> 
</body>

</html>

<!doctype html>
<html>

<head>
  <title>Schifters Tool</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">

</head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <a href="https://schifters.be/index.php" target="_blank"><img class="logo-icon" src="images/Schifters.png"></a> <a href="https://schifters.be/index.php" target="_blank">Schifters Tool</a>
      <span href="https://schifters.be/index.php" class="version">(0.1.1)</span>
    </h1>
  </div>

   <form> 
   <div class="activeerFilters">
   <p>Geef aan welke posts verborgen moeten worden:</p>
   <p><label for="activeerFilters"><input id="activeerFilters" type="checkbox" name="activeerFiltering">Activeer de filter opties</label></p>
  </div>
  </form>

   <form> 

   <div class="filters">


    <label for="gespeeld"><input id="gespeeld" type="checkbox" name="filtering"> <a href="#"><img src="./images/GESPEELD.png" alt="GESPEELD"></a> GESPEELD</label>
    <label for="facebook"><input id="facebook" type="checkbox" name="filtering"> <a href="#"><img src="./images/facebookWedstrijd.png" alt="Facebook wedstrijd"></a> Facebook wedstrijd</label>
  </div>
  </form>


  <button id="save">Instellingen bewaren</button>
  <div id="status"></div>
  <script src="content.js"></script> 
  <script src="popup.js"></script> 
</body>

</html>

在此设置中，加载页面时线程被隐藏（基于popup.html文件中复选框的最后设置）。
在popup.html文件中更改设置时，也会应用这些更改。
因此，它似乎正在发挥作用
然而，我在控制台中遇到一些错误（我不知道这是否是一个问题）。
当我转到popup.html文件的控制台时，出现以下错误：
未捕获的TypeError:无法读取null的属性“addEventListener”
在popup.js:48
它指的是这一行代码：
document.getElementById('save').addEventListener('click', save_options);

var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li')); 

这似乎合乎逻辑，因为“论坛网页”没有保存按钮（该按钮位于popup.html文件中）。
我是否需要将代码中的任何内容更改为