javascript - Chrome 扩展 DOM 操作并不总是有效

Question

所以我正在尝试学习 javascript，同时也尝试构建 chrome 扩展。我正在尝试执行一些简单的 DOM 操作，例如删除元素并向网站添加按钮。我让它工作了，但问题是由于某种原因 DOM 操作并不总是发生。我必须刷新页面，有时它会起作用。不确定发生了什么。

list .json

{
  "name": "Twitch Filter",
  "version": "1",
  "description": "Filters out streamers and games for www.twitch.tv",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "name": "Twitch Filter",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery.js", "background.js"],
    "css": ["customStyles.css"],
    "matches": [ "http://www.twitch.tv/directory/all", "https://www.twitch.tv/directory/all", "https://www.twitch.tv/directory/random", "http://www.twitch.tv/directory/random"],
    "run_at": "document_end"
  }]
}

背景.js

var blockedUsers= ['/test'];
var blockedTypes = ['test'];

$(document).ready(function() {

  console.log("LOADED");
  blockGames(blockedTypes);
  blockStreamers(blockedUsers);
  addBlockUserButtons();

  MutationObserver = window.MutationObserver;

  var observer = new MutationObserver(function(mutations, observer) {
      // fired when a mutation occurs
      blockGames(blockedTypes);
      blockStreamers(blockedUsers);
      addBlockUserButtons();
      // ...
  });

  // define what element should be observed by the observer
  // and what types of mutations trigger the callback
  var target = document;
  var config = {subtree: true, attributes: false, childList: true, characterData:false};
  observer.observe(target, config);
});

function blockStreamers(blockedUsers) {
  var streamUserNames = document.querySelectorAll('a.cap');
  for(i = 0; i < streamUserNames.length;i++)
  {
      var item = streamUserNames[i];
      var blockedBoolean = $.inArray(item.getAttribute('href'), blockedUsers);
      if (blockedBoolean != -1) {
        $(item).closest('div[class^="stream item"]').remove();
      }
  }
};

function blockGames(blockedTypes) {
  var streamBoxArts = document.querySelectorAll('a.boxart');
  for(i=0; i < streamBoxArts.length;i++)
  {
    var item = streamBoxArts[i];
    var blockedBoolean = $.inArray(item.getAttribute('title'), blockedTypes);
    if (blockedBoolean != -1) {
      $(item).closest('div[class^="stream item"]').remove();
    }
  }
};

function addBlockUserButtons() {
  var usersList = $('p.info').children('a');
  for(i = 0; i < usersList.length;i++) {
    var user = usersList[i];
    var streameUserName = user.getAttribute('href').replace('/profile', '');
    var blockIdName = 'blockuser_link_' + streameUserName.replace('/','');
    var newNode = document.createElement('a');
    newNode.setAttribute('href', '#');
    newNode.setAttribute('id', blockIdName);
    $(newNode).text('BLOCK');
    user.parentNode.insertBefore(newNode, user.nextSibling);
    document.getElementById(blockIdName).addEventListener('click', createBlockUserFunc(streameUserName));
  }
};

function createBlockUserFunc(i) {
    return function() {
      blockUser(i);
    };
}

function blockUser(streamer){
  blockedUsers.push(streamer);
  blockStreamers(blockedUsers);
};

Answer 1

有问题的网站可能存在一些异常情况，导致 DOM 在异常长的时间内没有准备好，并且您的内容脚本没有运行，因为您已将它们设置为在 document_end 运行。您可以尝试看看切换到 document_idle 是否会产生任何影响。另外，您可以尝试一个简单的测试，例如让您的内容脚本执行类似 console.log('hello world') 的操作，并验证脚本是否确实在页面上运行；如果总是有效，那么您可以从完整的实际代码中逐步向 hello world 脚本添加更多代码，最终您应该找到它开始中断的点。