javascript - Chrome Extension content_script on Twitter pages losing events when changing URL -


i'm having go little chrome extension add button each of "following" users on following page on twitter.com.

so far, i've got content script working enough add button each of 'following' users, both on page load, , when more users added when page ajax-appended twitter.com when scroll down. i've added onclick event each button, wrapped in closure, when click it, console.logs user's button clicked. works fine.

however, when click between (for example) followers page , following page, onclick events no longer fire, though button still there in dom. it's if onclick event has been lost. have happened onclick event?

note after returning 'following' page , noting lost events on existing buttons, scrolling down add more users list correctly appends more buttons onclick events in place. remove , re-add buttons when click 'following' page, it'd nice know why events aren't there.

manifest.json:

{    "name": "twitter button",    "version": "0.1",    "permissions": ["tabs"],    "content_scripts": [{        "matches": ["https://twitter.com/*"],        "css": ["style.css"],        "js": ["content_script.js"],        "run_at": "document_end"     }],    "manifest_version": 2 } 

content_script.js:

function addbuttons(){      // act on 'following' page     // note did try setting 'matches' attribute in manifest file     // 'following' page, didn't seem fire consistently     // hence matching on twitter page, , acting on 'following' page     if (document.url.indexof("twitter.com/following") > -1){          // list of btn-group elements         var btngroups = document.queryselectorall(".btn-group");          for(var = 0; < btngroups.length; i++){             var btngroup = btngroups[i];             var grandparent = btngroup.parentnode.parentnode.nodename;              // add note elements list items have not aleady had note element added             if(btngroup.children.length === 2 && grandparent === 'li'){                  var followeduser = btngroup.getattribute("data-screen-name");                  // create closure each btngroup correct handle available current clicked button                 var closure = (function(followeduser){                     return function(){                          var button = document.createelement("button");                         button.innerhtml = "click me";                         button.classname = "btn primary-btn";                          button.onclick = function(){                             console.log("clicked " + followeduser + " button");                             return false;                         };                          btngroup.appendchild(button);                     }                 })(followeduser);                  closure();                           }         }     } }  // fire (manifest set fire on document_end) addbuttons();  // register mutationobserver further dom changes var observer = new mutationobserver(function(mutations, observer){     addbuttons(); }); observer.observe(document, {     subtree: true,     attributes: true }); 

thanks


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -