Chrome 扩展 DOM 操作始终不起作用

Question

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

manifest.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"
  }]
}

background.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 未准备好一段异常长的时间，并且您的内容脚本未运行ning 因为您已经在 document_end 将它们设置为运行。您可以尝试查看切换到 document_idle 是否有任何不同。此外，您可以尝试一个简单的测试，比如让您的内容脚本执行 console.log('hello world') 之类的操作并验证该脚本实际上运行ning 在页面上；如果这始终有效，那么您可以从完整的实际代码中逐步向 hello world 脚本添加更多代码，最终您应该找到它开始崩溃的点。

Answer 2

不太确定这是否真的是一个答案，但问题似乎只发生在我的 macbooks Yosemite chrome 浏览器上。我已经在朋友 linux 笔记本电脑和我女朋友 Windows 7 台式机和我的工作笔记本电脑上测试过，无法重现问题。

Chrome 扩展 DOM 操作始终不起作用

Chrome extension DOM Manipulation doesn't work all the time

javascript

google-chrome-extension