CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
sng
sng

Reputation: 129

Chrome extension DOM Manipulation doesn't work all the time

So I'm trying to learn javascript while also messing around with building a chrome extension. I'm trying to do some simple DOM manipulation like removing elements and adding buttons to a site. I got it working but the problem is that for some reason the DOM manipulation doesn't happen all the time. I'd have to refresh the page and it will work sometimes. Not sure what's going on.

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);
};

Upvotes: 0

Views: 845

Answers (2)

sng
sng

Reputation: 129

Not really sure if it's really an answer, but the problem seems to only happen on my macbooks Yosemite chrome browser. I've tested this on a friends linux laptop and my girlfriends Windows 7 Desktop and my work laptop and can't reproduce the problem.

Upvotes: 0

Antony Sargent
Antony Sargent

Reputation: 872

It's possible there's something unusual about the site in question that causes the DOM to not become ready for an unusual length of time, and your content scripts are not running because you've set them to run at document_end. You might try seeing if switching to document_idle makes any difference. Also, you might try a simple test like just having your content script do something like console.log('hello world') and verifying that the script is actually running on the page; if that always works then you can progressively add more code to the hello world script from your full actual code, and eventually you should find a point at which it starts breaking.

Upvotes: 1

Related Questions