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在一段不寻常的时间内没有准备就绪，并且您的内容脚本没有运行，因为您已将它们设置为在document_end运行。您可能会尝试查看切换到document_idle是否有任何区别。此外，您可以尝试一个简单的测试，例如让您的内容脚本执行类似console.log（'hello world'）的操作，并验证脚本是否实际在页面上运行;如果它始终有效，那么您可以从完整的实际代码中逐步向hello world脚本添加更多代码，最终您应该找到一个开始破坏的点。

Answer 2

不确定它是否真的是一个答案，但问题似乎只发生在我的Macbook Yosemite chrome浏览器上。我已经在朋友的Linux笔记本电脑和我的女朋友Windows 7桌面和我的工作笔记本电脑上测试了这个并且无法重现这个问题。

Chrome扩展程序DOM操作不会一直有效

2 个答案: