Создание первого chrome расширения для видео сайтов для удаления рекламы (для удаления класса с помощью get element by ID) - PullRequest
Новая
       6

Создание первого chrome расширения для видео сайтов для удаления рекламы (для удаления класса с помощью get element by ID)

0 голосов
/ 19 марта 2020

Создание нового chrome расширения для сторонних видео-сайтов для удаления определенных классов с использованием элемента get по идентификатору, которое запускается или удаляется автоматически, когда на этом сайте появляется тот же элемент, что и в Adblock.

Когда страница видео обновляется или загружается в первый раз, тогда не возникает никаких проблем (идентификатор находит значение), код запускается успешно, но когда видео заканчивается и автоматически воспроизводит другое видео последовательно (из списка воспроизведения) без обновления веб-сайта. Тогда возникает проблема. Я начинаю получать нулевое значение при попытке получить элемент по Id или Undefined при нажатии кнопки. 

var temp =  document.getElementById('html5_player_id_html5');
 alert('Element temp : ' + temp);

Результат: Нуль 

var v = document.getElementsByClassName("ad-point");
  alert('Element temp : ' + v[0]); 
  while (v.length >0) v[0].remove();
  alert("Hello timetext remove");

Результат: Не определено 

document.addEventListener('DOMContentLoaded', function() {
  var link = document.getElementById('btn_click_id');
  // onClick's logic below:
  link.addEventListener('click', function() {     alert("Hello Butteon click ");
   window.onload = myFunction();
  });
});   

function timedText() {   setTimeout(myTimeout, 1000) }

function myTimeout()
{ 
  var v = document.getElementsByClassName("ad-point");
  alert('Element temp : ' + v[0]);       
  while (v.length >0) v[0].remove();

  alert("Hello timetext remove");
}

function myFunction()
{
  // event.preventDefault();
  let temp = document.getElementById('html5_player_id_html5');
  alert('Element temp : ' + temp);          
  
  if(typeof(temp) != 'undefined' && temp != null)
    {
        temp.remove();
        console.log("3 Hello Html5 d4d chrome extenstion : " +  temp);
        alert('Element exists!');          
        timedText();
    } 
  else
   {
      if(typeof(temp) == 'undefined' && temp == null)
          {
           alert('Element null value!');   
           timedText();    
          }
            else{
                  // myFunction();
                  timedText();    
                  alert('Element does not exist!');
                }
   }
}
<!DOCTYPE html>
<html>
  <head>
    <title>Viki Launcher</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"
    />
    <style>
      /* Modal Structure */

      html,
      body {
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        margin: 0;
        min-height: 180px;
        padding: 0;
        width: 260px;
      }

      h1 {
        font-family: "Menlo", monospace;
        font-size: 22px;
        font-weight: 400;
        margin: 0;
        color: #2f5876;
      }

      a:link,
      a:visited {
        color: #000000;
        outline: 0;
        text-decoration: none;
      }

      img {
        width: 10%;
      }

      .modal-header {
        align-items: center;
        border-bottom: 0.5px solid #dadada;
      }

      .modal-content {
        padding: 0 22px;
      }

      .modal-icons {
        border-top: 0.5px solid #dadada;
        height: 50px;
        width: 100%;
      }

      .logo {
        padding: 16px;
      }

      .logo-icon {
        vertical-align: text-bottom;
        margin-right: 4px;
      }

      .version {
        color: #444;
        font-size: 18px;
      }

      .flex-container {
        display: flex;
        justify-content: space-between;
        padding: 10px 22px;
      }

      .flex {
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
        width: 80px;
      }

      .flex:hover {
        opacity: 0.4;
      }

      .flex .fa {
        font-size: 30px;
        color: #2f5876;
      }

      .separator {
        width: 100%;
        border-top: 2px groove white;
        margin: 5px -5px 5px -3px;
      }

      #titletext {
      padding: 8px 8px 2px 0px;
      text-align: center;
      }
    </style>
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
    <!-- <script src="popup.js"></script> -->
    
  </head>

   <body >
    <div class="modal-header">
      <h1 id="#titletext" class="logo">
        <!-- <img class="mainlogo-icon" src="images/iconsd4d.png  " /> -->
        <img class="logo-icon" src="images/icons.png " /><b> Viki</b> Ads
        <span class="version">(1.0.0)</span>
      </h1>
    </div>
    <div class="modal-content">
      <p>If you've DANCE content would like to share, just send a DM/TAG US on instagram <b>@dance4dancerss</b> & we post it. 
        Featuring dancers from around the world <i class="fa fa-globe" style="color:rgb(248, 75, 44) "></i> </p>
    </div>
    <div class="modal-icons">
      <div class="flex-container">
        <!-- <div class="flex">
          <a href="https://www.traversymedia.com" target="_blank">
            <i class="fa fa-globe" style="color:darksalmon "></i>
          </a>
        </div> -->
        <div class="flex">
          <a href="https://www.youtube.com/watch?v=q_WvEJntnJM" target="_blank">
            <i class="fa fa-youtube" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
        <div class="flex">
          <a href="https://www.twitter.com/dance4dancers" target="_blank">
            <i class="fa fa-twitter" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
        <div class="flex">
          <a href="https://www.instagram.com/dance4dancerss" target="_blank">
            <i class="fa fa-instagram" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
        <div class="flex">
          <a href="https://facebook.com/dance4dancers" target="_blank">
            <i class="fa fa-facebook" style="color:rgb(248, 75, 44) "></i>
          </a>
        </div>
      </div>
      <div></div>
        <div id="separator0" class="modal-header"> 
      </div>
        <button class="btn_click" id="btn_click_id">Click</button>
      </div>
    </div>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

Вы можете увидеть изображения ниже, когда я запускаю в консоли, он показывает мне данные, но когда я бегу в редакторе, он показывает мне ноль или неопределенный, когда я получить значение из ID введите описание изображения здесь

Я искал его сегодня весь день, но нигде не получил никакой информации. Спасибо

введите описание изображения здесь

...